---
url: "/weblify/build/site-builder.md"
description: "Create Weblify pages from templates, sections, elements, and responsive layout primitives."
---

# Build a website in Figma

> Create Weblify pages from templates, sections, elements, and responsive layout primitives.

Weblify's **Build** tab creates website pages as editable Figma layers. The generated layers keep Weblify metadata so the plugin can preview, audit, and export them as a static website.

## Start a page

1. Open the **Build** tab.
2. In **Start**, enter a page name and select **Blank Page**, or choose a complete starter template.
3. Select the generated page on the Figma canvas before adding content.

If nothing is selected, Weblify uses the first Weblify page it finds or creates a page named **Home**. The **Build target** at the top of the plugin shows where new content will be inserted.

## Add sections and elements

Use **Sections** for complete page areas such as navigation, hero, content, pricing, forms, and footers. Use **Elements** for individual components.

Select a Weblify page, section, or content area before inserting an item. This gives Weblify a predictable parent and keeps the exported structure intact.

## Edit the structure

The **Structure** tab contains page, layout, and responsive settings. You can:

- Add pages and edit their URL and search metadata.
- Add sections, containers, rows, grids, and content areas.
- Configure responsive stacking and layout behavior for selected Weblify layers.

Page metadata includes the title, description, canonical URL, social sharing fields, favicon, Twitter card type, and robots setting.

## Apply styles and images

Open **Styles** to review the brand colors, typography, spacing, and radius tokens used by generated content. The **Images** view lists placeholder images so you can replace them with real image URLs before export.

Use **Preview site** to check the current website without leaving the builder.