--- title: "How Manual Tagging Works in UiChemy?" url: https://uichemy.com/docs/how-manual-tagging-works-in-uichemy/ date: 2023-07-20 modified: 2026-04-14 author: "Sagar Patel" description: "What is Tagging? Tagging is the process of connecting elements in your Figma design - such as buttons, headings, images, or icons - to their corresponding Elementor widgets. This is..." image: https://uichemy.com/wp-content/uploads/2024/01/How-Manual-Tagging-Works-in-UiChemy_-min-1024x536.jpg word_count: 666 --- # How Manual Tagging Works in UiChemy? ## Key Takeaways - UiChemy connects Figma design elements to corresponding Elementor widgets through tagging. - Tagging in UiChemy allows for accurate conversion of design components to Elementor widgets. - Auto Layout in Figma enhances the tagging experience, leading to cleaner exports in Elementor. - UiChemy offers Auto Widget Selection for quick tagging and Manual Widget Tagging for advanced control. ## What is Tagging? **Tagging** is the process of connecting elements in your Figma design - such as buttons, headings, images, or icons - to their corresponding **Elementor widgets**. This is done using **UiChemy**, a powerful plugin that 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 when implemented on your live site. Check the full [list of supported Elementor widgets in UiChemy](https://uichemy.com/docs/widgets-compatible-with-figma-to-elementor-conversion-in-uichemy/). ## Why is Tagging Important? - **Accurate Conversion**: Each design component maps directly to the right Elementor widget. - **Greater Control**: Offers 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** improves the tagging experience. It 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** to your Figma layers: - Container - Heading - Text - Image Best suited for basic layouts and faster design-to-site conversions. #### 2. Manual Widget Tagging (Advanced Control) Manually tag elements using specific widgets such as** Elementor Widgets, Elementor Pro Widgets, **and** The Plus Widgets.** In the GIF below, you can see the complete list of available widgets. **1. Elementor Widgets** ![Elegant sorte lædersko til mænd, perfekte til hverdag og formelle anledninger. Komfortabel pasform og stilfuldt design.](https://uichemy.com/wp-content/uploads/2023/07/UiChemy-Design-Auto-Layout-Elementor-Widgets.gif) **2. Elementor Pro Widgets** ![Elegant sorte lædersko til mænd, perfekte til hverdag og formelle anledninger. Komfortabel pasform og stilfuldt design.](https://uichemy.com/wp-content/uploads/2023/07/UiChemy-Design-Auto-Layout-Elementor-Pro-Widgets.gif) **3. The Plus Widgets** ![Elegant sorte lædersko til mænd, perfekte til hverdag og formelle anledninger. Komfortabel pasform og stilfuldt design.](https://uichemy.com/wp-content/uploads/2023/07/UiChemy-Design-Auto-Layout-Elementor-The-Plus-Widgets.gif) If your design uses **Auto Layout** in Figma, it greatly improves the tagging experience and results. It helps UiChemy better interpret the structure of your layout, leading to more accurate widget tagging and cleaner output in Elementor. ### How to Tag Button Widget? To do this, you can choose between two options: **Step by Step Method** or **Express Conversion**. Here, we’ll go with the **Step by Step Method**. - First, select the **Step by Step Method **and click on the** Start **button. - Select the top-level page or frame of your layout, then click on the **Next **button. - Under the **Widget Tagging Mode** tab, you’ll see two options: *[Auto Widget Selection](https://uichemy.com/docs/how-manual-tagging-works-in-uichemy/#auto-widget-selection) and [Manual Widget Tagging](https://uichemy.com/docs/how-manual-tagging-works-in-uichemy/#manual-widget-tagging)*. We’ll go with the **Manual Widget Tagging** Option. - Next, under the **Manage Auto Layout** tab, you’ll see two options:** *It’s already in Auto Layout*** and ***Convert to Auto Layout***. We’ll go with the **first option**. - After that, under the **Tag Widgets** tab, choose the frame or container that contains your element (Widget). Then, search for the **Button **widget in the UiChemy panel and select it. Here, you’ll see [all the supported Elementor widgets](https://uichemy.com/docs/widgets-compatible-with-figma-to-elementor-conversion-in-uichemy/). - The **Text** field will be automatically filled, but you can click the dropdown to change it. You can click on the magic wand icon beside each option in the dropdown to understand which element the option is for. - The **Icon** field, if you are using any icon in your button, will be automatically selected, but you can change it from the dropdown if you want. For icons, you can use Font Awesome 5 Free icons or SVG icons. You can also select any frame or element to be used as an icon by clicking on the eyedropper tool, and the option will be available in the dropdown as well. - In the **Link** field, you can even specify the URL of the button. - In the **Icon Position** field, you can select the position of the icon before or after. - Once done, click the **Save **button to complete the tagging, and you’ll see a Tagged successfully message. > *Note: The options will vary from widget to widget.*  Now, if you **Export **the design, that element will use the **Button **widget with all your specified information. For icons, you can even use the Elementor icon library. > *Note: There is a bug within the Elementor editor where the icon position doesn’t work properly but it works properly in the browser.* ### Resource - [Figma Example](https://www.figma.com/file/LAxPNuU1Gls4IhwiQqlVMF/UiChemy-Tagging-Examples?type=design&node-id=23-2&mode=design&t=FCssVGiHvMsVwwld-11) ## Frequently Asked Questions **Q: What are the benefits of manual tagging in UiChemy?** A: Manual tagging in UiChemy allows for greater control over how each design element is mapped to Elementor widgets. This flexibility is crucial for complex designs that require specific widget types. By using manual tagging, you can ensure that each component behaves as intended, reducing the need for post-export adjustments in Elementor. **Q: How does auto widget selection work in UiChemy?** A: Auto widget selection in UiChemy automatically assigns Elementor's core widgets to your Figma layers, streamlining the conversion process for basic layouts. This feature is best for quick design-to-site conversions, as it simplifies the tagging process by eliminating the need for manual input on standard elements like headings and images. **Q: What common mistakes do users make when tagging widgets in UiChemy?** A: One common mistake is neglecting to use Figma's Auto Layout feature, which can lead to inaccurate widget tagging. Auto Layout helps UiChemy interpret the structure of your design better, resulting in cleaner exports. Without it, you may end up with a less organized layout in Elementor, requiring more manual adjustments. **Q: Can I use manual tagging for all types of Elementor widgets?** A: Manual tagging in UiChemy supports various types of Elementor widgets, including core, Elementor Pro, and The Plus Widgets. This allows for a tailored approach to your design, ensuring that each element is accurately represented in your WordPress site. For a complete list of supported widgets, check the [list of supported Elementor widgets in UiChemy](https://uichemy.com/docs/widgets-compatible-with-figma-to-elementor-conversion-in-uichemy/). **Q: How do I tag a button widget in UiChemy?** A: To tag a button widget in UiChemy, select the Manual Widget Tagging option during the tagging process. Choose the appropriate frame or container, then search for the Button widget in the UiChemy panel. You can specify details like the button's icon and URL, ensuring that the exported design meets your requirements. Remember, the options may vary depending on the widget type.