Welcome to FlutterVision GitBook :)
  • Introducing FlutterVision
  • Pre-setting
  • How to use with Figma
    • How it works
    • Good practices on Figma to get a better result
    • What we support
  • How to use with Screenshots
    • Using screenshots and assets
  • Exporting the project
    • Generating the exportable file
    • Generating the UI code - Flutter
  • 🥳Product Changelog
Powered by GitBook
On this page
  1. How to use with Figma

How it works

PreviousPre-settingNextGood practices on Figma to get a better result

Last updated 3 years ago

Convert Figma into a Flutter project

To use FlutterVision with Figma, you need to follow these steps:

  1. Organize your Figma project (check our tips on the next page);

  2. Create a new project on and choose Figma as input;

  3. Fill the credentials with: (1) - it's unique for each Figma account - and (2) Project Key - you can get it on the project URL;

  4. After the AI work, please check each page and component. If necessary, you can make some adjustments;

  5. You can export and run your Flutter project.

Check this quickly tutorial to understand more about it:

Need a sample to test?

If you don't have a Figma project to test with FlutterVision, we indicates to use this one:

Credits:

https://www.figma.com/file/7z7ZOf9xXO5rOEupIdM2ql/Travel-Mobile-App-Design-(Community)?node-id=0%3A1
https://www.figma.com/@uxdworld
FlutterVision
Figma Token