Here’s a video explanation of how tagging works

Here’s a video explanation of how tagging works

Tagging is a way through you can turn your static designs(rectangles, ellipses etc.) into interactive external links, input fields, custom button actions etc.

Tagging in Dualite works by renaming your Figma elements names on the left side(i.e Layers Panel) as buttons, input fields etc.

For tagging to be activated, all of the tagging elements’ node names(shown in Layer Panel at left) should start with ‘##’ (double-hash)

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.

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.

• URL(mandatory) - Should contain the complete URL starting with http or https.
  • Example - https://google.com

This is how it’ll appear in code output

<a 
class="a-google-com-123" id=""
href="<https://google.com>"
>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"
}

<a 
className="a-google-com-123" id=""
href={allLinks["a-google-com-123"]}
>Link Text</a>