Figma announced 'Sites' at Config 2025, which lets users create simple static websites from designs. Imagine a website generator like Framer or Webflow, but embedded inside Figma.
The buzz is serious. Sites could become the de facto tool for quick marketing campaigns or small personal websites. But what if you need Sites to integrate with your existing design systems, custom components, and production code?
Figma Sites is a visual developer tool similar to Webflow or Framer. It's focused on letting designers build websites without coding or leaving Figma.
Its greatest strength is its integration with the Figma ecosystem. For designers already comfortable with the platform, Sites offers a path to deploy a design as a live website quickly.
Figma Sites includes numerous presets for everyday website interactions and effects. For instance, you can add a hover effect to a button or a typewriter effect to a text block.
A future version of Sites will also include an AI tool for generating code.
Figma Sites can also display your design in desktop, tablet, and mobile layouts side by side. The preview version (press shift + space) and the published version are both fully responsive websites.
Press the Publish button in the top-left corner once you’re ready to deploy the design into a working website. After some quick validations (it can even help with auto layout), Figma Sites will deploy your project to a generated URL. For a fee, you can wire up a custom domain.
Right now, Figma Sites translates your design into HTML and CSS. The team's future improvement, "Code Layers,” will take a user prompt and transform it into React and Tailwind CSS.
Another future improvement is a CMS feature inside Figma Sites. This would allow users to manage their website content more efficiently. The idea of a fully integrated design-to-publish tool with an internal CMS is very appealing.
Simple site builders are great for getting something online, but aren’t great at creating fully integrated applications that mesh with an existing codebase. This is a familiar problem.
The challenge lies in moving beyond a static page built with HTML and CSS. What happens if you need this new site to use the Next.js framework and the App Router patterns that your team has adopted? Can you leverage your company's custom components? Is there a way to add complex user interactions? These limitations become significant hurdles for any product beyond a basic landing page or marketing campaign.
Builder.io's Visual Editor satisfies this larger need. Figma Sites gets you something fast without ever leaving the Figma ecosystem. Visual Editor gets you something nearly as fast, but it connects designs directly to your production codebase on one canvas.
The core idea is different. Visual Editor is for feature-rich applications where your existing production codebase and design systems are first-class citizens.
Figma Sites was engineered to transform a Figma design into a static site using no third-party tools and the most minimal toolchain possible. Visual Editor was engineered to transform designs into production applications at the enterprise scale:
Visual Editor gives you a familiar, precise visual editing experience, but you're building interactive applications, not just static mockups. Use prompts to generate UI, then fine-tune it visually. The output isn't just a picture; it's code that works.
Import Figma designs with a click, and Builder translates them into interactive code using your component library. The CLI deeply integrates with your specific framework and codebase patterns, generating clean, maintainable code that developers want to work with. It respects your tech stack.
Stop worrying about brand drift. Because Builder understands your codebase, it uses your actual design system context—your colors, typography, spacing, and components—automatically ensuring everything generated is consistent and on-brand. No more manual checking.
Builder offers flexibility. Developers can use it to build new UIs that integrate directly with application code. Marketers or designers can use the 'Publish' workflow to create and update content visually using pre-built components, without needing a developer or a new deployment. This addresses the content bottleneck, too.
Visual Editor provides a unified canvas for design, development, and content updates. It fits into existing developer workflows (like Git) rather than trying to replace them, enabling better collaboration across the entire digital team.
Ready to see the difference? You can try Visual Editor and experience how it connects to a real codebase.
- Open the Visual Copilot Figma plugin. Install it from the Figma Community if you haven't already.
- Select a layer or design in your Figma file that you want to bring into Builder.io.
- Click the "Export Design" button within the plugin.
- Click the "View Code in Builder" button. This will open your design directly in the Builder.io Visual Editor.
- (Optional) Enhance in the Visual Editor: Use AI prompts or manual controls to add interactivity, connect data, or refine the design within Builder.
- Generate code with the CLI: Copy the provided CLI command from Builder.io and run it in your local project's terminal. The CLI will analyze your codebase and generate the integrated, production-ready code components.
The best way to understand the power of Visual Editor is to experience how it generates code that uses your components and fits your workflow.
Figma Sites is a big step forward for Figma. If you already work with the platform, you get all your favorite Figma features and a near-frictionless path to simple, real websites.
Sites fills an essential market need. But you might find the tool underpowered if your team faces the challenges of integrating designs with a complex codebase, maintaining brand consistency across an extensive application, or enabling collaboration between large, diverse teams. In those cases, Builder's Visual Editor is the enterprise-grade solution. It provides a robust, integrated visual development environment that respects your code and scales with your product.
Frequently Asked Questions: Figma Sites
What is Figma Sites?
Figma Sites is Figma's built-in website publishing tool, announced at Config 2025 and currently available as an open beta. It lets designers build and publish responsive websites — complete with animations, interactions, and a CMS — entirely within the Figma interface, without needing Webflow, Framer, or a separate developer handoff.
What can Figma Sites do today that it couldn't at launch?
Since its May 2025 launch, Figma Sites has shipped several major updates. Code Layers launched in August 2025 as a new layer type rendered by React code, letting users add custom interactivity — forms, shaders, dropdowns, and API-connected elements — directly on the canvas. The CMS launched in public beta on November 20, 2025, introducing CMS collections, CMS pages with dynamic URLs, and CMS lists for repeating content blocks. Custom domain support also shipped, and version rollback controls are now available.
What is Figma Make, and how does it relate to Figma Sites?
Figma Make is an AI-powered prompt-to-code tool geared more toward ideation and prototyping — users can input a prompt to create a web application, and developers can directly modify the generated code. Code Layers bring the power of Figma Make into Figma Sites so you can use the same AI model to generate and tweak interactive elements while working in your existing site design rather than starting from a blank prompt.
Does Figma Sites have a CMS?
Yes, as of November 2025. The Figma Sites CMS supports collections, CMS pages, and CMS lists, making it suitable for simple blogs, portfolios, and event listings. It does not yet support nested URL structures, API access, content staging, or granular editor permissions. It's a meaningful first step — enough for many marketing and portfolio use cases — but falls short of Webflow's depth for content-heavy production sites.
Can I use a custom domain with Figma Sites?
Yes. By default, Figma hosts published sites on a randomly generated figma.site subdomain, but paid plan users can connect a domain they own. Professional plans support up to 10 custom domains; Organization and Enterprise plans support unlimited custom domains. Custom domains are free of charge through 2025, with limits subject to change afterward.
What are Code Layers, and do I need to know how to code to use them?
Code Layers are interactive elements backed by custom React code in Figma Sites. You can create them from scratch, convert existing components to code layers with a single click, or chat with AI to build and tweak them — no deep technical knowledge required. That said, unlocking the full potential of code layers (custom npm package imports, complex scroll animations, 3D via @react-three/fiber) will be easier for teams with some development familiarity.
What are the current limitations of Figma Sites?
Figma Sites is still maturing. Current gaps include no e-commerce/checkout functionality, no plugin or API integration, limited multi-language support, and restricted CMS features around filters and dynamic content. SEO tooling is also limited — Figma Sites offers basic meta titles and descriptions but lacks full control over <head> tags, 301 redirects, schema markup, and sitemaps, which matters for teams investing in organic search.
Was there any criticism of Figma Sites at launch?
Figma Sites was quickly criticized by designers, developers, and accessibility experts for generating inaccessible code — a notable tension given Figma's stated mission to "make design accessible to everyone." Figma has acknowledged the feedback and has been iterating on semantic HTML output, but teams with strict accessibility requirements should test outputs carefully.
How does Figma Sites pricing work?
Figma Sites pricing starts at $16/month for a Full seat on the Professional plan, which includes access to the full Figma design tool. The CMS and hosting are included in that cost during beta. A new Content seat, starting at $8/month, gives access to Figma Buzz, Slides, FigJam, and the Sites CMS — making it easier for non-designers like marketers and content editors to update site content without needing a Full seat.
How does Figma Sites compare to Builder.io's Visual Editor?
Figma Sites is optimized for speed and simplicity within the Figma ecosystem — ideal for landing pages, portfolios, and marketing microsites built by designers who want to publish without leaving Figma. Builder.io's Visual Editor targets a different use case: teams that need their designs to integrate with an existing production codebase, a custom component library, a specific framework like Next.js, or enterprise-scale content workflows. Where Figma Sites outputs HTML/CSS (or React via Code Layers), Visual Editor generates code that uses your actual design system — your components, tokens, and conventions — and sends pull requests directly to your repo.
When should I use Figma Sites vs. Builder.io vs. Webflow?
Use Figma Sites when your team lives in Figma, the project is a self-contained marketing page or portfolio, and time-to-publish is the priority. Use Builder.io when you need generated code to integrate with a real codebase, respect your existing component library, and support both developer and content workflows on the same canvas. Use Webflow when SEO depth, complex CMS collections, advanced animation control are non-negotiable.
