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. 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:
Transform dashboard, SaaS, or product designs into interactive web apps with real logic.Try this prompt after import:
Convert product catalog designs into working stores with cart and checkout.Try this prompt after import:

​
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

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.

Click + then select Add from Figma

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.

Paste your Figma frame or file URL

3

Select frames and tech stack

You can import up to 40 screens at a time.
Rocket shows the frames from your Figma file. Select the ones you want to build, then click Start import.
Frame selection panel showing Web frames tab with thumbnails and a Start import button.Frame selection panel showing Web frames tab with thumbnails and a Start import button.

Select the frames to convert to code

Using the free plan? Some features may be limited. Upgrade to keep generating without interruptions.
Choose your tech stack. Options include Next.js, HTML, and React:
Tech stack selection showing Next.js, HTML, and React radio button options.Tech stack selection showing Next.js, HTML, and React radio button options.

Choose your tech stack

4

Rocket generates your web app

Rocket fetches your Figma design assets, optimizes layers, and generates structured, readable code screen by screen.
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.

Rocket is building your web app in real time

All status checks turn green when your web app is ready.
5

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

Click the Figma icon in the top-right to open your Figma design in Rocket

Want to make changes? Just describe what you want in the chat. No need to go back to Figma.Try things like:
  • “Make the hero section background dark and the text white”
  • “Add dark mode to the website”
  • “Increase the size of the hero image”
  • “Switch the font to Roboto and make the header smaller”
6

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.

Click + then select Add new screen

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

Choose to add from the same Figma file or a different one

Select the screens you want to add and click Start import.
Frame picker modal showing Web frames with thumbnails and a Start import button.Frame picker modal showing Web frames with thumbnails and a Start import button.

Select screens from your Figma file

  • 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 web app, iterate with chat to bring it to life:

​
Tips

  • Start with key screens. Import your most important 5-10 screens first, then add more incrementally.
  • 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. 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.

Connectors

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

Design guidelines

Best practices for preparing Figma files for import.

Launch your app

Publish your Figma-generated web app.