arrow icon
arrow icon

Convert Static Layers to Interactive Widgets Through Tagging

As you may already be aware, a prototype shows how a product will work and behave overall on its intended platform. It can be classified as a low-fidelity, medium-fidelity, or high-fidelity prototype depending on how closely it resembles the final product.

Thus, our goal in interactive prototyping is to develop a high-fidelity prototype with a variety of dynamic components. We use a variety of transitions, create connections between pages, define states and events for many design elements, and do other sophisticated dynamic modifications in order to carry out interaction design prototyping. In other words, the design components work together exactly like a real product would.

Figma to html Converter

In this way, an interactive app prototype is similar to the finished product. Although interactive prototyping can take more time, Dualite's Tagging feature has made it incredibly simple and quick. 

It can also benefit from the following:

  • It will allow you to render the product more closely and gain insight from the user's experience.

  • You may save a tonne of time and work by sending the interactive app prototype straight to the developers.

  • It can be used for pre-development product testing, and you can use the input it provides to improve your design.

  • An interactive prototype is a simple tool to utilise when making a pitch to investors and outlining how your product will function before it is developed.

In the realm of interactive prototyping, the fidelity of prototypes holds paramount importance. It's not merely about showcasing static designs; rather, it's about bringing them to life to mirror the final product's functionality. This process requires a seamless integration of dynamic components, transitions, and interactive elements. 

Herein lies the significance of tools like Dualite's Tagging feature. Through this feature, you can turn your Figma designs truly dynamic. It enables designers to swiftly elevate their prototypes to a high-fidelity level. This seamless transition from static design to dynamic interaction not only accelerates the prototyping process but also ensures that the resulting prototype closely mirrors the intended user experience, laying a solid foundation for iterative design and development

Dualite Tagging

Using tagging, you may transform static designs (rectangles, ellipses, etc.) into dynamic elements like input fields, custom button actions, and external links.

Renaming your Figma element names on the left side (the Layers Panel, for example) as buttons, input fields, etc. is how Dualite tags elements.

All of the tagging elements' node names (displayed in the Layer Panel on the left) must begin with "##" (double-hash) in order for tagging to be enabled.

Frame 13 containing three tagged elements, including embed, link and a button

If the node name is written just as ##, or is incomplete (like ##lin or ##li) then we neutralise and treat it as normal node names.

External link  (##link[*URL*])

The Figma element(Group, Text, Frame etc.) post conversion would convert it into an anchor tag with the link attached that will open in a New Tab once clicked.

Automatic code generation

  • URL(mandatory) - It should contain the complete URL starting with http or https.some text

This is how it’ll appear in code output


class="a-google-com-123" id=""


>Link Text</a>

With React, we keep all links as a JavaScript object in the script file, which is mapped to the JSX code. This approach makes it easy to access and edit links.

They’re stored as key-value pairs with the classNames being the key.

// scripts.js

export const allLinks = {

"className" : "the-link"



className="a-google-com-123" id=""


>Link Text</a>

As you can notice, with manual tagging, we generate even more semantic classNames, which helps us to make the code more readable.

Input Field(##input[type])

##input converts any Rectangle/Frame/Group element into an input typing field. type is optional and takes the type of ‘Text’ if nothings mentioned

The ##input DO NOT work for Text type, i.e, the placeholder text (e.g Enter your email). You may need to remove the placeholder text for the same. type is optional in this case and would take up text as default if you simply type in ‘##input’

Convert Figma Designs to Code

  • type can include one of the following parameterssome text
    • text(default)
    • email
    • password

Special Case of Input Field - Checkbox and Radio Button

  • Checkbox

Similar to the core ##input concept, you need to tag the rectangle/group/Frame and not any kind of other element like Text.

You can add form properties and names to input elements as per your use-case.

Figma to html Converter


Figma to html Converter


type is mandatory in this. If just ##embed is written without any specific type mentioned then neutralise it and treat it as normal node name

type can include one any external URL, be it from YouTube, S3, or an iFrame.

Figma to html Converter


Figma to html Converter

Creates an empty on-click event handling function that the developer can modify accordingly. You can integrate any external API call, Download-based functionality or something else entirely.

Similar to the ‘##link’ tag, this also maps to an object in scripts.js for easier comprehensibility and cleaner code.

// App.jsx




  onClick={(e) => allFunctions["button"](e)}


// scripts.js

export const allFunctions = {

  button: () => {

    console.log("function button called!");



The developer can handle the callback and change the event type as per your need.

Click here to watch the step by step process.


How does Dualite's Tagging feature simplify interaction prototyping?

down arrow

Dualite's Tagging feature allows you to easily transform static design elements into dynamic components like input fields, buttons, and links by simply renaming them in Figma's Layers Panel. This streamlines the process of creating high-fidelity prototypes that closely resemble the final product.

What are the benefits of using interactive prototypes in the design process?

down arrow

Interactive prototypes closely mimic the functionality of the final product, providing valuable insights into the user experience. They save time by enabling direct collaboration with developers and can be used for pre-development testing to refine the design before implementation.

How does tagging elements in Figma facilitate communication with developers?

down arrow

By tagging elements in Figma, designers can provide developers with clear instructions on how each component should function. This ensures consistency between the design and development phases, leading to smoother handoffs and faster implementation.

Can you provide examples of how tagging works for different types of elements?

down arrow

Certainly! For instance, tagging an element as ##input[type] converts it into an input field, while ##button creates an empty button with an onClick event handling function. By following simple tagging conventions, designers can specify the behaviour of various components in the prototype

How does Dualite handle complex elements like embedded content and external links?

down arrow

Dualite's tagging system supports a variety of complex elements, including embedded content and external links. For example, tagging an element as ##embed[type] allows designers to specify the type of external content to be embedded, such as videos from YouTube or files from S3. This flexibility ensures that designers can accurately represent the intended functionality of their designs.

Crafted for the most productive teams

Transform your UI development workflows 10 times faster