Skip to main content
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

Turn your social, fitness, food, or lifestyle app designs into working Flutter apps with real navigation and data.Try this prompt after import:
Add pull-to-refresh on the feed screen, a bottom navigation bar, and connect Supabase for user profiles and authentication.
Convert CRM, task management, or internal tool designs into functional mobile apps.Try this prompt after import:
Make the task list sortable by date and priority. Add swipe-to-delete and connect Firebase for real-time sync across devices.
Build mobile shopping experiences from your Figma product catalog and checkout designs.Try this prompt after import:
Add a working shopping cart with quantity controls. Connect Stripe for mobile checkout and add order confirmation with push notifications.

​
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

1

Import Figma

Click the + button at the lower left of the input box and select Add from Figma.
The + button menu open with Add from Figma highlighted.The + button menu open with Add from Figma highlighted.

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.
Import Figma design dialog with a URL input field and Start import button.Import Figma design dialog with a URL input field and Start import button.
3

Choose screens and framework

You can import up to 40 screens at a time.
Select the mobile screens you want to import:
Screen selection panel showing Mobile frames tab with thumbnails and a Start import button.Screen selection panel showing Mobile frames tab with thumbnails and a Start import button.
Using the free plan? Some features may be limited. Upgrade to keep generating without interruptions.
Click Start import, then select Flutter as your framework:
Tech stack selection showing Flutter as the only option with a Submit button.Tech stack selection showing Flutter as the only option with a Submit button.
4

Select state management

Rocket asks how your app should manage user actions and screen changes.
Flutter state management optionsFlutter state management options
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.
Generation progress panel showing Fetching Figma and Writing Code steps with live status updates.Generation progress panel showing Fetching Figma and Writing Code steps with live status updates.
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.
Rocket editor with the Figma icon highlighted in the top-right navbar and the Figma design displayed in the preview panel.Rocket editor with the Figma icon highlighted in the top-right navbar and the Figma design displayed in the preview panel.
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.
Chat input + menu open with Add new screen highlighted.Chat input + menu open with Add new screen highlighted.
  • From the same file: Select from the list of available screens (already-imported ones are marked) and click Start import.
Submenu showing From same file and From different file options.Submenu showing From same file and From different file options.
Select the screens you want to add and click Start import.
Frame picker modal showing Mobile frames with thumbnails and a Start import button.Frame picker modal showing Mobile frames with thumbnails and a Start import button.
  • 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.

​
After your import

Once Rocket generates your Flutter app, iterate with chat to add functionality:
GoalPrompt
Add navigationAdd a bottom tab bar with Home, Search, Favorites, and Profile tabs.
Connect a databaseConnect Supabase and load the product list from a "products" table.
Add authenticationAdd login and signup screens with email/password auth and a splash screen.
Fix visual differencesThe card shadow is too dark. Match the shadow from my Figma design exactly.
Add animationsAdd a slide-in animation when navigating between screens.
Push notificationsConnect 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 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.

​
What’s next?

Iterate with chat

Refine your imported app with natural language prompts.

Connectors

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.