Skip to main contentImport 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.
Before you start
- A Figma file with a frame you want to import
- Access to connect your Figma account
- A Replit account
Import steps
- Open replit.com/import.
- Select Figma.
- Connect your Figma account.
- In Figma, select a frame and copy its URL.
- Paste the URL into Replit.
- 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.
During import, . If your app needs changes, use these Workspace tools:
- Agent: Refine features, debug issues, and make code changes
- Secrets: Add API keys and environment variables
- 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 Figma’s plans and permissions documentation 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 Dev or Full 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.
Continue your journey
Now that you’ve imported your , explore these next steps:
