Skip to main content
Import a Figma frame and describe what you want to build. Rocket converts your visual layers into working, production-ready components - no manual translation needed.
Figma import is available on web only. It is not supported in the Rocket mobile app.

​
What you can do

Design to code

Import any Figma frame and get a fully coded version with responsive layouts. Rocket matches your layers, spacing, and styling automatically.

Component library handoff

Turn your Figma component library into reusable code components with variant support.

Prototype to production

Import a clickable Figma prototype and get a working multi-page app with real navigation and route transitions.

Marketing pages

Convert Figma marketing designs into pixel-perfect, responsive code for desktop, tablet, and mobile.

​
Connect Figma

Figma connects via OAuth - no API key needed. You can connect from two places - both open the same popup. Option 1: From the import flow (fastest) Click the + button at the lower left of the chat input and select Add from Figma.
Chat input with + menu open, showing Add from Figma option.Chat input with + menu open, showing Add from Figma option.
A popup appears asking you to connect.
Connect to Figma popup with a Connect button.Connect to Figma popup with a Connect button.
Option 2: From workspace Settings Click your workspace name in the top-left, select Settings, then open the Connectors tab. Click the Figma card and click Connect.

Manage workspace connectors

Connect once from Settings and it is available to all tasks.
After clicking Connect Figma opens an authorization screen. Sign in if prompted, review the permissions, and click Allow access.
Figma OAuth screen showing permissions Rocket is requesting.
A green dot appears next to Figma when the connection is active. Disconnect or switch accounts Open workspace Settings, go to Connectors, and click the Figma card. Click Disconnect and confirm. Connect again to use a different account.

Manage workspace connectors

Disconnect or switch accounts from workspace Settings.

​
Import a design

Once connected:
  1. In Figma, open your file and click Share > Copy link to get the URL.
  2. In Rocket, click the + button at the lower left of the chat input and select Add from Figma.
  3. Paste your Figma URL and select the frames you want to import.
  4. Click Import. Rocket generates production-ready code from your selected screens.
  5. Use chat to add interactivity, connect data sources, or refine layouts.

Get your Figma URL

Step-by-step guide to finding and copying your Figma file URL.

Design guidelines

Follow these Figma best practices to get the best code output.

​
Tips

  • File organization affects output quality. Well-named layers, proper auto-layout, and consistent spacing produce better code. Flattened images or ungrouped elements may need manual cleanup.
  • Prototype flows map to routes. Click-through connections in your Figma prototype are mapped to page routes and navigation links in the generated app.
  • Complex animations may need refinement. Rocket handles standard transitions, but advanced Figma animations may need adjustment after import.
  • One Figma account per Rocket workspace. To switch accounts, disconnect and reconnect from workspace Settings.
  • Web only. Figma import is not available in the Rocket mobile app.

​
What’s next?

Supabase

Wire up your imported Figma designs with real data from Supabase.

Stripe

Add payment flows to your Figma-designed pages with Stripe checkout.

Netlify

Deploy your Figma-to-code project to a live URL with Netlify.

All connectors

Browse every available integration.