Skip to main content
Your designs, running as real apps. Import Figma files or frames and Rocket generates production-ready code that matches your design - layout, colors, typography, spacing, and components. No manual frontend work.
Figma import is only available on the web browser at rocket.new. It is not available in the Rocket mobile app.

​
When to use Figma import

ScenarioBest starting method
You have completed Figma designsFrom Figma (you are here)
You have a rough idea but no designsFrom an idea
You have a screenshot, PDF, spreadsheet, or other file (not Figma)From an attachment
You have an existing live websiteRedesign

​
What you can build

Import your full Figma file and generate a responsive React or Next.js web app that matches your designs screen by screen.Try this prompt after import:
Make the sidebar collapsible and add smooth transitions between pages. Connect Supabase for user authentication.
Convert mobile screen designs into Flutter apps for iOS and Android with proper navigation and native feel.Try this prompt after import:
Add pull-to-refresh on the feed screen, swipe-to-delete on list items, and connect Firebase for push notifications.
Import your design system components and generate reusable, styled code components that maintain consistency across your app.Try this prompt after import:
Extract the button, card, and input components as reusable components. Add hover states and loading states to all buttons.

​
Quick start

1

Get your Figma link

Copy the URL of your Figma file, or select a specific frame to copy its URL. You need view or edit access to the file.

How to get your Figma link

Step-by-step guide for copying the right URL.
2

Open the import menu

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.
3

Paste your link and import

Paste your Figma link into the dialog and click Start Import. Select your frames, choose a tech stack, and Rocket builds your app.
  • You need either view or edit permission on the Figma file.
  • Prototype links are not valid. Use the file or frame URL instead.

​
Platform guides

Create a web app

Full walkthrough for converting Figma designs into React or Next.js web apps.

Create a mobile app

Full walkthrough for generating Flutter mobile apps from your Figma screens.

​
Prepare your designs

Follow these guidelines to get the best results from Figma import:

Design guidelines

Best practices for structuring frames, grouping layers, handling vectors, and avoiding common import issues.

​
Troubleshooting

Fix Figma rate limit errors

Understand Figma’s API rate limits by plan and when you can safely retry.

​
What’s next?

Iterate with chat

Refine your imported app using natural language prompts.

Connectors

Add payments, databases, AI, and more to your Figma-generated app.

Visual edit

Click any element to tweak colors, text, spacing, and layout.

Launch your app

Publish your Figma-generated app to the web.