How to Publish a Website with Figma Sites
Figma Sites lets you publish designs as real web pages without exporting to a developer or a separate site builder. If your mockup already lives in Figma, the gap between design and live URL just got shorter.
Direct answer: Turn your frame into a Site, add responsive breakpoints and interactions in Figma, then publish to a figma.site subdomain or connect a custom domain.
What Is Figma Sites, Exactly?
It is a publishing layer inside Figma. You mark a frame as a site, and Figma renders it as HTML with layout that responds to screen size. It supports scrolling pages, sticky elements, and a simple content system so repeated blocks can pull from data.
The key word is inside. You do not leave Figma, and the file remains editable design rather than generated code you must maintain separately.
How Do You Publish Your First Site?
- Design the page in a normal Figma frame.
- Select the frame and choose Create Site.
- Set breakpoints — desktop, tablet, mobile — and fix layout at each.
- Add interactions and any scroll or hover animation.
- Click Publish and pick a subdomain, or add your own domain.
Step three is the one people skip. A design that looks right at 1440px can overlap badly at 375px, and Figma Sites will not fix that for you.
What Features Should You Expect?
| Feature | Supported |
|---|---|
| Responsive breakpoints | Yes |
| Scroll and hover animation | Yes |
| Built-in CMS collections | Basic |
| Forms with backend | Limited |
| Custom code injection | Minimal |
Marketing pages, portfolios, and landing pages fit comfortably. Applications and anything needing server logic do not.
Does It Cost Extra?
Figma Sites publishing is tied to paid Figma plans. The free plan lets you design but limits who can publish and where. Check your seat type before promising a client a live URL — discovering you cannot publish on deadline is a bad afternoon.
How Does It Compare to a Traditional Site Builder?
Against Webflow or Framer, Figma Sites wins on one thing: zero translation loss. What you designed is what ships. It loses on depth — no advanced form handling, limited custom code, and a smaller ecosystem of integrations.
If your team already lives in Figma, the workflow win is real. If your site needs e-commerce, logins, or complex CMS relations, you will hit the ceiling fast.
Where It Falls Short
Search engine control is thin compared with a real CMS. There is minimal custom code, so analytics scripts and third-party widgets are awkward. And the CMS is simple — multi-reference collections that Webflow handles easily are not there yet.
Another limit: heavy animations can hurt load time, and you have few tools to optimize them.
Who Should Use It
Designers who want to ship a portfolio without a developer, and marketing teams producing landing pages that change often. Skip it for content-heavy blogs, web apps, or anything where the site is the product. This is a publishing surface for design work, not a platform for building software.
Quick Summary
- Figma Sites publishes design frames as real responsive web pages.
- Set breakpoints manually — layout is not auto-fixed per screen.
- Publishing requires a paid Figma plan.
- Strong for landing pages and portfolios, weak for apps and complex CMS.
- Best when your team already designs in Figma.
