Creating a User Interface is the first and foremost step that takes place while building a website. Multiple factors like responsiveness, easy navigation, color contrast, pleasing to the eyes, etc, are kept in mind while designing the user interface.
When it comes to designing a UI, Figma is the first and most popular tool that comes to mind. Figma comes with tons of customization that helps to build endless UI designs following the designer's creativity.
After the design is ready, a developer's role comes into play. The developers convert the whole Figma design frontend code. But the problem is it literally takes hours to even convert a simple basic design into code. It’s a very hectic task for a developer to generate code that gives the same result as of created design.
Thus reducing the developer's productivity and that's where Dualite comes to rescue us.
Dualite is an AI-powered designed-to-code tool that allows us to convert the whole Figma design into frontend code within a few seconds. With Dualite, all it takes is a few clicks and a few seconds to convert a complex UI into frontend code.
In this blog, we will walk through the procedure on how you can convert a Figma design into a React code using Dualite. You can simply use the Dualite plugin in Figma and generate the code in a few clicks.
Let's get started
1. Select the Figma Design
Open Figma, and design the UI for your webpage. Once the design is fully created, select the design.
You can select the entire design or any particular section/frame in the design depending upon your choice. The frame you will select will be the one that the Dualite will convert to code.
2. Run the Dualite plugin
In order to use Dualite, we need to run its plugin.
Go to Resources (Shift + I) present on the tools bar, and navigate to the Plugins section.
Search for the Dualite plugin and run it.
3. Login to Dualite
After running the plugin, you need to login to the Dualite plugin using your desired credentials. You can use your Figma account credentials to login to the Dualite plugin.
After successfully logging in, you will see this screen
4. Select the desired mode
Dualite offers us two different modes to convert Figma design into code-
Page Mode: Built for designers to convert the designs into code super fast. It converts the whole design into a single page code. If you don’t want the hassle to tweak the code and understand it, then Page Mode will be an ideal choice for you.
Component Mode: Built for developers to generate interactive and static Reusable components. It scans each element present in the design and creates reusable components for each individual element making it an ideal choice for developers.
For this tutorial, we will select the Component Mode.
Currently, Dualite supports only the React JS library in converting designs into reusable components code. Stay tuned for more JS Frameworks/Library support.
Now, click on the Convert To Code button to start conversion and Dualite will show its magic.
5. Get the Output
Within a few seconds, Dualite will scan the component and generate the code. After the Dualite has successfully generated the code, you will see this screen:
You can download the Zip file of your code and run it locally. Also, you can try and run the code on CodeSandbox by clicking on the Preview Code button.
You can tweak or manipulate the generated code to get the desired results.
Every conversion that you make using Dualite will get saved to your Dualite Dashboard allowing you to access the code anytime in the future.
Checkout the video tutorial
In this tutorial, we took an example of a static webpage for the demo purpose. But websites like eCommerce, Blogging, Portfolio, etc comes with multiple animations and interactions. Dualite also comes with the capability to convert these animations and interactions into code.
Checkout the docs to learn more about it, click here.
Got stuck anywhere? Join our Slack Community
Top comments (0)