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.
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)
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
Finally, you can deploy it to Netlify!