Easily export code for single or multiple pages, directly from Figma or DhiWise. Within a few clicks export code, add the code to your existing React apps or start creating a new one.
Using DhiWise Figma Plugin
While using DhiWise Figma-to-code plugin in Figma for your app’s design, you can directly get your desired page code right away from the design. DhiWise provides an option to export the page to get the code for only the selected one.
After activating the DhiWise Figma plugin, select the pages in Figma design for which you want to export the code.
React from web technology, and ensure the
Selected Frames option is selected under
Export option in the plugin panel. Lastly, add your Figma file URL.
On the right, as you have chosen Selected Frames options, all the selected page names will be displayed for your ease.
Generate Code button. This will start building your page code and once it's built view the entire generated code by clicking on the
View Code button.
From App Pages List
Export pages code from your created React app in DhiWise.
Go to the pages list for your created application.
Go to the page you wish to export and select the checkbox
Export screen, from the right.
After all your page selections, the
Export page code button displays up at the bottom. By clicking on it, the code of the selected page will start to generate;
Once the code is generated, it will redirect you to the generated code screen.
You can easily
download the source code or simply
Copy to clipboard from here easily and can add the selected page's code into an existing app or start creating a new one using it.
Got a question? Ask here.