Skip to main content

Export code from Figma plugin

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.

Step 1:​

After activating DhiWise Figma plugin, select the pages in Figma design for which you want to export the code.

Step 2:​

Next, select 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.

Example banner

info

On the right, as you have chosen Selected Frames options, all the selected page names will be displayed for your ease.

Step 3:​

Click on 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.

Example banner

Example banner

From App Pages List​

Export pages code from your created React app in DhiWise.

Step 1:​

Go to the pages list for your created application.

Step 2:​

Go to the page you wish to export and select the checkbox Export screen, from the right.

Example banner

Step 3:​

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;

Example banner

Example banner

Once the code is generated, it will redirect you to the generated code screen.

Example banner

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.