> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.

# 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](/tagging-library/elementor/supported-widgets) applies only to v3.

### How UiChemy converts to Atomic Elements

1. Open the UiChemy plugin in Figma, choose **Classic Mode**, then pick **Step by Step Method** or **Quick Conversion**, the same as any Figma to Elementor conversion.
2. Click **Select pages**, and pick the top-level frame of your layout from the picker.
3. 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.
4. Global colors and typography sync into Elementor's v4 **Variables** and **Classes**, the same way [Global Style Sync](/classic-mode/figma-to-elementor/global-style-sync) syncs into v3's Global Colors and Typography.
5. Export with **Copy to Clipboard** or **Direct Import**, same as v3.

<Callout kind="info">
Both v3 and v4 read from the same optimized, Auto Layout Figma design. See [Design Optimization](/design-optimization/auto-layout/convert-your-design) either way.
</Callout>

### Frequently Asked Questions

<ExpandableGroup>
  <Expandable title="Can I mix v3 widgets and v4 Atomic Elements on the same page?" default-open="false">
    Yes, Elementor runs both side by side on the same site and even the same page, and UiChemy's global colors and typography sync works across both.
  </Expandable>

  <Expandable title="Do I need Elementor 4.0 to use Atomic Elements?" default-open="false">
    Yes, Atomic Elements are part of Elementor's v4 Atomic Editor. Sites still on v3 only see the classic widget tagging flow.
  </Expandable>

  <Expandable title="Why can't I manually tag a specific Atomic Element?" default-open="false">
    Atomic Elements are generic building blocks, not named widgets, so there's no fixed list to tag against the way there is with v3. UiChemy maps layers to the closest primitive automatically instead.
  </Expandable>
</ExpandableGroup>