> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Import from Figma

> Import Figma designs into Replit and convert them into React apps.

export const platform_0 = "Figma"

export const projectType_0 = "design"

export const setupDescription_0 = "Replit prepares your app environment, dependencies, and run commands"

## Import from Figma

⏰ *Estimated time: three minutes*

Import a Figma frame into Replit and convert the design into a working React app.

For comprehensive import options including other platforms like GitHub, Bolt, and Lovable, see the [Import feature documentation](/core-concepts/project-editor/app-setup/import).

## Before you start

* A Figma file with a frame you want to import
* Access to connect your Figma account
* A Replit account

## Import steps

1. Open [replit.com/import](https://replit.com/import).
2. Select **Figma**.
3. Connect your Figma account.
4. In Figma, select a frame and copy its URL.
5. Paste the URL into Replit.
6. Select **Import**.

## What gets imported

* Theme and component styling
* Images and icon assets
* App scaffolding for a React project

## Improve conversion quality

* Use auto layout where possible.
* Keep layer names short and descriptive.
* Convert groups to frames before import.
* Mark image layers for export.

## Configure and run your app

During import, {setupDescription_0}. If your app needs changes, use these Project Editor tools:

* **[Agent](/core-concepts/agent)**: Refine features, debug issues, and make code changes
* **[Secrets](/core-concepts/project-editor/app-setup/secrets)**: Add API keys and environment variables
* **[Workflows](/core-concepts/project-editor/app-setup/workflows)**: Set the **Run** command for your app

## Import limits

Figma limits how often you can import based on your Figma plan and seat type. These limits are set by Figma, not Replit.

* **Free, Starter, View, and Collab seats**: 1 import per month.
* **Dev and Full seats** (Pro, Organization, or Enterprise plans): Higher limits with per-minute and daily caps.

If you hit a rate limit during import, upgrade to a Figma Dev or Full seat for increased access. See <a href="https://developers.figma.com/docs/figma-mcp-server/plans-access-and-permissions" target="_blank" rel="noreferrer">Figma's plans and permissions documentation</a> for full details.

## Interact in Agent chat (beta)

After import, you can paste Figma links into Agent chat to inspect layers, extract tokens, and request code changes. A Figma <strong>Dev</strong> or <strong>Full</strong> seat is recommended for Agent chat features. Free and Starter seats are limited to 6 MCP tool calls per month.

See the guide: [Figma MCP Integration](/replitai/mcp/figma).

## Continue your journey

Now that you've imported your {platform_0} {projectType_0}, explore these next steps:

* [Replit Agent](/core-concepts/agent): Get help with feature work, debugging, and refactoring
* [Replit Deployments](/category/replit-deployments): Publish your app
* [Collaborate](/replitai/invite-teammates): Build with teammates