Explore Figma Sites
Written by Figma Man
Updated at June 19th, 2025
- Administration – Figma Learn
- Figma Design – Figma Learn
- Get started – Figma Learn
- FigJam – Figma Learn
- Community – Figma Learn
- Help – Figma Learn
- Work across Figma – Figma Learn
- Courses, tutorials, projects – Figma Learn
- Figma Slides – Figma Learn
- Figma Buzz – Figma Learn
- Figma Make – Figma Learn
- Figma Sites – Figma Learn
Table of Contents
Figma Sites was released in open beta at Config 2025. It is currently available on all paid plans, with a limited Starter plan experience coming soon. Learn more about what’s included in the beta.
What is Figma Sites?
Figma Sites lets you design, prototype, and publish high-quality websites—all in one place.
- Create beautiful responsive layouts for any screen size
- 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
Tip: Bookmark https://figma.com/site/new so you always have a new Figma Sites file at your fingertips whenever inspiration strikes!
Find your way around
Left navigation bar and sidebar
The left navigation bar helps you quickly switch between tasks in Figma Sites:
- File: This view is where the building happens. You can see a full list of webpages and layers in your file, and publish your site when you’re ready.
- Insert: Add prebuilt elements—like nav bars, footers, webpage templates, and embeds—and access your design libraries.
- Search: Quickly locate elements in your designs.
- Make: Use code layers to bring ideas and designs to life.
- CMS: Create and manage content for your site. (Coming later this year!)
- Settings: Update your website’s settings to help search engines understand your content, improve accessibility, and make it easier for users to find what they’re looking for.
Toolbar
The toolbar houses all the tools you’ll need to create your site:
- Add objects like webpages, frames, images, text, and shapes
- Access Figma AI tools in the Actions menu.
Tip: If you’ve spent time designing in Figma Design, working in Figma Sites will feel very familiar. Check out this list of design tools available in Figma Sites.
Right sidebar
The right sidebar is where you control the look and feel of design elements on the canvas or in webpages.
When you select an object on the canvas, its properties are displayed in the Design tab.
Your permissions on the file—whether edit or view-only—determine what you can see and do in the right sidebar.
Add animations, transitions, and visual effects to make your site feel lively.
Whether it's a subtle hover animation on buttons, adding depth and movement using parallax, or interesting effects triggered by user actions, interactions can help your webpages feel more responsive and vibrant.
Build a website
Start from an existing design
There are a few ways to get a head start with Figma Sites if you don't want to start from scratch:
Start with a template
Every new file opens with the template picker.
These templates, and many more, are also available in Templates and tools in the file browser.
Copy and paste from Figma Design
Grab your designs and copy and paste them straight into a webpage—or access them through your existing design libraries.
Learn more about copying and pasting between Figma Design and Figma Sites.
Assemble a site using blocks
Drag and drop prebuilt blocks—like landing pages, headers, footers, and customizable sections—to snap together a site in no time.
Build responsively
Figma Sites gives you lots of control when creating pixel-perfect layouts for different screen sizes.
Add webpages
When you create a new site, you’ll see a grey container. This is a webpage. Each webpage has a name, a button to preview it, and a way to add new breakpoints.
Click the Webpage icon in the toolbar to add a new webpage.
Add breakpoints
Breakpoints define specific screen widths where your webpage layout changes to meet the needs of different screen sizes.
Adding additional breakpoints lets you fine-tune the look and feel of the webpage and optimize the user experience across devices.
Edit across breakpoints
If your webpage has more than one breakpoint, you can add, select, and edit objects across all breakpoints simultaneously.
Learn more about making changes across multiple breakpoints in a webpage.
Preview your work
When you’re ready, preview your site to experience it as your users will. It’s a great way to quickly check animations, interactions, and responsiveness—without needing to publish first. Simply tap the Preview icon on any webpage, or press the Shift Space keyboard shortcut to open the inline preview.
Share it with the world
Publishing your site is the final step before sharing it with the world.
After publishing, you can make changes to your site, add or remove webpages, or connect a custom domain of your own.