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.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.
Configure and run your app
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
Interact in Agent chat (beta)
After import, you can paste Figma links into Agent chat to inspect layers, extract tokens, and request code changes. These chat features require a Figma Dev or Full seat. Initial import does not require these seats. See the guide: Figma MCP Integration.Continue your journey
Now that you’ve imported your , explore these next steps:- Replit Agent: Get help with feature work, debugging, and refactoring
- Make your Replit App Public: Share your app as a Template
- Replit Deployments: Publish your app
- Collaborate: Build with teammates