Skip to main content
⏰ Estimated time: 15 minutes A Figma design shows what the experience should look like. Replit Design turns a Figma frame into a design frame you can explore, refine, and build into an interactive app. You’ll use the Personal Fitness Trainer Template from Figma Community as the example.
The Personal Fitness Trainer landing page imported as a design frame in Replit Design, with the run marked complete in the chat panel

​
Before you start

You need:
  • A Replit account.
  • A Figma account, with the file you want to import or the example file above.

​
Import the Figma frame

Bring the frame into Replit Design and let Agent turn it into a working design.
1

Get your Figma frame link

Use your own Figma file, or follow along with this guide’s example: the Personal Fitness Trainer Template on Figma Community.In Figma, right-click the frame you want to import, choose Copy/Paste as, then Copy link to selection.
The Personal Fitness Trainer Template open in Figma, showing the Cover frames in the layers panel and on the canvas

The Personal Fitness Trainer Template open in Figma, with the Cover frames you'll import.

2

Open Replit Design

Go to replit.com/design and select Import Figma under the prompt box.
The Replit Design home with the Import Figma option selected under the prompt box, and a tooltip reading Bring in a Figma frame and Agent will turn it into a working design

Import Figma on the Replit Design home: bring in a Figma frame and Agent turns it into a working design.

3

Paste the URL and start building

Paste your frame URL into the Import Figma design dialog and select Attach to prompt. The frame attaches to your prompt; submit it to start building.
The Import Figma design dialog on Replit Design with a Figma frame URL pasted in the field and the Attach to prompt button

The Import Figma design dialog with the frame URL pasted, ready to attach to the prompt.

Agent imports the frame and rebuilds it as a design frame in your project.
The Personal Fitness Trainer landing page imported as a design frame in Replit Design, with the run marked complete in the chat panel

The imported Personal Fitness Trainer landing page as a frame in Replit Design.

​
Make it yours

Select the imported frame and start reshaping it:
  • Follow a suggestion: the import arrives with proposed next steps, such as a dark editorial variant, a pricing section, or a mobile viewport. Each generates as a fresh frame, so the original stays for comparison.
  • Chat about it: use the input under the frame and brief it in your own words, “swap the hero photo”, “make the call to action bolder”.
The imported Personal Fitness Trainer frame selected in Replit Design, with three suggestion cards beside it: Dark editorial variant, Add a pricing section, and Mobile viewport

The imported frame selected, with suggestions proposing a dark editorial variant, a pricing section, and a mobile viewport.

​
Next steps

Explore suggestions

Explore what to design next, one click at a time.

Visual Editor

Polish text, colors, spacing, and images directly.

Build your design

Turn the finished frame into a working app.

​
Credits

The example design used in this guide is the Personal Fitness Trainer Template on Figma Community.