How to Tag the TP Flip Box Widget for Figma to Elementor?

Using cards that flip to reveal more on hover in your Figma design? You can tag them as the Flip Box widget from The Plus Addons for Elementor using the UiChemy plugin, so the whole set exports as one interactive widget.

What Can Be Tagged?

A frame containing one or more card frames, each with an icon or image, a title, and a description, can be tagged as a TP Flip Box widget.

How to Tag?

To do this, open the plugin and choose Classic Mode, then pick one of two options: Step by Step Method or Quick Conversion. This example uses the Step by Step Method.

1. First, choose Classic Mode, 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. On Optimize Multi-Layer Media, click Lock on any flagged layers (or Lock All), then click Next.
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. This example uses the first option.
5. After that, under the Tag Widgets tab, choose the frame or container that contains your element (widget). Then, in the The Plus Widgets group, search for the Flip Box widget in the UiChemy panel and select it. Here you'll see all the supported Elementor widgets.

You'll then see widget-specific tagging options.

6. For each card, pick its frame in the Flip Box field. Click + Add New to add more cards.
7. Inside each card, choose either an Icon or an Image, then pick the Title and Description text layers from the dropdowns.
8. From the Column field, choose how many columns the cards display in, from 1 to 12.
9. Once done, click the Save button to complete the tagging, and you'll see a Tagged successfully message.

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