Weblify's Add, Navigator and Style tabs create and edit 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 Navigator tab, enter a name in New page name and select Add page. Or open the Add tab, choose Templates and select a template to add it as a new page named after the template.
2. Select the generated page on the Figma canvas, or select it in Navigator, before adding content.

If nothing is selected, Weblify uses the first Weblify page it finds or creates a page named Home. The line below the filters in the Add tab shows where new content will be inserted.

Add sections and elements

The Add tab is one searchable library. Use the Templates, Sections, Elements and Layouts filters, or search by name. Use Sections for complete page areas such as navigation, hero, content, pricing, forms, and footers. Use Elements for individual components. Select an item to insert it.

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

Star an item to add it to Favourites. To reuse one of your own sections, open its ⋯ menu in Navigator and choose Save to My sections; it then appears under My sections in the Add tab.

Edit the structure

The Navigator tab lists your pages and the sections on the current page. You can:

• Add pages, drag pages and sections to reorder them, and use the ⋯ menu to rename, duplicate, hide or delete them or set the homepage.
• Select the ⚙ button beside a page to edit its URL and search metadata, then select Save page.
• Use a section's ⋯ menu to show it on every page as the header or footer.

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

To configure how a selected section, row, grid or column adapts on tablets and phones, open the Style tab and expand Responsive.

Apply styles and images

Open the Style tab and expand Brand styles to review the themes, colours, typography, and corner radius used by generated content. Expand Images to list placeholder images so you can replace them with real image URLs before export.

Open the Preview tab to check the current website without leaving the plugin.