Import from Figma

​

Import your Figma design

⏰ Estimated time: three minutes You can import your Figma designs and turn them into functional React apps on Replit. This quickstart covers how to convert your designs into working applications using AI-powered code generation. For comprehensive import options including other platforms like GitHub, Bolt, and Lovable, see the Import feature documentation.

​

Import your design

1. Navigate to https://replit.com/import.

2. Select Figma from the available import sources.
3. Connect your Figma account to authorize access to your designs.

4. In Figma, select the frame you want to build in Replit.

5. Copy the frame URL from Figma and paste it into the Replit import interface.
6. Select Import to start the conversion process.

​

What gets imported

During the import process, Replit converts your Figma design into a functional React application:

• Theme & components: Design system elements, colors, typography, and reusable components
• Assets & icons: Images, icons, and other visual assets from your design
• App scaffolding: Basic application structure and layout framework

​

Figma design guidelines

To copy the Figma Design frame URL:

1. Right-click the frame
2. Select Copy/Paste as
3. Select Copy link to selection

For optimal conversion results, ensure your Figma design is well-structured with clear component hierarchies complete with auto layout constraints. Follow these guidelines for responsive designs in Figma. You can also ask Agent to help you make your design responsive.

​

Tips

• Use auto layout constraints to ensure your design is responsive.
• Name your layers something short and meaningful.
• Convert any groups to frames
• Mark image assets for export

​

Configure and run your app

During the import process, . If your app doesn’t run as expected, Replit offers the following workspace tools to help you resolve the issues:

• Agent: Use AI to add new features and refine your imported project
• Assistant: Get help with code questions and debugging
• Secrets: Add your API keys and environment variables
• Workflows: Configure the Run button to your preferred command

​

Interact in Agent chat (beta)

After importing, you can paste Figma links into Agent chat to explore layers, extract tokens, and request code changes. These Agent chat features require a Figma Dev or Full seat; the initial import does not. See the guide: Figma MCP Integration.

​

Continue your journey

Now that you’ve imported your , learn more about what you can do with your Replit App:

• Replit Agent: Get AI assistance with code review, testing, and feature implementation
• Make your Replit App Public: Share your app as a Template for others to remix
• Replit Deployments: Publish your app to the cloud with a few clicks
• Collaborate: Work with others on your imported projects