> ## Documentation Index > Fetch the complete documentation index at: https://docs.replit.com/llms.txt > Use this file to discover all available pages before exploring further. # Import Figma designs into Replit Design > Import a Figma frame into Replit Design, refine it with suggestions and chat, and build it into an interactive app. ⏰ *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](https://www.figma.com/community/file/1569006333493544411) 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](https://replit.com). * A [Figma](https://www.figma.com) 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. Use your own Figma file, or follow along with this guide's example: the [Personal Fitness Trainer Template](https://www.figma.com/community/file/1569006333493544411) 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 Go to [replit.com/design](https://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 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 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 ## Make it yours Select the imported frame and start reshaping it: * **Follow a [suggestion](/design/explore-suggestions)**: 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](/design/chat-about-your-design)**: 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 ## Next steps Explore what to design next, one click at a time. Polish text, colors, spacing, and images directly. Turn the finished frame into a working app. ## Related * [Figma MCP Integration](/features/mcp/figma) * [Canvas](/design/canvas) * [Visual Editor](/design/visual-editor) ## Credits The example design used in this guide is the [Personal Fitness Trainer Template](https://www.figma.com/community/file/1569006333493544411) on Figma Community.