Zoom Webinar: Learn and enhance your TypeScript skills | 28th March 2023 | 10 AM PST [10:30 PM IST] Register here
Education

DhiWise Figma to Flutter code hands-on: A Step by Step Guide to convert your Figma design to Flutter code

logo

DhiWise

February 28, 2023
image
Author
logo

DhiWise

{
February 28, 2023
}

Today for every organization building an exclusive app has become indispensable. To reach out to potential customers, businesses are making huge investments in mobile app development as the number of mobile app users is consistently growing worldwide.  

However, building a successful mobile application isn’t a cakewalk; there are multiple things you need to consider during app development, such as planning, designing, coding, testing, and maintenance. 

Among them, converting your design to code is the most frustrating and time-consuming task for developers unfamiliar with the design world. 


What is Figma?

Figma is a popular web-based vector graphics editor and prototyping tool. It comes with additional functionalities supported by desktop applications for macOS and Windows.

It allows mobile users to view Figma prototypes in real-time using Figma mirror companion apps for Android and iOS. It enables designers and developers to create UI and wireframing for web and mobile apps.


What is Flutter?

Flutter is an open-source Google UI toolkit to develop beautiful, natively compiled apps for Android, iOS, Linux, Mac, Windows, Google Fuchsia, and the web from a single codebase. 

Flutter is among the top software repositories. Based on the Github stars. There are over 100,000 apps scripted using Flutter since its first launch. One of the most notable apps is “Xianyu,” created by the Alibaba team, which 50 million people use.


Convert Figma to Flutter code in minutes with DhiWise Flutter app builder

Though translating UI/UX design to Flutter code is one of the frustrating and time-consuming parts of app development, DhiWise helps you to bridge the gap between designing and development with its Flutter app builder. 

It enables developers to convert their design in Figma to Flutter code in a few steps.  

Let’s learn how to translate the beautiful Figma design into an excellent Flutter app code with DhiWise Flutter Builder. 

Here is the step-by-step guide to converting Figma to Flutter code.


Step 1: Sign up on DhiWise

To convert your Figma design to Flutter code, first, you need to sign up on DhiWise. You can directly sign up with a Google, GitHub, or Discord account.

login-img
Create an account on DhiWise
Step 2: Create a new application in DhiWise  

Once sign-up is done, you will be directed to the Dashboard where you can search and view the created applications.

create-new-app
DhiWise Dashboard

To start creating a new application, click "New application", and select "Create a new app" from the drop-down.

new-app-img

Then it will open a Create a new app  pop up window. Here you need to enter the Application name, Technology, Design platform, Figma account and the Figma URL. 

In the snap below we have selected Technology as a Flutter and design platform as Figma.

create-new-app-img
Add desired credentials

Note: For now, DhiWise only supports Figma designs. For the designs in Adobe and XD, you need to put a request to migrate them, and DhiWise shall be handling the same within 24 to 48 hours.

Once you have filled desired credentials and added a Figma account with the URL click “Create a new app”.  Then the new pop-up window will appear where you can select the app screens/pages from the Figma design you have selected. 

figma-account-images
Select app screen/screens

Here, select the screens you want to import and click “Submit”.

And boom!

The platform will start fetching design data from Figma as shown below.  And from here you can move to the next step. 

sae-your-img
Fetch design data from Figma

Step 3:  Set up configuration or move to the screen list

The platform allows developers to wait and set up configuration or directly move to the screen list. However, the configuration setup can also be done from the Setting screen. 

figma-img

Wait and set up config will take you back to the Fech design data screen, here click Next to set configuration.

save your-img
Code configuration

As the configuration is completed you can move to the next step. 

If you are looking for state management support, DhiWise Flutter Builder provides inbuilt support for the most popular GetX, Provider, Riverpod, and BLoC libraries or you can just get the UI code with stateless widgets.

freedom-img

Moreover, the platform comes with GitHub and GitLab integration as well as extensions for your favorite IDEs i.e. VS Code, Android Studio, and IntelliJ simplifying code sharing, collaboration, and management all from one place.

you-app-img

Now let's move to the screen list from here. 

