Quickstart
Getting started with the fastest way to turn your UI designs to code
Last updated
Getting started with the fastest way to turn your UI designs to code
Last updated
Tutorial video
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
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
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
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!
