Figma Site Builder

Preview

Figma Site Builder

Figma Website Builder

The Site Builder is a powerful component for rapid website prototyping. It leverages all advanced Figma features and Frames X UI kit functionality to streamline the website creation process.

With the website builder component, you can stack multiple layouts and swap between variants from a single source. For a better understanding, you can see this Website Builder Demo Video.

The website builder allows you to easily create website layouts by accessing multiple layout categories available in the Frames X UI kit. This includes:

Articles, Blog, Calendar, Checkout, CTA, E-commerce, Features, Forms, Gallery, FAQ, Hero, Footer, Navigation, Page Header, Pricing, Social Proof, and Stats.

By combining layouts from these categories, the Site builder makes it super easy to create website design. Additionally, you can make any website with Site Builder responsive by applying Breakpoints Variables.

How to use Figma Website Builder?

Select the Site Builder component and place it inside a frame;
Set frame to vertical auto-layout;
Add Responsive Variables and select layout type for added instance;
Duplicate the site builder component to build your layout.

The Site Builder is one component whose variants swap between every Website Builder layout category — navigation, hero, features, pricing, testimonials, FAQ, footer and more — so a page is a vertical stack of instances that become responsive through the kit's breakpoint variables.

Site Builder AI Prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build a website builder component in Figma. SiteBuilder: one component set with a Category property — Navigation, Header, Hero, Features, Stats, Testimonials, Pricing, FAQ, CTA, Blog, Contact and Footer — and a Layout property of 01 to 06 within each category, each variant an instance of the matching block from the kit at full width. Add a Breakpoint property of Desktop, Tablet and Mobile bound to the breakpoint variables so switching the page frame's mode reflows every stacked block. Usage frame: a 1440px page in vertical auto layout holding Navigation, Hero, Features, Pricing, FAQ and Footer instances, demonstrating that swapping a block's Layout from 01 to 03 rebuilds the section in place, and the same page duplicated at 768 and 375 with the mode switched. Include a cheat-sheet frame listing the four steps — place the component in a frame, set the frame to vertical auto layout, pick the breakpoint mode and layout, duplicate to add sections — and keep every block a nested instance so edits to the source blocks flow into every page.

Source