Quickstart

Getting started with the fastest way to turn your UI designs to code

Tutorial video

Opening Dualite inside Figma

  • Inside your Figma file, go to "Actions" menu (Mac - Cmd + K/Windows - Ctrl+K)

  • Under the “Plugins & widgets” tab, search for Dualite in the search bar. Once it appears, select it and then click "Run" to open the plugin.

You can also directly right-click on the Figma canvas, click on Plugins, click on Manage Plugins and open Dualite from there

Logging In

  • Dualite plugin window should open. Click on Login with Figma inside that window.

  • You'll be redirected to an oAuth2 screen, where you need to select "Allow access"

Make sure that the email below the "Allow access" button ([email protected] in the above case) is the same Figma account that you have on the Figma canvas

  • You'll be redirected to Dualite's dashboard, and will end up on a screen with a Figma logo that directs you to go back to the Figma canvas

Sharing Figma file link

  • Once authenticated, you need to click on the Share button at the top-right of the Figma canvas. After clicking, a pop-up will open on which you need to select "Copy link". After copying the link, you need to close the pop-up and paste it in the typing field in the Dualite window

Selecting a Figma design

You can select two types of designs in Dualite, a whole page or a reusable component.

You should select a component(like a testimonial card design) to generate high-quality and reusable code components for developers, while direct Figma page to code can convert your favourite pages to pixel-perfect and responsive code(if the design is properly auto-layouted) in a click for designers and marketers preferably.

The next section overs an in-depth explanation on both the modes.

Let's move forward with converting a page by selecting the main frame(i.e Ecommerce-Autolayout-Wrap)

An important thing to note is that selected design should always be the main parent frame. Groups, Components, masks selection are not supported

Dualite AI Semantics is a Pro only feature that generates human-readable classNames, props and CSS properties for a higher quality code

  • After selection, you can choose the required framework(HTML, React, CSS and Tailwind) and click on Convert to Code

In Safari-based browsers, plugin may freeze. We'll recommend you to use Dualite in other browsers such as Google Chrome or Firefox

You can explore Advanced Settings to customise your code furthermore

  • Post conversion you can instantly preview the generated code, download the code as ZIP, Preview it in CodeSandbox, or convert another design. Let's download the ZIP and deploy it on Netlify

The Desktop, Tablet and Phone buttons at the top-right gives you responsive layouts for each device respectively if the design is properly autolayouted

We provide a readme.md after downloading the ZIP of generated code.

  • Finally, you can deploy it to Netlify!

Basics of Dualite Figma Plugin ->

PreviousOverviewNextBasics of Dualite Figma plugin

Last updated