Export Code
Easily export code for single or multiple screens, directly from Figma or DhiWise. Within a few clicks export code, add the code to your existing 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 screens code right away from the design. DhiWise provides an option to export the screen to get the code for only the selected one.
While exporting you can select between code types to get only widgets design code or complete code along with GetX state management, so you can also add code to your existing apps.
Step 1: Select screens
After activating DhiWise Figma plugin, select the screens in Figma design for which you want to export the code.
Step 2: Select technology as Flutter
Next, select Flutter
for mobile technology, and ensure the Selected Frames
option is selected under Export option
in the plugin panel.
On the right, as you have chosen Selected Frames options, all the selected screen names will be displayed for your ease.
Step 3: Select Code type
Now, for Code type
select Only Design Code
, to get only the widgets design code or select Complete Code
to the entire widgets code using GetX state management
support. Lastly, add your Figma file URL.
Step 4: Generate code
Click on Generate Code
button. This will start building your screen code and once it's built view the entire generated code by clicking on the View Code
button. Then you can download the same and add it to your existing app code or start fresh with a new app.
From App Screenlist
Export screens code from your created app in DhiWise.
Step 1: Go to screen list
Go to the screen list for your created application.
Step 2: Select screens
Go to the screen you wish to export and select the checkbox Export screen
.
Step 3: Select Export type
Once you select it, two options will appear:
- Export all screen code: You can export code for all your app screens.
- Export screen code: You can export code only for the selected screens.
Step 4: Select Code type
Next, you will get two options for code type:
- Only Stateless Widget: Export only selected screens design code.
- Widget + GetX State Management: Export only selected design + GetX state management.
To start creating a Flutter app from the initial without any state management, choose Only Stateless Widget.
And if you want the code with state management for your selected app screens, choose Widget + GetX State Management.
Step 5: Generate code
Once you select your choice, the selected screens code 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 screens code into an existing app or start creating a new one using it.
While Configuring Screen
If you are inside a particular screen and wish to export code for the same, export code for single screen from screen Configure
option.
Step 1: Select Export code option
Open the screen list dialog using the down arrow in the top-left corner, and click on the dots to open a menu, and select Export code
.
Step 2: Select Code type
Next, you will get two options for code type:
- Only Stateless Widget: Export only selected screen design code.
- Widget + GetX State Management: Export only selected design + GetX state management.
To start creating a Flutter app from the initial without any state management, choose Only Stateless Widget.
And if you want the code with state management for your selected app screen, choose Widget + GetX State Management.
Step 3: Generate code
Once you select your choice, the selected screen code 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 screen code into an existing app or start creating a new one using it.
Got a question? Ask here.