Skip to main content
Figma to production-ready web app in minutes. Import your Figma designs and Rocket generates a complete React or Next.js web app with responsive layouts, styled components, and clean code that matches your design pixel by pixel. Then iterate with chat to add functionality, connect integrations, and ship.
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 marketing design into a live, responsive site with SEO-ready code.Try this prompt after import:
Add a contact form that sends submissions to my email via Resend. Make the hero section animate on scroll.
Transform dashboard, SaaS, or product designs into interactive web apps with real logic.Try this prompt after import:
Connect Supabase for user authentication. Add login/signup flows and protect the dashboard behind auth. Make the sidebar navigation functional.
Convert product catalog designs into working stores with cart and checkout.Try this prompt after import:
Connect Stripe for checkout. Make the product grid filterable by category and add a working shopping cart with quantity controls.

​
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 web app

1

Import Figma

You can import in two ways:
  • Paste the Figma URL in the chat and Rocket will detect it
  • Click Import at the bottom-left of the chat input
Import Figma button in chat UI

If you have not connected your Figma account to Rocket yet, start here: Learn how to connect your Figma account with Rocket.
2

Paste your Figma link

Paste your copied link into the popup and click Start import.
Paste Figma link modal in RocketPaste Figma link modal in Rocket
Rocket shows your design preview and screen options.
3

Choose screens and framework

You can import up to 40 screens at a time.
Pick how your web app will be structured:
  • Select screens: Select Figma frames to turn into a real web app
Screen selection interfaceScreen selection interface
Using the free plan? Some features may be limited. Upgrade to keep generating without interruptions.
  • Click Start import in the chat
  • Select framework: Choose between React or Next.js
Framework selection modalFramework selection modal
  • Default language: For React, JavaScript is the default and only option. If you selected Next.js, TypeScript is the default and only option.
  • Choose design system: Customize your code with Tailwind CSS
Language and design system settingsLanguage and design system settings
You will see a loading screen with progress indicators.
4

Rocket generates your web app

Rocket parses your design, optimizes assets, and generates structured, readable code.
App generation in progressApp generation in progress
All status checks turn green when your web app is ready.
5

Preview and compare with Figma

See your app and the original Figma design side by side.
  • Click on the right corner in the navbar to open the Figma design preview.
  • Use the screen dropdown (where Product is selected) to switch between different Figma screens.
Side-by-side Rocket preview and Figma designSide-by-side Rocket preview and Figma design
Want to make changes? Just describe what you want in the chat. No need to go back to Figma.Try things like:
  • “Change the input field color from white to yellowish as the background”
  • “Add dark mode to the website”
  • “Increase the size of the image on the hero section”
  • “Switch font to Roboto and make the header smaller”
Want to explore more? Just type in the chat interface to tweak your design or see what else chat can do.
6

Add a new screen

Need to bring in more screens? Rocket makes it effortless.
  • Click the Add new screen button at the bottom of the chat interface.

​
1: From the same Figma file

You will see a list of available screens, with already imported ones marked. Select the new screens you want and click Start import.
Add new screen from same Figma fileAdd new screen from same Figma file

​
2: From a different Figma file

Want to start another project with a new design? Choose From different file in the popup. You will be prompted to paste a new Figma URL.
Import screen from different Figma fileImport screen from different Figma file
Importing Figma from a different file creates a new project, so your current one stays just how you left it.

​
After your import

Once Rocket generates your web app, iterate with chat to bring it to life:
GoalPrompt
Add interactivityMake the navigation links functional and add smooth page transitions.
Connect a databaseConnect Supabase and store form submissions in a "contacts" table.
Add authenticationAdd login and signup pages with email/password auth via Supabase.
Improve responsivenessMake the layout fully responsive. Stack the sidebar below the content on mobile.
Fix visual differencesThe hero section font size doesn't match my Figma design. Make it 48px bold.
Add dark modeAdd a dark mode toggle that switches all colors to a dark theme.

​
Tips

  • Start with key screens. Import your most important 5-10 screens first, then add more incrementally.
  • Use the side-by-side preview. Click the Figma icon to compare your original design with the generated app in real time.
  • 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. Properly grouped layers, correct frame sizes, and clean vectors produce significantly better results. 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.

Connect integrations

Add payments, databases, AI, email, and analytics.

Design guidelines

Best practices for preparing Figma files for import.

Deploy to web

Publish your Figma-generated web app.