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

​
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:
Convert mobile screen designs into Flutter apps for iOS and Android with proper navigation and native feel.Try this prompt after import:
Import your design system components and generate reusable, styled code components that maintain consistency across your app.Try this prompt after import:

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