How to Tag The Counter Widget for Figma to Elementor?

Updated on September 21, 2023

Key Takeaways

  • UiChemy allows tagging a frame containing a number, title, prefix, and suffix value as a Counter widget.
  • The Step by Step Method requires selecting the top-level page or frame before proceeding to tag widgets.
  • The Ending Number field is automatically filled but can be changed during the tagging process.

Table of Contents

If you are using a counter in your Figma design to show some number data, then you can tag that element to an Elementor Counter widget using the UiChemy plugin to make 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 Express Conversion.

Here, we’ll go with the Step by Step Method.

  1. First, select the Step by Step Method and click on the Start button.
  2. Select the top-level page or frame of your layout, then click on 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.

Then you’ll see widget-specific tagging options, and most of the options will be auto-filled based on your design.

  1. The Ending Number field will be automatically filled, but you can click the dropdown to change it. This number will be the ending number of the counter widget.
  2. The Title field will be automatically filled, but you can click the dropdown to change it. 
  3. In the Starting Number field, you can add the counter starting number.
  4. From the Separator dropdown, you can select the separator type.
  5. The Number Prefix field will be automatically filled if you have added the text in the design.
  6. The Number Suffix field will be automatically filled if you have added the text in the design.
  7. Once done, click on the Save button to complete the tagging.

Note: If your design doesn’t have any prefix text then while tagging you have to manually remove the prefix field data.

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

exported template with counter

Resource

About the Author

Photo of Sagar Patel CEO of UiChemy
CEO · UiChemy · 11 years experience

Sagar is the Founder & CEO of POSIMYTH Innovations, with 10+ years building WordPress products trusted by 100,000+ websites globally. He has led the development of The Plus Addons for Elementor, Nexter, WDesignKit, and UiChemy, all built hands-on from concept to launch. His work focuses on making website building faster, more flexible, and accessible for creators and businesses worldwide.

WordPressFigmaUI DesignWeb DesignElementorBricksAutomationClaudeAI
LinkedIn X Website
Join our Design Community

Related Frequently Asked Questions

What if my counter widget isn't displaying the correct numbers after tagging?

If your counter widget isn't showing the expected numbers, check the Ending Number and Starting Number fields in the tagging options. These fields should be auto-filled based on your design, but you can manually adjust them. If the prefix or suffix fields are not relevant, ensure to remove any unwanted data to avoid display issues.

What is the best method to tag a counter widget in UiChemy?

The Step by Step Method is recommended for tagging a counter widget in UiChemy. This method allows you to manually select the frame and specify the widget tagging options, ensuring that all necessary fields, such as the Ending Number and Title, are correctly filled out for accurate export to Elementor.

How do I ensure my design maintains responsive accuracy when using UiChemy?

UiChemy achieves 95% responsive accuracy across desktop, tablet, and mobile when converting designs. To maintain this accuracy, make sure your Figma design is structured properly and utilizes the auto layout features effectively. This will help ensure that the exported Elementor template adapts well to different screen sizes.

What happens if I forget to fill in the Starting Number for my counter widget?

If you forget to fill in the Starting Number for your counter widget, it may default to zero, which could lead to incorrect display of your data. It's important to specify this number to ensure the counter starts from the intended value, especially if your design relies on specific numerical data.

Are there any limitations when tagging the counter widget in UiChemy?

One limitation to be aware of is that UiChemy only supports tagging elements from Figma designs. It does not convert from other design tools. Additionally, the plugin does not support certain page builders like Divi or WPBakery, so ensure you are using compatible tools for your design workflow.

Last reviewed: April 14, 2026

Related Docs

1234