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