About this community file
Figma Sites lets you design, prototype, and publish high-quality websites—all in one place.
This file will guide you through everything you need to build and publish your own site through hands-on exercises that cover:
- Webpages which contain the content that users will see on your site
- Building websites quickly with pre-made blocks (recommended for people who want to build quickly)
- Add breakpoints so your site works across different screen sizes (like desktop, tablet, and mobile)
- Auto layout, including how it can make your website responsive and easy to manage
- Interactions to create key functionality like motion and user navigation
- Code layers that use AI to create unique experiences powered by code, no matter your skill level, no programming experience or knowledge required. Learn more about AI features in Figma Sites →
- Building your first page with by combining all of those things together
If you ever find yourself stuck, we provided references that you can preview and inspect to learn more about their inner workings.
Get a copy and follow the exercises
To get a copy of the Figma Sites playground file on the Figma Community:
- Open to the Figma Sites playground file.
- Click Use template.
- Choose a team to duplicate the playground file. The new file will be in the drafts of that team.
- Use the layers panel in the left sidebar to identify lessons by their name.
- Use the zoom to selection keyboard shortcut Shift 2 to quickly jump to the selected exercise.
About Figma Community
This file is a playground file created by Figma’s Product Education team and published to the Figma Community.
To find more resources like these, visit our Figma Community profile, or search for “playground” from the Community home page.
Share your feedback
We hope you enjoyed this collection on Figma Sites! We're always looking to learn more from you. So share your thoughts with us by clicking one of the feedback buttons below.