> 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 to Tag The Counter Widget for Figma to Elementor?

Tag a number counter in your Figma design as a dynamic Elementor Counter widget using UiChemy.


If you are using a counter in your Figma design to show number data, you can tag that element as an Elementor **Counter** widget using the UiChemy plugin, making it dynamic when you export it as an Elementor template.

### What Can Be Tagged?

A frame containing a number, title, prefix, and suffix value can be tagged as a Counter widget.

### How to Tag?

To do this, you can choose between two options: **Step by Step Method** or **Quick Conversion**. Here, we'll go with the **Step by Step Method**.

1. First, select the **Step by Step Method** and click the **Start** button.
2. Select the top-level page or frame of your layout, then click the **Next** button.
3. Under the **Widget Tagging Mode** tab, select the **Manual Widget Tagging** option.
4. 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.
5. After that, under the **Tag Widgets** tab, choose the frame or container that contains your element (widget). Then search for the **Counter** widget in the UiChemy panel and select it. Here you'll see [all the supported Elementor widgets](/tagging-library/elementor/compatible-widgets).

You'll then see widget-specific tagging options, and most of them will be auto-filled based on your design.

6. The **Ending Number** field will be automatically filled, but you can click the dropdown to change it. This is the ending number of the counter widget.
7. The **Title** field will be automatically filled, but you can click the dropdown to change it.
8. In the **Starting Number** field, you can set the counter's starting number.
9. From the **Separator** dropdown, you can select the separator type.
10. The **Number Prefix** field will be automatically filled if you've added prefix text in the design.
11. The **Number Suffix** field will be automatically filled if you've added suffix text in the design.
12. Once done, click the **Save** button to complete the tagging.

<video controls width="100%">
  <source src="https://res.cloudinary.com/ekxmy1t9/video/upload/v1782989166/uichemy-docs/tagging-library/elementor-free/counter/tagging-demo.mp4" type="video/mp4" />
</video>

<Callout kind="info">
If your design doesn't have any prefix text, you'll need to manually remove the prefix field data while tagging.
</Callout>

Now, if you export the design, that element will use the Counter widget with all your specified information.

![Exported Elementor template using the Counter widget](https://res.cloudinary.com/ekxmy1t9/image/upload/v1782989169/uichemy-docs/tagging-library/elementor-free/counter/export-result.gif)

### Resource

- [Figma Example](https://www.figma.com/design/fqYegwSczwfSUbN7RMPYk5/Tagging-Examples-Staging-v16?node-id=909-1300&t=QUT1SUb4LFDWKKnJ-1)