Flutter Code from Figma Design File

📅 2022.11.01 - 👤 Borbély Viktor

From time to time, attempts appear to try to replace the shortage of programmers. The DhiWise Figma Plugin has also joined the illustrious arsenal of Low-Code/No-Code (LCNC) tools. Generating surprisingly good code for an MVP application.

There were promises before: Converting Figma design to code

Previously, I wrote about the UICode plugin, which started as a good initiative, but developers ran into problems. In the past year, they have not continued its development. When I wrote my article, I spoke with the team, and they had high hopes. Perhaps too ambitious.

Reviving the appearance of the sample Figma design from my earlier article, this is it:

  • 2 screens
  • a few buttons to navigate back and forth

Flutter code from Figma design I created a simple Figma design

Introducing the DhiWise Figma plugin

The GitHub repo is available here: https://github.com/vborbely/figma-to-flutter

Open our Figma editor and add the DhiWise Plugin.

After that, we have nothing else to do but run the plugin by clicking the Run button.

Running the DhiWise - Figma to Code plugin Running the DhiWise – Figma to Code plugin

Choose the Design to Code option.

Selecting the appropriate option

Then we need to set the appropriate parameters:

  • We want Flutter code
  • from all screens (All Frames)
  • we request the complete code (Complete Code)
  • provide the Figma design file URL
  • continue with the Generate code button

Setting parameters before generation Setting parameters

It’s possible that our Figma account is not connected. Let’s do it by clicking the Connect To DhiWise button. After that, if it turns green, we can proceed again with Generate Code.

Connecting Figma account Connecting Figma account

The generation takes a few minutes, but finishes surprisingly quickly.

End of successful generation Successful code generation

Do we really get good Flutter code?

During generation, it becomes apparent that it does quite a lot automatically for us:

  • colors
  • images
  • exporting dimensions

The end result is a clear directory structure reminiscent of Clean Architecture.

Nice directory structure The generated directories

I’ll reveal that it’s solved with a popular state management, GetX. The developer page is here.

Navigate back to our main screen, and there select our fresh project. Here we can already see that we are dealing with a professional solution. At this place, we have the opportunity to fine-tune the code. Name the screens.

Fine-tuning Project code fine-tuning

By clicking the Configure button, component, style, font, and color settings are accessible. Very detailed!

Settings

If we’re done with all this, let’s close the settings and generate the code. We can do this by clicking the **Code view ** button in the middle at the top of the screen.

In the lower right corner with the download button, we get our code in a ZIP. After loading this into our favorite IDE, we can already run our native app.

Downloading codeDownloading code

Browsing through the code gives a pleasant impression. The UI, Business Logic, and Bindings are sufficiently separated. I won’t write about this in more detail because it may be exciting for a developer 🙂

Everyone should decide for themselves what the received code is sufficient for. For my part, I say that getting such quality from a free solution is truly “profitable”.

Tip: A little addition is that we can convert Adobe XD files to Figma, and from there to code.

With this solution, we’re actually talking about the programmer being able to continue the work where the designer left off in Figma.

If you liked Flutter mobile development but don’t know how to start, or just need support, contact me through one of my contacts.