This lesson shows how to bring designs from Figma Design into Figma Sites. If you haven't used Figma Design before, you can check out our Figma Design for beginners course to learn how to build a portfolio website design from scratch.
Move designs from Figma Design to Figma Sites
Figma Sites works seamlessly with Figma Design to take your website designs you and your team have already created and bring them into Figma Sites. Once in Figma Sites, you’ll be able to publish your website to the web.
If you want to use website designs you’ve made in Figma Design, you can copy and paste their frames directly into Figma Sites with these steps:
- Select a frame in your Figma Design file and copy it.
- In your Figma Sites file, select an empty breakpoint you want to paste into. Not sure what to pick? Start with the Primary breakpoint.
- Paste the frame into the breakpoint.
- Make any adjustments to fine tune the design to fit the needs of each breakpoint.
Auto layout in Figma Sites
Figma Sites relies on auto layout to create a responsive experience for your breakpoints, so we recommend using it when creating your sites. Without it, your website design may not behave exactly how you want.
Suggest auto layout
If you are bringing a design from Figma Design that doesn’t use auto layout into Figma Sites, we recommend adding auto layout to it first. Figma has a suggest auto layout feature that can save you time by doing a lot of the heavy lifting for you.
Note: To learn more about auto layout, check out the Figma Design for beginners course, or go through the exercises in the Figma Sites playground file in Figma Community.
To use suggest auto layout:
- Select a frame that isn’t using auto layout.
-
Open the Actions menu:
- macOS: Command K
- Windows: Ctrl K
- Search for “Suggest auto layout”.
- Click on it, or highlight it and hit Enter.
- Figma will automatically apply auto layout to the selected frame and its nested frames. We still recommend checking the functionality in case it missed something.
Read the guide to auto layout →
Check your knowledge
Up next: Use Design tools in Figma Sites
In the next lesson, we'll take a quick tour of the toolbar in Figma Sites and learn some tips on how to create your site from scratch directly in Figma Sites.
Additional resources
- Figma Design for beginners (recommended) — Learn Figma Design and create your own portfolio to share your work and land your next gig! This comprehensive course teaches you all of the important fundamentals for important features like components, auto layout, and more. Then, bring your design into Figma Sites to publish it.
- Figma Community — Find Figma Design files from other Figma users, then practice moving them to Figma Sites.
- Figma Sites playground file — Practice what you just learned directly inside of Figma Sites! We recommend following the Figma Sites playground file to learn more about breakpoints in Figma Sites through hands-on learning.
- Guide to auto layout on the help center — If you want a comprehensive look into auto layout start here.