Figma Sites: The built-in Figma to website tool
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 SitesFigma 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.Easy interactivity and AI-enhanced codeFigma 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.Responsive design and hands-off infrastructureFigma Sites can also display your design in desktop, tablet, and mobile layouts side by side. The preview versionand 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, Figma Sites will deploy your project to a generated URL. For a fee, you can wire up a custom domain.Coming soon: CMS and Code LayersRight 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.Going from Figma to website to complete applicationSimple 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.Visual Editor: stepping beyond simple sitesBuilder.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:Figma-like precisionVisual 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.Solving handoffsImport 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.On-brand generation, every timeStop 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.Dual workflowsBuilder 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.Smashing workflow silosVisual Editor provides a unified canvas for design, development, and content updates. It fits into existing developer workflowsrather than trying to replace them, enabling better collaboration across the entire digital team.Getting started with Visual EditorReady 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.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.ConclusionFigma 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.Further reading Introducing Visual Copilot: convert Figma designs to high quality code in a single click.Try Visual CopilotGet a demo
#figma #sites #builtin #website #tool
Figma Sites: The built-in Figma to website tool
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 SitesFigma 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.Easy interactivity and AI-enhanced codeFigma 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.Responsive design and hands-off infrastructureFigma Sites can also display your design in desktop, tablet, and mobile layouts side by side. The preview versionand 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, Figma Sites will deploy your project to a generated URL. For a fee, you can wire up a custom domain.Coming soon: CMS and Code LayersRight 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.Going from Figma to website to complete applicationSimple 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.Visual Editor: stepping beyond simple sitesBuilder.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:Figma-like precisionVisual 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.Solving handoffsImport 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.On-brand generation, every timeStop 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.Dual workflowsBuilder 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.Smashing workflow silosVisual Editor provides a unified canvas for design, development, and content updates. It fits into existing developer workflowsrather than trying to replace them, enabling better collaboration across the entire digital team.Getting started with Visual EditorReady 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.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.ConclusionFigma 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.Further reading Introducing Visual Copilot: convert Figma designs to high quality code in a single click.Try Visual CopilotGet a demo
#figma #sites #builtin #website #tool
·32 Views