---
title: "How to Tag The Image Gallery Widget for Figma to Elementor?"
url: https://uichemy.com/docs/tag-the-image-gallery-widget-for-figma-to-elementor/
date: 2023-07-20
modified: 2026-04-14
author: "Sagar Patel"
description: "If you are using an image gallery section in your Figma design to showcase a portfolio, you can easily tag that section to the Elementor Image Gallery widget using the..."
image: https://uichemy.com/wp-content/uploads/2023/05/How-to-Tag-The-Image-Gallery-Widget-for-Figma-to-Elementor_-min-1024x536.jpg
word_count: 422
---

# How to Tag The Image Gallery Widget for Figma to Elementor?

## Key Takeaways

- UiChemy allows tagging a frame containing multiple images as an Image Gallery widget for Elementor.
- Users can choose between Step by Step Method or Express Conversion for tagging the Image Gallery widget.
- The Image Gallery widget can have its image fields automatically populated based on the selected design in UiChemy.

If you are using an image gallery section in your Figma design to showcase a portfolio, you can easily tag that section to the Elementor Image Gallery widget using the UiChemy plugin.

So when you export the design as an Elementor template, that particular section will use the Image Gallery widget out of the box.

## What Can be Tagged?

A frame containing multiple images can be tagged as an Image Gallery 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**.

- 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, select 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 **Image Gallery** 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/).

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

- As per your design, you'll see an equal number of **Image **fields created with a selected image in each field. However, you can click the dropdown to change any image. It will automatically list all the available images within your selected element. You can click on the magic wand icon beside each option in the dropdown to understand which element the option is for. You can click on the **+ Add New** button to add more images to the gallery.

> *Note: You can only add image fields up to the same number of images added in your design. If you add any extra image fields, it will be removed automatically once you save the changes, but if you add less number of fields, only those will be exported, not all the images of the layout. *

- From the **Image Size** field, you can choose the image size.

- Then, in the **Columns **field, you have to select the number of columns of your image gallery.

- 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 Image Gallery widget with all your specified information.

![exported template with image gallery](https://uichemy.com/wp-content/uploads/2023/07/exported-template-with-image-gallery-1.gif)

## Resource

- [Figma Example](https://www.figma.com/file/LAxPNuU1Gls4IhwiQqlVMF/UiChemy-Tagging-Examples?type=design&node-id=9-320&mode=design&t=MFVm5nAlvw1FZoFx-11)

## Frequently Asked Questions

**Q: What should I do if the Image Gallery widget doesn't appear after tagging?**
A: If the Image Gallery widget doesn't show up after tagging, ensure that the frame containing your images is correctly selected in the UiChemy panel. If the tagging process was interrupted or not completed, the widget may not export correctly. Double-check that you've followed the tagging steps accurately, particularly under the Tag Widgets tab.

**Q: What is the best practice for selecting image sizes in the Image Gallery widget?**
A: When selecting image sizes for the Image Gallery widget, consider the layout and design of your page. The Image Size field allows you to specify dimensions that best fit your design. Choosing the right size can enhance loading times and overall user experience, so aim for a balance between quality and performance.

**Q: What happens if I add more image fields than my design includes?**
A: If you add more image fields than the number of images in your design, the extra fields will be automatically removed when you save your changes. This ensures that only the images present in your Figma design are exported to the Elementor Image Gallery widget, maintaining consistency in your layout.

**Q: How do I know if my Figma design is compatible with UiChemy?**
A: To ensure your Figma design is compatible with UiChemy, check that it uses supported elements. UiChemy specifically supports Elementor, Gutenberg, and Bricks Builder. For a complete list of compatible widgets, refer to the [supported Elementor widgets](https://uichemy.com/docs/widgets-compatible-with-figma-to-elementor-conversion-in-uichemy/) documentation.