Apr 7, 2024
|
6
min read

Current problems with Figma to Flutter
Figma to code is an age-old problem that Figma plugins(including us :P) have been trying to solve, but with not much success. Essentially as a plugin you're able to generate pixel-perfect code, but the code quality is static and not functional, which makes it difficult to get it into production. Figma to Flutter falls in the same bucket with such Figma plugins
How Alpha solves Figma to Flutter: step-by-step
Alpha is your personalised AI frontend dev that's capable of all kind of frontend tasks – both for mobile and web. When you import your Figma file - we contextualise it with other relevant metadata to make it more beautiful.
Connecting your Figma account
Click on the Figma icon at the starting screen, and click on Connect Figma


You'll be redirected to an oAuth screen. Make sure the oAuth account (singhvirohan01@gmail.com in my case) is the same where your Figma file is in.

Selecting the Figma design URL
On successful authentication, you'll be redirected to this screen.
Make sure you select the Figma design URL, preferably a Frame, Component or Instance:
Open the Figma design file
Select the Frame you want to convert
Right Click on the design
Select Copy/Paste as
Select Copy link to selection
Paste the copied URL in Alpha the field above and click on "Import"


You can reconfirm the same as Alpha will show you. Click on "Continue with this Design" once you're sure for the same. Once clicked, you'll be able to see the "Figma green tick" as a confirmation at the chat bot


Choosing Flutter and prompting
You can then simply choose Flutter from the "Framework" drop-down and type in the prompt "Build this Dashboard based off the Figma file"
Dashboard here is a reference, can describe anything else i.e website, landing page etc.
Conclusion
Dualite is more than capable of automating frontend tasks, such as Figma to Code or Figma to Flutter more specifically. Can see the tweet by one of our founder, on the same too here