Flutter
Design to code
Once your application’s Figma design is ready, convert the existing design to code by following the below steps.
Select mobile application
Choose the technology as Flutter
under Select mobile application
to convert your designs and build application code in Flutter.
Export
Choose All Frames
to generate code for all the screens of your design file OR Selected Frames
to generate code for only specific screens of your choice.
Code type
Select the type of code you want to generate for your application. Choose the Only Design Code
option to get only the design code and related design files, OR the Complete Code
option to get the entire application code and its dependent files.
Figma file URL
Paste the Figma file URL for which you want to generate the code and click the Generate code
button.
This will start to build your application. As the process is done, click View code
to view your code files.
You can further download
your application from here OR if you want to add actions to your application, go to app.dhiwise.com and select your application which is generated using the plugin, add your changes and then build your application.
Design Assets
If your application design is not yet ready, needs to be designed from scratch or using readymade screens, you can explore this option and prepare your design within a few minutes using the below assets.
Readymade Templates
Choose one from the readymade templates based on several categories, and you can build your mobile application in a few minutes.
Inside the selected Template’s description, you can see the number of screens for the template, features or actions, which will be auto setup in your application as you create your application using the plugin, and the screens as shown below.
Once you select the Template design of your choice, click Use Template
. Within a few seconds all the Template screens will be fetched on your Figma file canvas, as shown below.
Now, you can customise the design or generate the code for it using Design to code option directly using the plugin.
Screen Library
Ready-to-use screens to add to your existing apps based on a wide range of categories. Pick the screens you wish to add to your application and build the screen code. Once the code is generated you can add it to your existing application, or proceed with a new application using it.
As you select the screen, it will be fetched on the Figma file canvas, as shown below.
Now, you can customise the screens or generate the code for them using Design to code option directly using the plugin.
Got a question? Ask here.