Utility components
Sitebuilder
Mock up a full website wireframe in minutes with the Frames For Figma Sitebuilder, one component that holds every section category of the UI kit.
The Sitebuilder (on 📕 Utility components → ↳ Sitebuilder) is one component that holds every section category of the kit: headers, heroes, features, pricing, FAQs, footers and 26 more. Stack a few Sitebuilders, pick a category for each and switch between layouts, and you have a page wireframe in minutes.
How it works
Section titled “How it works”The Sitebuilder has two properties of its own:
| Property | Options | What it does |
|---|---|---|
| Type | 404 Page, Blog, Call to action, Coming soon, Contact, Content, Ecommerce, Event, FAQ, Features, Footer, Gallery, Header, Hero, Image Group, Login, Media, Menu, Notification, Portfolio, Pricing, Process, Products, Profile, Schedule, Services, Sliders, Social Proof, Success, Squeeze Pages, Taxonomy, Timeline | Picks the section category. |
| Mobile | No, Yes | Yes shows the Mobile version. |
Inside, each category is a template section from the 📙 Website templates pages. The Sitebuilder shows that section’s own properties right under its own, so you can pick the layout (for example Type: Hero Golf) without digging into the layers.
Build a wireframe
Section titled “Build a wireframe”-
Open the page where you design, for example 📗 Website design → ↳ Wireframe, and create a frame as wide as your website: 1320 px for Desktop or 422 px for Mobile. Give it a vertical auto layout with no gap.
-
Drag a Sitebuilder from the Assets panel into the frame. It starts as a header.
-
Duplicate it (Cmd+D on a Mac, Ctrl+D on Windows) for each section of your page.
-
Select each Sitebuilder and pick its category in Type: Header, Hero, Features, Social Proof, Call to action, Footer…
-
Under the category’s own properties, change its layout until you like it, for example from Hero Golf to Hero Alpha.
-
For the mobile version, duplicate the frame, resize it to 422 px and set Mobile to Yes on every Sitebuilder.
The playground on the Sitebuilder page has one Sitebuilder to try this with. Below it, Component variations shows every category in Desktop and Mobile.
From wireframe to design
Section titled “From wireframe to design”A Sitebuilder wireframe already uses your colors, fonts and spacing. When the structure is settled:
- Replace the sample text and images. Every text and image layer is editable in place.
- Change your logo and menu once, on the Identity and Navigation pages.
- Copy the wireframe to ↳ Final design and keep refining it there.
Good to know
Section titled “Good to know”- The section names in the Sitebuilder match the website templates, so a developer can find the same layout in Frames.
- Need a layout the Sitebuilder doesn’t have? Place an empty Section and build it yourself.