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
  • Opening Dualite inside Figma
  • Logging In
  • Sharing Figma file link
  • Selecting a Figma design
  1. Getting Started

Quickstart

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

PreviousOverviewNextBasics of Dualite Figma plugin

Last updated 5 months ago

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 (singhvirohan01@gmail.com 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.

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

  • 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

  • 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

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

  • Finally, you can deploy it to Netlify!


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 ) in a click for designers and marketers preferably.

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

You can explore to customise your code furthermore

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

auto-layouted
Advanced Settings
autolayouted
Basics of Dualite Figma Plugin ->
Dualite AI Semantics