> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rocket.new/llms.txt
> Use this file to discover all available pages before exploring further.
# Overview
> Turn Figma designs into production-ready code with Rocket.new Build. Import files and generate working web and mobile apps.
export const LlmsDirective = () =>
For the complete documentation index, see llms.txt.
For a lightweight markdown version of this page, append .md to the URL.
;
**Your designs, running as real apps.** Import Figma files or frames and Rocket generates production-ready code that matches your design - layout, colors, typography, spacing, and components. No manual frontend work.
Figma import is only available on the web browser at [rocket.new](https://rocket.new). It is not available in the Rocket mobile app.
## When to use Figma import
| Scenario | Best starting method |
| :----------------------------------------------------------------- | :----------------------------------------------------- |
| You have completed Figma designs | **From Figma** (you are here) |
| You have a rough idea but no designs | [From an idea](/build/create/from-an-idea) |
| You have a screenshot, PDF, spreadsheet, or other file (not Figma) | [From an attachment](/build/create/from-an-attachment) |
| You have an existing live website | [Redesign](/build/create/commands/redesign) |
## What you can build
Import your full Figma file and generate a responsive React or Next.js web app that matches your designs screen by screen.
**Try this prompt after import:**
```plaintext wrap theme={null}
Make the sidebar collapsible and add smooth transitions between pages. Connect Supabase for user authentication.
```
Convert mobile screen designs into Flutter apps for iOS and Android with proper navigation and native feel.
**Try this prompt after import:**
```plaintext wrap theme={null}
Add pull-to-refresh on the feed screen, swipe-to-delete on list items, and connect Firebase for push notifications.
```
Import your design system components and generate reusable, styled code components that maintain consistency across your app.
**Try this prompt after import:**
```plaintext wrap theme={null}
Extract the button, card, and input components as reusable components. Add hover states and loading states to all buttons.
```
## Quick start
Copy the URL of your Figma file, or select a specific frame to copy its URL. You need view or edit access to the file.
Step-by-step guide for copying the right URL.
Click the **+** button at the lower left of the input box and select **Add from Figma**.
Paste your Figma link into the dialog and click **Start Import**. Select your frames, choose a tech stack, and Rocket builds your app.
* You need either **view or edit** permission on the Figma file.
* Prototype links are not valid. Use the file or frame URL instead.
## Platform guides
Full walkthrough for converting Figma designs into React or Next.js web apps.
Full walkthrough for generating Flutter mobile apps from your Figma screens.
## Prepare your designs
Follow these guidelines to get the best results from Figma import:
Best practices for structuring frames, grouping layers, handling vectors, and avoiding common import issues.
## Troubleshooting
Understand Figma's API rate limits by plan and when you can safely retry.
## What's next?
Refine your imported app using natural language prompts.
Add payments, databases, AI, and more to your Figma-generated app.
Click any element to tweak colors, text, spacing, and layout.
Publish your Figma-generated app to the web.