How to Tag The TP Message Box Widget for Figma to Elementor?

Key Takeaways

  • UiChemy allows tagging of Figma elements as the Message Box widget from The Plus Addons for Elementor.
  • A frame containing an icon, title text, description text, and close button can be tagged as a Message Box widget.
  • Exporting the design with UiChemy uses the selected texts and style in the Message Box widget.

Table of Contents

If you are using an alert or message box to highlight some content in your Figma design, then you can tag those elements as the Message Box widget from The Plus Addons for Elementor using the UiChemy plugin.

So when you export the design as an Elementor template, that particular section will use the Message Box widget.

What Can be Tagged?

A frame containing an icon, a title text, a description text, and an icon for the close button can be tagged as a Message Box widget.

How to Tag?

Select the top level frame of your layout, then select the Optimize & Convert option and click the Optimize & Convert button.

Now select the frame or container containing the message box in your design and click on the Widget Tags tab in the UiChemy panel.

Then search for the message and click on the Message Box widget from The Plus Addons for Elementor.

On the next screen, you’ll get the information on which element you are tagging as what widget.

Then you’ll see widget specific tagging options.

  1. In the Title dropdown, you have to select the message box title.
  2. Then, in the Description dropdown, you have to select the message box description text.
  3. After that, from the Main Icon dropdown, you have to select the message box icon.
  4. Then, from the Close Icon dropdown, you can select a close icon.
  5. Once done, click on the Save button to complete the tagging.

Now, if you export the design, that element will use the Message Box widget from The Plus Addons for Elementor with your selected texts and style.

exported template with tp message

Note: Make sure The Plus Addons for Elementor plugin is installed and activated and the widget is activated as well. You might have to make some minor adjustments in the widget settings to match the design, especially those elements that are not tagged.

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

Related Frequently Asked Questions


What if the Message Box widget doesn't appear after tagging?

If the Message Box widget doesn't show up after tagging, ensure that The Plus Addons for Elementor plugin is installed and activated. Without this plugin, the widget won't function as expected. Additionally, check that the widget itself is activated within the plugin settings, as this can prevent it from displaying in your Elementor template.

Can I use the UiChemy plugin to tag other elements besides the Message Box?

The UiChemy plugin is specifically designed to tag elements for use with The Plus Addons for Elementor, focusing on widgets like the Message Box. While it supports various widgets, tagging other elements depends on the specific capabilities of the plugin. Always refer to the documentation for the latest supported widgets.

What are the best practices for tagging the Message Box widget?

When tagging the Message Box widget, ensure you select the correct elements for the title, description, and icons from the respective dropdowns. This precision is crucial for maintaining design integrity. Additionally, after tagging, review the widget settings in Elementor to make minor adjustments that align with your original Figma design.

Does tagging the Message Box affect the responsiveness of my design?

Tagging the Message Box widget using UiChemy achieves 95% responsive accuracy across desktop, tablet, and mobile views. However, you may need to make minor adjustments in the widget settings to ensure it displays correctly on all devices, especially for elements that are not tagged.

What happens if I forget to tag the Message Box elements?

If you forget to tag the elements of the Message Box, they will not be recognized as part of the widget when exporting your design to Elementor. This oversight can lead to missing functionality or incorrect display of your message box in the final output, so it's essential to complete the tagging process accurately.

Is there a limit to how many Message Box widgets I can tag in a single design?

The UiChemy plugin does not specify a limit on the number of Message Box widgets you can tag in a single design. However, be mindful of the overall performance and loading times of your Elementor page, as excessive widgets can impact user experience.

Last reviewed: April 14, 2026