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.

‍

‍

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.

‍

‍

• URL(mandatory) - It should contain the complete URL starting with http or https.some text
  • 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 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.

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.

Click here to watch the step by step process.