This tutorial shows how to import Figma designs directly into Replit and convert them into live, functional apps using Replit's Agent, so you can go from design to code in minutes.
Notes:
- You need an existing Figma design or project ready to import. If you don't have one, create a simple design in Figma first - for example, a dashboard layout, form, or landing page.
- You'll need to be logged into both your Figma and Replit accounts. Make sure your Figma account has access to the design file you want to import.
- The imported design will be converted into React code automatically. You can then use Replit Agent to add functionality, adjust styling, or deploy the app.
- Sign in at replit.com and click the + icon next to Build, then select Import an Existing Project.
- On the Import page, choose Figma Design. You'll be prompted to log in with your Figma account if you haven't already.
- Click Agree & Allow Access to give Replit permission to access your Figma account. You'll see a confirmation that says Connected Successfully.
- In the Figma URL field, paste the URL of the Figma design you want to import. You can find this by opening your design in Figma and copying the link from the browser address bar.
- Choose whether you want your Replit project to be Public or Private, then click Import from Figma. Replit will convert your design into React code and create a new project.
- Once the import is complete, open the project in Replit. Your design will appear as responsive React code in the workspace.
