Education

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

logo

DhiWise

September 7, 2021
image
Author
logo

DhiWise

{
September 7, 2021
}

Today for every organization building an exclusive app became 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 who are not familiar with the designing 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 used 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 code with DhiWise Flutter app builder. Here is the step-by-step guide to converting Figma to Flutter code.


Step 1: Sign up for DhiWise

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

Image

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 previously created apps if any.

Image

To start building a new application, just click New application, it will redirect you to Create new application page.


Step 3: Select a technology to create a Flutter application

On the Create new application page, select the required technology to start building a new app. Here we will select Flutter technology for mobile application development.

Image

Step 4: Select your design platform.

Next, import your app design from Figma, XD, or Sketch to DhiWise.

If you don’t have any design, DhiWise provides ready-to-use app templates and screen libraries.

To import an app design, select the platform on which the design of your app is made and enter the application name.  

Here we will select Figma to import the design

Image

(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.)

Step 5: Integrate DhiWise with Figma account

By integrating DhiWise with Figma you can access Figma files on the DhiWise. It covers everything from the single screen to the entire UI to the entire prototype.

Image
Integrate DhiWise with figma

Once the Figma account is connected with the DhiWise, copy-paste the Figma URL and click Import.

Image

Step 6: Select the screens/pages you’d like to sync to your application

Now you can select multiple screens from your Figma file and use them in your application as shown below.

Image

If you have already set up the prototype for your screens, half of your work is almost done. As DhiWise fetches screen resources automatically, you don’t need to deal with the screen navigation and other configuration again.

Image

Step 7: Set up or modify your app screens using Smart Editor

Now you can change the screen name, view the screen summary, and also configure actions, lifecycle methods, and properties for the screen component.

DhiWise lets you change the nature of the screen components (using change view), in the case they have been wrongly picked up while importing. 

Smart Editor helps you modify your app screen designs by providing component properties right there so it becomes easy to modify them and even preview them live before you build your application code.

Moreover, you can export the code independent screen from the Export screen code.

Image
Step 8: Integrate API

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

Image

To add a new API you can either upload a Postman file from the existing postman collection or add a new API using DhiWise API runner.

Image

Here is the Detailed Blog about API Integration in DhiWise.

Step 9: Generate Source code

Once your APIs, Navigation, and Other things are done click the Build app, and it will start building your project.

Image

You shall get the structured Flutter Application code, which follows MVC architecture and provides easy customization and reusable code components.

Image

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

Once your code is generated you can download the entire source code from the platform or sync it with your GitHub or GitLab Repository.

Refer to our help document to know more about deploying and managing the Flutter app code.

DhiWise is Flexible enough to give you the authority over your Entire application source code. It uses the widely used GetX library for state management in the application.

Image

Besides that, the platform supports project synchronization with VScode, 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.

Image

Get a look into the sample Flutter code generated with DhiWise Flutter app builder.

More from DhiWise to you

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

It allows you to see the preview of your application on different devices after importing your Figma design into DhiWise. Think of this as a built-in Emulator.

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 Figma design to Flutter code. 

There are more features such as managing constants, Lifecycle events, Authentication, Firestore, Supabase integration, and so on. 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.