Figma to Elementor: Atomic Elements (v4)
How UiChemy converts to Elementor's v4 Atomic Editor, and why there's no widget tagging step.
Elementor ships two editing systems side by side: the classic v3 widgets (Heading, Button, Icon Box, Form, and the rest of the tagging library), and the newer v4 Atomic Elements (Div Block, Flexbox Container, Heading, Paragraph, Button, Image). Both run on the same site, you're not forced to pick one for the whole project.
Why there's no tagging step here
Manual tagging works because v3 has a fixed catalog of named widgets to map a Figma layer onto. Atomic Elements don't work that way, v4 gives you a small set of generic, composable primitives that you assemble with classes and variables, closer to writing CSS-first HTML than choosing a widget. There's no equivalent widget list to tag against, so the Figma to Elementor tagging library applies only to v3.
How UiChemy converts to Atomic Elements
- Open the UiChemy plugin in Figma and select the top-level frame of your layout.
- Choose Step by Step Method or Quick Conversion, the same as any Figma to Elementor conversion.
- On the Widget Tagging Mode tab, select Atomic Elements (v4) instead of manually tagging widgets. UiChemy maps each layer to the closest atomic primitive automatically, Frames and Auto Layout groups become Div Block or Flexbox Container, text layers become Heading or Paragraph, and so on.
- Global colors and typography sync into Elementor's v4 Variables and Classes, the same way Global Style Sync syncs into v3's Global Colors and Typography.
- Export with Copy to Clipboard or Direct Import, same as v3.
Both v3 and v4 read from the same optimized, Auto Layout Figma design. See Design Optimization either way.