How to use Figma to Flutter Converter from FlutLab.io

3 min readNov 10, 2020

Sometimes we can see some disputes between designers and developers. That happens not because someone is stupid and another is smart. Often developers just can’t understand the full depth of content that designers want to show.
But for Flutter followers, this isn’t longer a problem. In this article, I’ll walk you through how your design (created in the Figma editor) will turn into Flutter code. Figma to Flutter generator will do all the work for you.

So, let’s go ahead!

Here’s step-by-step instruction for you:

Go to FlutLab.io and Sign in or Sign up
Go to Profile. This is a place where all your projects are
Press a button signed with the Figma logo

4. You have to fill in a short form with some information from Figma.

Ok. Now it’s time to get some Figma info:
5. Go to Figma and open your project

6. Press “Share” Button

7. Press “Copy link”

8. Go back to FlutLab.io and insert a link to “Figma project link” field

9. Go to Figma and open your Account Settings

10. Find a section called “Personal Access Token” and create a new token

11. Go back to FlutLab and insert your token to “ Personal Access Token” filed

12. Fill in other fields

13. If the design you’ve created is responsive (you used Figma Constraints) then put a tick. Also, Figma to Flutter Converter from FlutLab has several experimental features. Shadows and Blurs work great for Android Builds but aren’t always displayed correctly for Web Builds.

So, make a decision and press “Generate” ;)

14. Great! Your project was successfully created in FlutLab