---
title: "How to Tag The Dark Mode Widget for Figma to Elementor?"
url: https://uichemy.com/docs/how-to-tag-the-dark-mode-widget-for-figma-to-elementor/
date: 2024-04-08
modified: 2026-04-14
author: "Sagar Patel"
description: "If you are showing a dark mode toggle in your Figma design then you can tag that element as the Dark Mode widget from The Plus Addons for Elementor using..."
word_count: 320
---

# How to Tag The Dark Mode Widget for Figma to Elementor?

## Key Takeaways

- UiChemy allows tagging a frame as the Dark Mode widget from The Plus Addons for Elementor.
- Exporting a design with tagged elements results in using the Dark Mode widget after conversion.
- The tagging process includes selecting the Manual Widget Tagging Option and confirming the frame or container for the widget.

If you are showing a dark mode toggle in your Figma design then you can tag that element as the Dark Mode 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 Dark Mode widget.

## What Can be Tagged?

A frame can be tagged as a Dark Mode widget.

> *Note: This is a tagging only widget, it will help you create an unformatted widget after conversion so that you can style/design it as per your needs after conversion & benefit from the interactivity/features the widget provides.*

## 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** Dark Mode** widget from **The Plus Widgets** 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/).

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

For this widget, you won’t see any tagging options.

- 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 Dark Mode widget from The Plus Addons for Elementor.

![](https://uichemy.com/wp-content/uploads/2024/04/exported-template-with-dark-mode.gif)

> *Note: Make sure The Plus Addons for Elementor plugin is installed and activated and the widget is activated as well. *

## Frequently Asked Questions

**Q: What if the Dark Mode widget doesn't appear after tagging?**
A: If the Dark Mode widget doesn't show up after tagging, ensure that The Plus Addons for Elementor plugin is installed and activated. This plugin is necessary for the widget to function correctly after conversion. If the widget is activated and still not visible, double-check that you selected the correct frame or container during the tagging process.

**Q: Can I use the Dark Mode widget for other design elements?**
A: The Dark Mode widget can only be tagged to a frame in your Figma design. It is specifically designed to create an unformatted widget that you can style after conversion. This means you can use it for any section where you want to implement a dark mode toggle, but it must be tagged correctly using the UiChemy plugin.

**Q: What is the best method to tag the Dark Mode widget?**
A: The Step by Step Method is recommended for tagging the Dark Mode widget. This method allows you to manually select the frame and ensure that you are tagging the correct element. It provides a clear process to follow, which can help avoid mistakes that might occur with the Express Conversion option.

**Q: What happens if I forget to save after tagging the Dark Mode widget?**
A: If you forget to click the Save button after tagging the Dark Mode widget, your changes will not be applied. This means that when you export your design, the Dark Mode functionality will not be included. Always ensure you see the 'Tagged successfully' message before proceeding to export.

**Q: Are there any limitations when using the Dark Mode widget?**
A: The Dark Mode widget is a tagging-only feature, meaning it does not come with pre-defined styles. You will need to style and design it according to your needs after conversion. Additionally, it is important to note that this widget is only compatible with Elementor and requires The Plus Addons for Elementor to be installed.