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, including 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’re 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 websiteFrom a URL

​
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. You need view or edit access to the file.

How to get your Figma link

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

Paste and import

Go to rocket.new, paste your Figma link, and Rocket detects and imports your screens.
3

Choose platform and build

Select web or mobile, pick your framework, and watch Rocket generate your app.
Important:
  • You need either view or edit permission on the Figma file.
  • Prototype links are treated as invalid - 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.

Connect integrations

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

Visual edit

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

Deploy your app

Publish your Figma-generated app to the web.