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 (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
Page Mode and Component Mode
Dualite offers two separate modes. Component Mode to generate high-quality and reusable code components for developers, and Page Mode to convert your favourite landing pages to code 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 Page Mode
Selecting the design
Dualite's a unique that can convert both a static design as well as an interactive prototype. We'll take up a static landing page for this example.
Select the landing page design Frame
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
Post conversion you can download the code as ZIP, or 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.
Last updated
