Figma Sites collection: Figma Sites collection overview

Figma Sites lets you design, prototype, and publish high-quality websites—all in one place. With Figma Sites you can:

• Create beautiful responsive layouts for any screen size with breakpoints
• Use the same design tools you’re accustomed to in Figma Design, like frames, auto layout, shapes, responsive components—and much more
• Copy and paste seamlessly between Figma Design and Figma Sites
• Bring your site to life with easy-to-use interactions and animations like marquee scrolling, custom cursors, and hover effects
• Share live websites with collaborators to explore your ideas, test usability, and keep pushing your work forward

About this collection

This series is a collection of videos, lessons, and exercises to help you start using Figma Sites quickly. You'll learn how to:

• Create your first Figma Sites file
• Use breakpoints to optimize your website for different screen sizes
• Build a site in minutes using pre-built blocks
• Move website designs created in Figma Design file to Figma Sites
• Design a website from scratch using many of the same design tools you may have used in Figma Design
• Add interactions to bring your site to life through animations and interactivity
• Use AI to create code layers (no coding skills required)
• Add accessibility tags to support visitors who use assistive technology, like screen readers
• Preview and publish your site to the web

Who is this collection for?

This collection was created to support anyone who is interested in creating a website, no matter your experience level. Even if you’ve never made a website or used Figma Design, you’ll be able to snap one together using pre-built blocks and templates.

Feature availability

Users on any Figma plan are able to create Figma Sites files to design and create websites. Publishing a site to the web is available on Figma's paid plans.

Some AI features like code layers are only available on our paid plans. Code layers are completely optional, and you can create websites without them. They're also pretty cool, so you may not want to skip them after you learn more.

Create a new Figma Sites file

The first step to start using Figma Sites is to create a new Figma Sites file. You can create a new website right from the Figma file browser, or by going straight to figma.com/site/new.

Figma Sites has several ways you can start building, no matter your skill level. You can start with a template, a blank site, or from a design you created in Figma Design. Feel free to explore all of these options, depending on whichever one suits your needs and goals.

Click here to create a new site file →

Start with a template

When you create a new Figma Sites file, you’ll see a collection of templates to jump-start your website building process. Starting with a template is a great idea if you want a beautifully designed website as fast as possible, so you can skip over a lot of the design work and focus on adding your own content. These templates, and many more, are also available in Templates and tools in the file browser.

Start with a blank site (choose this option to follow along)

We’ll start with a blank site as the foundation for this collection. You can still build from scratch using pre-built blocks to speed up your website creation process.

Starting from a blank site is a good option if you plan to bring frames or website designs from Figma Design into Figma Sites.

Check your knowledge

Up next: Breakpoints

Every new website in Figma Sites starts with a single webpage with two breakpoints: Desktop and mobile. These are where you’ll add content for the webpage. Breakpoints are a core part of working in Figma Sites.

After you’ve created your blank site, click the button on the right and head over to the next lesson where we’ll learn more about Breakpoints.

Additional resources

We’ll cover the fundamentals throughout this video collection, but there are always areas where you can dive deeper if you need to. We’ll share any relevant resources in individual lessons, but here is a collection of additional resources you might find useful on your learning journey.

• Figma Sites playground file (recommended) — Get hands on with Figma Sites and work your way through exercises that teach you how to use Figma Sites. You can preview the playground file above.
• Figma Design for beginners (recommended) — This comprehensive course teaches you all of the important fundamentals of Figma Design. You’ll learn how to design a portfolio website from scratch in Figma Design using components, auto layout, and more. This collection will teach you how to bring that design over to Figma Sites so you can publish it to the web.
• Figma Community — Search for Figma Sites—or Figma Design files that can be moved to Figma Sites—from other Figma users to learn the ropes.
• Explore Figma Sites — A compact quick–start guide you can reference for all key functionality in Figma Sites.
• Figma Sites on the Figma Help Center — We also have a comprehensive library of documentation resources on our help center for when you want to dive deeper on any of these topics.
• The Figma Forum — A place to learn from and discuss Figma’s products with other users.