Import a Figma design and generate a deployable Flutter mobile app with Rocket.new, including screens, navigation, and shared components.
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.
Click the + button at the lower left of the input box and select Add from Figma.
Click + then select Add from Figma
First time? Connect your Figma account to Rocket before importing.
2
Paste your Figma link
In the Import Figma design dialog, paste your Figma frame or file URL and click Start import.
Paste your Figma frame or file URL
3
Choose screens and framework
You can import up to 40 screens at a time.
Select the mobile screens you want to import:
Select mobile screens to convert to code
Using the free plan? Some features may be limited. Upgrade to keep generating without interruptions.
Click Start import, then select Flutter as your framework:
Set your framework to Flutter
4
Select state management
Rocket asks how your app should manage user actions and screen changes.
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
Rocket parses your Figma file, optimizes images and layout, and generates clean Flutter code.
Rocket is building your mobile app in real time
All status indicators turn green when your app is ready.
6
Review in Rocket and compare with Figma
Once generation is complete, use the Preview tab at the top of the editor to view your Rocket-generated mobile app.To view your original Figma design directly in Rocket, click the icon in the top-right navbar. This opens the Figma preview panel, showing your source design alongside the chat panel.
Click the Figma icon in the top-right to open your Figma design in Rocket
If your design looks slightly off, fine-tune it using chat. For example:
What you see: The card has a shadow that does not appear in the original design
What Figma shows: No shadow on the card
Fix it:"Remove the shadow from the product cards on the Home screen"
7
Add more screens
Need to bring in more screens after the initial import?Click the + button at the bottom of the chat, then select Add new screen.
Click + then select Add new screen
From the same file: Select from the list of available screens (already-imported ones are marked) and click Start import.
Choose to add from the same Figma file or a different one
Select the screens you want to add and click Start import.
Select screens from your Figma file
From a different file: Choose From different file, then paste a new Figma URL. This starts a new task. Your current task is not affected.
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 Figma preview. Click the icon in the top-right navbar to view your original Figma design directly in Rocket. Use the Preview tab to see the Rocket-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.
