Tagging

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.

Here's the reference Figma file that you can use to follow with this guide: https://www.figma.com/design/LuLKGffrekYPnUgjTzRlrg/Dualite-Tagging-Examples?node-id=0-1&t=eYtBecALiGK88EFX-1

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) - It 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>

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’

• type can include one of the following parameters

  • 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.

• Radio

Embed(##embed[type])

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

Button(##button)

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
<button
  className="button"
  id=""
  onClick={(e) => allFunctions["button"](e)}
></button>

// 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.