Figma to Flutter mobile app in minutes. Import your mobile screen designs and Rocket generates a complete Flutter app for iOS and Android with native navigation, styled components, and clean Dart code. Then iterate with chat to add state management, connect APIs, and submit to app stores.
Figma import is only available on the web browser at rocket.new. It is not available in the Rocket mobile app.
What you can build
Consumer mobile apps
Consumer mobile apps
Turn your social, fitness, food, or lifestyle app designs into working Flutter apps with real navigation and data.Try this prompt after import:
Business and productivity apps
Business and productivity apps
Convert CRM, task management, or internal tool designs into functional mobile apps.Try this prompt after import:
E-commerce mobile apps
E-commerce mobile apps
Build mobile shopping experiences from your Figma product catalog and checkout designs.Try this prompt after import:
Before you begin
You will 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.
Launch your mobile app
Import Figma
You can import in two ways:
- Paste the Figma URL in the chat and Rocket will detect it
- Click Import at the bottom-left of the chat input
If you have not connected your Figma account to Rocket yet, start here:
Learn how to connect your Figma account with Rocket.
Paste your Figma link
Paste your copied link into the popup and click Start import.
Choose screens and framework
You can import up to 40 screens at a time.
- Select screens: Select the mobile screens you want to import
Using the free plan? Some features may be limited. Upgrade to keep generating without interruptions.
- Click Start import in the chat
- Select framework: Choose Flutter for mobile apps
Select state management
Rocket asks how your app should keep track of user actions and screen changes. This is called state management.
- 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)
Rocket generates your mobile app
Behind the scenes, Rocket is:
- Parsing your Figma file
- Optimizing images and layout
- Generating clean Flutter code
Preview and compare with Figma
See your app and the original Figma design side by side.
- 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.
- What you see: There is red shadow behind the doctor cards
- What Figma shows: There is no shadow
- Fix it with a chat message like: “Remove the shadow from behind the doctor cards on the Doctor search screen”
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 will see a list of available screens, with already imported ones marked. Select the new screens you want and click Start import.2: From a different Figma file
Want to pull from another design? Choose From different file in the popup. You will be prompted to paste a new Figma URL.Importing Figma from a different file creates a new project, so your current one stays just how you left it.
After your import
Once Rocket generates your Flutter app, iterate with chat to add functionality:| Goal | Prompt |
|---|---|
| Add navigation | Add a bottom tab bar with Home, Search, Favorites, and Profile tabs. |
| Connect a database | Connect Supabase and load the product list from a "products" table. |
| Add authentication | Add login and signup screens with email/password auth and a splash screen. |
| Fix visual differences | The card shadow is too dark. Match the shadow from my Figma design exactly. |
| Add animations | Add a slide-in animation when navigating between screens. |
| Push notifications | Connect Firebase and add push notification support for order updates. |
Tips
- Start with key screens. Import your most important 5-10 screens first, then add more incrementally.
- Choose the right state management. For simple apps, Provider or no state management works fine. For complex apps with lots of data flow, use BLoC or Riverpod.
- Use the side-by-side preview. Click the Figma icon to compare your original design with the generated app.
- Fix visual mismatches in chat. If a shadow, spacing, or color does not match, describe the difference and Rocket corrects it.
- Follow the design guidelines. Mobile frames should be between 200px and 800px wide. See the guidelines.
- Prototype links do not work. Use file or frame URLs, not prototype links.
What’s next?
Iterate with chat
Refine your imported app with natural language prompts.
Connect integrations
Add payments, databases, AI, email, and analytics.
Preview on device
Test your Flutter app on real devices or emulators.
Submit to app stores
Publish your Flutter app to the App Store and Google Play.