> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.
# How Manual Tagging Works in UiChemy?
Understand how UiChemy's manual widget tagging connects your Figma design to Elementor widgets.
### What is Tagging?
**Tagging** is the process of connecting elements in your Figma design, buttons, headings, images, or icons, to their corresponding **Elementor widgets**. This is done using UiChemy, which converts your static Figma design into a fully functional, dynamic WordPress website using Elementor. Tagging defines how each element in your design should behave and appear on your live site.
See the full [list of supported Elementor widgets in UiChemy](/tagging-library/elementor/supported-widgets).
### Why is Tagging Important?
- **Accurate Conversion**, each design component maps directly to the right Elementor widget
- **Greater Control**, flexibility to use either core or advanced widgets depending on your design
- **Efficient Workflow**, reduces the need for manual adjustments in Elementor after export
- **Editable Output**, the exported site is built using Elementor widgets, making it easy to maintain and update
- **Dynamic Results**, converts static designs into responsive, interactive WordPress websites
- **Better Performance with Auto Layout**, using Figma Auto Layout helps UiChemy understand layout hierarchy and structure, leading to more accurate widget tagging and cleaner exports
### How Tagging Works
UiChemy offers two tagging modes depending on your workflow needs:
**1. Auto Widget Selection (Quick Start)**, automatically assigns Elementor's core widgets (Container, Heading, Text, Image) to your Figma layers. Best suited for basic layouts and faster design-to-site conversions.
UiChemy also supports Elementor's **Grid** container, so Figma layouts using a grid structure can convert to a native Elementor Grid instead of a Flexbox Container.
**2. Manual Widget Tagging (Advanced Control)**, manually tag elements using specific widgets such as Elementor Widgets, Elementor Pro Widgets, and The Plus Widgets.
If your design uses Auto Layout in Figma, it greatly improves the tagging experience, it helps UiChemy better interpret your layout's structure, leading to more accurate widget tagging and cleaner output in Elementor.
### How to Tag a Button Widget
You can choose between two conversion methods: **Step by Step Method** or **Quick Conversion**. Here's the Step by Step Method:
1. Select **Step by Step Method** and click **Start**.
2. Select the top-level page or frame of your layout, then click **Next**.
3. Under the **Widget Tagging Mode** tab, choose **Manual Widget Tagging**.
4. In **Step 4: Optimize Your Design** (the **Manage Auto Layout** panel), choose **It's already in Auto Layout** (assuming your design is already using Auto Layout).
5. Under the **Tag Widgets** tab, choose the frame or container that contains your element, then search for the **Button** widget in the UiChemy panel and select it.
6. The **Text** field is filled automatically, but you can change it from the dropdown, click the magic wand icon beside each option to see which element it refers to.
7. The **Icon** field is auto-selected if your button uses one, but you can change it from the dropdown. You can use Font Awesome 5 Free icons, SVG icons, or pick any frame/element as an icon using the eyedropper tool.
8. In the **Link** field, specify the button's URL.
9. In the **Icon Position** field, choose whether the icon appears before or after the text.
10. Click **Save** to complete the tagging, you'll see a "Tagged successfully" message.
The available options vary from widget to widget.
Once you export the design, that element uses the Button widget with all your specified information, including icons from the Elementor icon library.
There's a known bug in the Elementor editor where the icon position doesn't display correctly, but it works correctly in the browser/frontend.
### How to Tag a Menu Widget
Some widgets, like Menu, open a **Tag Details** panel to configure their content instead of the field list a Button uses.
1. Under the **Tag Widgets** tab, click your Figma menu bar layer, then search for the **Menu** widget in the UiChemy panel and select it. A panel opens: "You are tagging Menu bar as a Menu widget."
2. Each menu item gets its own **Navigation Menu** entry, set its **Menu Title** and **Link** (use `#` as a placeholder if you'll set the real URL later).
3. Click **+ Add New** to add another menu item, repeat for each link in your navigation.
4. Set **Menu Direction** to **Horizontal Menu** or **Vertical Menu**, depending on your design.
5. Click **Save** to complete the tagging, you'll see a "Tagged successfully as 'Menu'" message. Click **Clear** instead to remove what you've entered and start over.
### Tagging Errors
If you select the wrong layer while tagging, UiChemy shows an error instead of letting you continue:
- **"You can't tag this, please select one of its children. Please ensure this structure: Page > Container > Widget."** You selected a layer too high up the hierarchy. Click **Add Structure**, or select a child layer that actually represents the widget.
- **"Make sure you select Frame, Component or Instance."** The layer you selected isn't a Figma Frame, Component, or Instance, tagging only works on those layer types. Select a different layer and try again.
### Frequently Asked Questions
Manual tagging gives you greater control over how each design element maps to Elementor widgets, crucial for complex designs that need specific widget types, reducing post-export adjustments.
It automatically assigns Elementor's core widgets to your Figma layers, streamlining conversion for basic layouts without manual input on standard elements like headings and images.
Neglecting Figma's Auto Layout feature is the most common one, it helps UiChemy interpret your design's structure better, resulting in cleaner exports and less manual cleanup in Elementor.
Yes, manual tagging supports core Elementor widgets, Elementor Pro widgets, and The Plus Widgets, so each element can be accurately represented on your WordPress site.