​
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.
Preview of Figma design import in Replit

​
Import your design

  1. Navigate to https://replit.com/import.
Replit import interface showing available sources
  1. Select Figma from the available import sources.
  2. Connect your Figma account to authorize access to your designs.
Figma authentication process in Replit
  1. In Figma, select the frame you want to build in Replit.
Selecting a frame in Figma for import
  1. Copy the frame URL from Figma and paste it into the Replit import interface.
  2. Click Import to start the conversion process.
Figma import progress in Replit

​
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. Click Copy/Paste as
  3. Click 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

​
Continue your journey

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