In this guide, you’ll learn how to:
  • Import Figma frames or files into Rocket.
  • Convert static mobile designs into real, working mobile applications.
  • Choose screens and generate clean Flutter code.

​
Before you begin

You’ll need:
  • Access to rocket.new.
  • A Figma account and a design file with view or edit permission.

Not sure how to get your Figma link?
Follow this quick guide to grab the right URL.

​
Let’s launch your mobile application

You’re about to transform design into production-ready code – no coding needed.
1

Import Figma

  • Simply paste the Figma URL in the chat and Rocket will detect it.
    or
  • Click Import Figma at the bottom-left of the chat input.
    Import Figma button in chat UIImport Figma button in chat UI

    Tap 'Import Figma' to get started

If you haven’t connected your Figma account to Rocket yet, start here:
Learn how to connect your Figma account with Rocket.
Success check: A popup asks for your Figma link.
2

Paste your Figma link in Rocket

Paste your copied link into the popup and click Start import.
Paste Figma link modal in RocketPaste Figma link modal in Rocket

Paste your Figma frame or file link here

Success check: Rocket shows your design preview and screen options.
3

Choose screens & framework

Heads up: You can import up to 40 screens per project.
Time to tailor your app import:
  • Select screens: Select the mobile screens you want to import.
Screen selection interfaceScreen selection interface

Choose exactly what you want to bring in

Using the free plan? Some features may be limited. Upgrade to keep generating without interruptions.
  • Click Start import on the left.
Click start importClick start import

Click start import

  • Select framework: Choose Flutter for mobile apps.
Framework selection modalFramework selection modal

Set your framework to Flutter

Success check: Import begins and Rocket starts processing your designs.
4

Select state management

If you chose Flutter, Rocket now asks how your app should keep track of user actions and screen changes - this is called state management.
Flutter state management optionsFlutter state management options

State management options for Flutter

Pick the option that fits your app:
  • BLoC – Great for apps with complex logic and data flows.
  • GetX – Lightweight and fast, ideal for quick builds.
  • Provider – Simple and reliable for most apps.
  • Riverpod – A flexible upgrade to Provider, great for scaling.
  • Without state management – Use only widgets (best for basic apps or prototypes).
5

Rocket generates your mobile app

Behind the scenes, Rocket is:
  • Parsing your Figma file.
  • Optimizing images and layout.
  • Generating clean Flutter code.
App generation progress screenApp generation progress screen

Rocket is building your app’s Flutter code

Success check: All status indicators turn green – your app is ready.
6

Preview and compare with Figma

See your app and the original Figma design side by side - no switching tabs, no guesswork.
  • Click Figma in the top navbar to open the side-by-side preview.
  • Use the screen dropdown (where Details is selected) to switch between different Figma screens.
Side-by-side Rocket preview and Figma designSide-by-side Rocket preview and Figma design

Preview your app next to your Figma design

What if your design looks slightly off?Sometimes the generated app might not perfectly match your original Figma design – but don’t worry. You can fine-tune the UI using chat.Example: Product app name color is different from design
  • What you see? The Buy Once button has black text and is more rounded.
  • What Figma shows? The text should be green, and the button should match the Subscribe button’s shape.
  • Fix it with a chat message like:
    “Make the ‘Buy Once’ button text green and match its border radius to the Subscribe button.”
Want to explore more? Write in the chat interface to tweak your design or see what else chat can do.
7

Add a new screen

Need to bring in more screens? Rocket makes it effortless.
  • Click the Add new screen button at the bottom of the chat interface.

​
1: From the same Figma file

You’ll see a list of available screens, with already imported ones marked. Just sleect the new screens you want and click Start import.
Add new screen from same Figma fileAdd new screen from same Figma file

Click 'Add new screen' to expand your mobile app

​
2: From a different Figma file

Want to pull from another design? Choose From different file in the popup. You’ll be prompted to paste a new Figma URL.
Import screen from different Figma fileImport screen from different Figma file

Paste a new Figma link to start a new project

Importing Figma from a different file creates a new project, so your current one stays just how you left it.

You did it!

You’ve just turned a Figma design into a fully functional Flutter mobile application, powered by Rocket.
Need help? We’re here for you.
Email us at support@rocket.new or join our Discord community to get help, share ideas, and connect with other creators.