Dualite Documentation
  • Overview
  • Getting Started
    • Quickstart
  • Basics
    • Basics of Dualite Figma plugin
    • Advanced Settings
    • Tagging
  • DASHBOARD
    • Overview
  • Designer's Guide to Dualite
    • Overview
    • Native Figma Features supported by Dualite
    • Figma best practices
      • 3. Responsivity and Auto Layout
      • Additional tips
  • DEV'S GUIDE TO DUALITE
    • Overview
    • How Dualite translates Figma design settings into Code
    • Deploying on Vercel
    • In-depth guide to Component Mode
  • Popular Use-cases
  • Billing and Payment
    • Subscription Invoices
    • Cancelling your Pro plan
  • FAQs
    • What can I do with Dualite?
    • Feature Requests
    • Flex is not working
    • Errors and Bugs
    • Why my fonts aren't showing?
    • Dev Mode compatibility
    • Safari browser incompatibility
Powered by GitBook
On this page
  • link(##link[URL])
  • Input field(##input[type])
  • Special Case of Input Field - Checkbox and Radio Button
  • Embed(##embed[type])
  • Button(##button)
  1. Basics

Tagging

PreviousAdvanced SettingsNextOverview

Last updated 8 months ago

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:

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

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.

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.

Example -

https://google.com
https://www.figma.com/design/LuLKGffrekYPnUgjTzRlrg/Dualite-Tagging-Examples?node-id=0-1&t=eYtBecALiGK88EFX-1
Frame 13 containing three tagged elements, including embed, link and a button