DhiWise Flutter Builder auto-identifies widgets, custom components, and auto-setup actions and validations.

Auto-identified widgets-img
Auto-identified widgets

Step 4: Set up the splash screen 

This allows you to set the splash screen- the initial screen of the application and the screen next to the splash screen. 

a. Set up splash screen

Setup-splash-screen-img
Setup splash screen

b. Set up the screen next to the splash screen

 splash-screen-img
Setup screen next to splash screen

Moreover, if there are any missing style assets the platform will ask you to upload the same to the platform. This will help you to keep the app UI more accurate and will eliminate the chances of UI overflow encounters in the feature. 

missing-image

Step 5: Select and customize the app  screens

Here you can see all the selected screens. To customize them just select the screen and click “Configure”. 

screen-images
UI screens

The Configure option platform allows you to customize the UI code, components, and styling. 

a. Cutomize Screen UI  

In the snap below you can see the UI design hierarchy. And DhiWise Flutter Builder provides a Smart Code Editor that allows you to edit UI  just like an IDE. You can view the auto-identified actions, add new actions, and setup the onReady Lifecycle method from here.

Cutomize-Screen-UI -image
Cutomize Screen UI 

Here is how you can setup onReady lifecycle method.

Setup-method-img
Setup onReady method 

b. Cutom Components

Here, you will find all the auto-identified custom components of the app. You can view all of them here along with their properties and variants.

components-img
Update UI components

c. Styling

The Styling option lets you update and create new color styles, update and upload new fonts, and add Assets and Strings.

Styling-img
Styling

In case, you encounter any Figma design changes in the middle of UI customization, and want to bring those changes in DhiWise, they can easily be synchronized without affecting the UI changes using "Sync design changes" option.

Sync-design-img
Sync design changes 

Step 6: Integrate API to the app 

Next, you can integrate APIs to set up connections with the server. The platform lets you add, view, edit and delete the APIs.  

API-integration
API integration

To add a new API you can either upload a Postman file from the existing Postman collection or create and add API manually with DhiWise API runner.

Create-API

Step 7: Add constants

The one more thing DhiWise simplifies is adding constants to your code. It allows you to create and manage multiple constant files in the app.

Add-constants
Add constants

Step 8: Preview design changes and share the preview with the team

Once you have done with the UI customization and styling, the changes can be previewed before generating the final code, also there is a facility to share the preview link with the others in your team.

Preview-design
Preview design changes

Step 9: Export code for the Screen/Screens or Build the entire app 

Once your UI customization is done such as adding actions, setting up APIs, and more, you are ready to generate your app code. 

With the platform, you can either generate code for single or multiple screens or build the entire app with the Build app option. 

Export-code
Export code

Additionally, the Build app option allows you to generate the code with the desired state management library or with state management.

Now let's build the app with the GetX state management library.

management-img
Choose the state management library

You shall get the structured Flutter Application code, with the following SDK version and the Libraries.

Build-app-image
Build app

Step 10: Directly download or synchronize your code with GitHub or GitLab

The platform generates clean code with reusable code components. As your code is generated you can download the entire source code from the platform or sync it with your GitHub or GitLab Repository.

code-images
Sync or download app code

Refer to our user help document to know more about code download and synchronization.

figma-to-flutter-img
Sync code in IDE or sync with GitHub and GitLab

Besides code generation, the platform supports project synchronization with VScode, Android Studio, and IntelliJ IDE. To sync your built project in IDE install the plugin in your IDE and then copy-paste the application token into the plugin.  

More from DhiWise to you

DhiWise is providing two more awesome features for its developers, to make their development life exciting while using DhiWise.

One is ready-to-use Flutter templates and the other is the Figma to Code plugin that lets you get the code from your Figma platform in minutes.

Looks amazing right?

Summing up

So, this is all about converting your design in Figma to Flutter code using DhiWise Flutter app builder. It will only take a few steps to transform the Figma design to Flutter code. 

There are more features such as Authentication, Firestore, Supabase integration, and more. Well, we shall talk about them in the upcoming blogs. 

Watch this demo video “Introduction to DhiWise Flutter Builder”  or visit our official website for more information about the Flutter app Builder.