Tutorials

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

logo

DhiWise

{
October 9, 2021
}
image

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.

In this article, we are going to learn about converting your Figma design to Flutter code using DhiWise. But before digging deeper into the “Figma to Flutter”, let’s first understand Figma and Flutter in brief.

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’s UI toolkit used to develop beautiful, natively compiled apps for Android, iOS, Linux, Mac, Windows, Google Fuchsia, and the web from a single codebase.

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

Converting Figma design to Flutter code

Though translating UX design to Flutter code is one of the hardest parts of app development but DhiWise helps you to bridge the gap between designing and development to build the best possible application in less time.

Let’s learn how to translate the beautiful design into awesome Flutter code using DhiWise. Here is the Step by step guide to convert your Figma design to Flutter code.

» Step 1: Sign up to the DhiWise

To convert your Figma design to flutter code, first, you need to sign up with the DhiWise. You can directly sign up with the Google, Github, or Linkedin account. Also, you can create an account using your email id and password.

Dhiwise


» Step 2: Create a new Project in DhiWise and add a new Application

Once you sign up, you will be directed to the Welcome page where you can start building your first project, just click Add new project to start.  

Dhiwise


On the next page add your project name and click Create project.

Dhiwise


» Step 3: Select a technology to create a new application

Next, you have to select a technology to start creating your application. Here we will select Flutter technology.

Dhiwise


» Step 4: Fetch your design in DhiWise

Once you choose Flutter as your app technology it will redirect you to the next screen where you can convert your design into Flutter code. Here you can fetch Figma, Adobe XD, or Sketch design, but in this article, we will only be concerned about Figma design.

If you do not have your design ready, DhiWise provides Ready to use app templates and screen libraries.


Dhiwise


Here just add the Application name, Figma ID, and Figma token and click Create application. It will fetch all your Figma designs to the interface as shown below.

(Note: Don’t know how to get Figma ID  and Figma Token?  Click here for the details. )



Dhiwise


And if you have already set up the prototype for your screens, half of your work is already done as DhiWise will fetch it automatically so you don’t need to set up navigation again.

» Step 5: Set up your screens

Now you can change the view, create action, add validation, and set up lifecycle methods for the screen component.


Dhiwise


» Step 6: Integrate API

Next, you can integrate APIs to set up connections with the server by either uploading Postman files from the existing postman collection or you can create your own APIs manually with the help of DhiWise API panel.


Dhiwise


Here is how DhiWise API panel looks like. Here, you can manage your REST API call code.


Dhiwise


» Step 7: Generate Source code

To generate source code for your Figma design click Build app, it will start building your project.


Dhiwise


Dhiwise


» Step 8: Directly Download or Synchronise your code with GitHub or GitLab

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

Click here to know more about review and manage Flutter app code.

Summing up

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

There are more features such as managing product flavors, constants, database, and Firsestore integration. However, it is still under development.

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