Figma Sites Logo Figma Sites
Features Interface How to Start Responsive Create Website

Design, Build, Launch Your Website. All in Figma.

Introducing Figma Sites – transform your Figma designs into live, high-performance, responsive websites directly within the familiar Figma environment. Streamline your entire design-to-code workflow.

Get Started (Beta Docs) Learn More
Hero image illustrating Figma Sites' capability to design and launch websites directly from Figma.

What is Figma Sites?

Figma Sites is a powerful website builder within Figma, empowering you to design, build, and publish high-quality, fully responsive websites directly on the Figma platform. It bridges the gap between design and deployment, enabling a seamless end-to-end workflow for creators and designers to turn Figma designs into live websites.

Why Choose Figma Sites for Website Building?

Seamless Design Integration

Instantly use Figma designs, components, and styles in Sites. Ensure brand consistency and speed up development.

Advanced Responsive Control

Master layouts with intuitive breakpoints, auto layout, and constraints. Design efficiently across all screen sizes.

Rich Interactions & Animations

Add built-in effects like marquee scroll, hover states, and parallax. Bring your Figma prototypes to life effortlessly.

Rapid Building Blocks

Start fast with templates and pre-built sections. Drag, drop, and customize common website elements easily.

One-Click Publishing & Domains

Go live instantly on a figma.site subdomain or connect your custom domain for free during beta.

Future-Proof Ecosystem

Benefit from upcoming CMS for dynamic content and AI-powered 'Make' for custom code generation.

Who is Figma Sites For?

Primarily for designers and teams already using Figma who want to streamline their workflow from Figma design to live website, reducing handoffs and complexity. Also great for anyone looking for an integrated design-to-web platform to build websites efficiently.

Figma Sites: Currently in Beta

Figma Sites is currently in open beta. This means features for this Figma website builder are actively being developed, you might encounter occasional bugs, and some functionalities (like the CMS and Make code layers) are coming soon. Custom domains are free during the beta period (until end of 2025). Pricing after beta is yet to be announced.

Find Your Way Around Figma Sites

Figma Sites interface showcasing the left navigation panel with File browser, Insert menu, and future CMS and Make tools.

Left Navigation Bar and Sidebar in Figma Sites

The left navigation panel in Figma Sites lets you quickly switch between views:

  • File: View webpages, layers, and publish your Figma-built site
  • Insert: Add pre-built website elements, templates, frames, images, and access Figma libraries
  • Make (Coming Soon!): Use code layers and AI-generated code for your website
  • CMS (Coming Soon!): Create and manage dynamic site content
  • Settings: Update website settings including SEO, accessibility, and more for your Figma Site

Toolbar and Design Controls in Figma Sites

The toolbar in Figma Sites gives you access to essential tools for creating and editing your website:

  • Design Tab: Control website appearance with fills, strokes, effects, auto layout, and constraints
  • Interaction Tab: Add dynamic website effects like hover states, marquee scroll, and parallax
  • AI Tools: Access Figma AI tools from the Actions menu to enhance your web design process
Figma Sites right panel displaying Design and Interaction tabs for granular control over website elements.

Build a Website Your Way with Figma

Start with a Website Template

Every new Figma Sites file opens with the template picker. Choose from pre-designed website templates that are constantly updated.

Templates jump-start your website creation with professional designs ready for customization.

Copy and Paste from Figma Design

Grab your existing web designs from Figma Design and copy-paste them directly into Figma Sites—they'll look identical.

Seamlessly transfer Figma designs with all styling, auto layout, and components intact for your new website.

Assemble with Building Blocks

Drag and drop pre-built website blocks—like headers, footers, and customizable sections—to quickly assemble a site in Figma Sites.

Mix and match components to create a unique site in minutes without starting from scratch.

Build Responsive Websites in Figma

Figma Sites gives you exceptional control when creating responsive layouts for different screen sizes—all with visual tools you already know from Figma, making responsive web design intuitive.

Demonstration of Figma Sites' intuitive breakpoint controls for responsive web design across desktop, tablet, and mobile.
Responsive Breakpoints

Add Webpages in Figma Sites

When you create a new site in Figma, you'll have a designated "Webpage" where you can add elements. Create additional pages through the "+" Webpage icon.

Add Responsive Breakpoints

Breakpoints define specific screen widths where your webpage layout changes for responsive design. Add predefined breakpoints for tablet and mobile, or create custom widths.

Edit Across Breakpoints

If your webpage has more than one breakpoint, you can edit, select, and validate content across all breakpoints simultaneously for consistent responsive web design.

Create beautiful responsive websites that look perfect on any device—from desktop to mobile—all within the familiar Figma Sites environment.

Figma Sites interface for previewing websites on different devices and sharing or publishing the final site.

Ready to Build Your Website with Figma?

Dive into the official Figma Sites documentation, explore the possibilities, and start creating your first website directly in Figma today. Transform your designs into reality.

Explore Figma Sites