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 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.
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 at the bottom-left of the chat input.
Click 'Import' 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.
Learn how to connect your Figma account with Rocket.
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
Heads up: You can import up to 40 screens per project.
- 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 in the chat.
- 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 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.
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 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’ll see a list of available screens, with already imported ones marked. Just sleect the new screens you want and click Start import.Click 'Add new screen' to expand your web app
2: From a different Figma file
Want to start another project with a new design? Choose From different file in the popup. You’ll be prompted to paste a new Figma URL.Paste a new Figma link to start a new project
Importing Figma from a different file creates a new project, so your current one stays just how you left it.
You did it!
You’ve just turned your design into a real working web app, powered by Rocket.
Need help? We’re here for you.
Email us at support@rocket.new or join our Discord community to get help, share ideas, and connect with other creators.
Email us at support@rocket.new or join our Discord community to get help, share ideas, and connect with other creators.