In this guide, you’ll learn how to:

  • Import Figma frames or files into Rocket.
  • Convert static designs into real, working web applications.
  • Choose layout formats, frameworks, and design systems.

​
Before you begin

You’ll need:
  • Access to rocket.new.
  • A Figma design file with link-sharing enabled.

Not sure how to get your Figma link?
Follow this quick guide to grab the right URL.

​
Let’s launch your web application

You’re about to turn design into deployable code – no coding required.

1

Import Figma

  • Simply paste the Figma URL in the chat and Rocket will detect it.
    or

  • Click Import Figma at the bottom-left of the chat input.

    Tap 'Import Figma' to get started

If you haven’t connected your Figma account to Rocket yet, start here:
Learn how to connect your Figma account with Rocket.

Success check: A popup asks for your Figma link.

2

Paste your Figma link in Rocket

Paste your copied link into the popup and click Start import.

Paste your Figma frame or file link here

Success check: Rocket shows your design preview and screen options.

3

Choose screens & framework

Pick how your web application will be structured:

  • Select screens: Select Figma frames to turn into a real web app.

Choose exactly what you want to bring in

Using the free plan? Some features may be limited. Upgrade to keep generating without interruptions.
  • Click Start import on the left.

Click Start import

  • Select framework: Choose between React, HTML, or Next.js.

Choose React, HTML, or Next.js

  • Select language: Decide between JavaScript and TypeScript (for React/Next.js).

Select your code’s language

  • Choose design system: Customize your code with Tailwind CSS or CSS (for HTML).

Customize your code’s styling

Success check: You’ll see a loading screen with progress indicators.

4

Rocket generates your web application

Rocket parses your design, optimizes assets, and generates structured, readable code.

Rocket is building your web application in real time

Success check: All status checks turn green – your web application is ready.

5

Preview and compare with Figma

See your app and the original Figma design side by side - no switching tabs, no guesswork.

  • Click Figma in the top navbar to open the side-by-side preview.
  • Use the screen dropdown (where Cart is selected) to switch between different Figma screens.

Preview your website next to your 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 primary color from green to blue.”
  • “Add dark mode to the website.”
  • “Make the checkout button smaller.”
  • “Add space and a border around product cards.”
  • “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.

You did it!

You’ve just turned your design into a real working web app, powered by Rocket.

Need help? Reach out at support@rocket.new.