---
url: "/weblify/overview/quickstart.md"
description: "Build, preview, inspect, and export websites with Weblify, or copy existing pages into Figma with the Weblify Chrome Extension."
---

# Get started with Weblify

> Build, preview, inspect, and export websites with Weblify, or copy existing pages into Figma with the Weblify Chrome Extension.

[![Weblify Figma Plugin](https://www.hypermatic.com/weblify.jpg)](https://www.figma.com/community/plugin/927336249307137996)

## Installing the Weblify Figma Plugin

1. Open any Figma file.
2. Click on the **Actions** icon in the bottom Figma toolbar.
3. Click the **Plugins & Widgets** tab to filter results to Figma plugins.
4. Search for **Weblify** in the search bar.
5. Click on the **Weblify** search result.
6. Click the **Save** button to install the Weblify plugin.

> **Note:** Figma users in a **Figma Organization** may only be able to install approved plugins. Please contact your Figma Org admin at your company to [approve the Weblify plugin](https://help.figma.com/hc/en-us/articles/4404228724759-Manage-plugins-and-widgets-in-an-organization) if you're unable to install certain Figma plugins.

## Running the Weblify Figma Plugin

Once you've [installed](#installing-the-figma-plugin) the **Weblify** Figma plugin, to run the plugin in your Figma file:

  1. **Right-click** anywhere on your Figma file's page canvas
  2. Hover your mouse over the **Plugins** ▶ menu item
  3. Hover your mouse over the **Saved plugins** ▶ menu item
  4. Click on the **Weblify** plugin menu item

> **Tip:** After you've run the **Weblify** plugin once in a Figma file, you'll be able to quickly re-launch it by clicking the **Weblify** icon in the right-hand side Figma column (under the **Plugin** subheading).

> **Warning:** Only Figma users with **Edit** access to a Figma file can run a Figma plugin in that Figma file; if you only have **View** permissions, you won't be able to run any Figma plugins in that file.

## Install and activate Weblify

- [Install & Run the Figma plugin](/weblify/overview/install.md): How to run Weblify inside of Figma
- [Activate Weblify Pro](/weblify/overview/pro.md): How to buy and use a Pro license key

## Using Weblify

  - [Build a Website](/weblify/build/site-builder.md): Create editable website pages from templates, sections, and elements
  - [Import a Website](/weblify/advanced/import-website.md): Copy a page or selected element with the free Chrome extension
  - [Audit & Export](/weblify/build/export.md): Validate and download a static HTML and CSS website
  - [Inspect Figma Layers](/weblify/inspect/layers.md): Generate HTML, Tailwind, React, or Vue code from a selected layer

## Frequently asked questions

- [Troubleshooting Weblify](/weblify/faq/troubleshooting.md): Common issues you may run into
- [Weblify Security](/weblify/faq/security.md): Details about how Weblify works
- [Receipts](/faq/receipts.md): Find email receipts and PDF invoices
- [Billing](/faq/billing.md): Manage your Pro subscription
- [License Seat Management](/faq/seats.md): Manage the Figma users on your key
- [Weblify Free vs Pro](/weblify/faq/plans.md): Compare Free vs Pro features

[Video](https://www.hypermatic.com/assets/videos/weblify/WEBLIFY_DEMO.mp4)

## Weblify features

- Create editable website pages from templates, sections, elements, and responsive layouts.
- Copy public or logged-in websites into Figma with the free Chrome extension.
- Preview generated website output at different viewport widths.
- Audit and export Weblify pages as a static HTML and CSS website.
- Inspect selected Figma layers as HTML/CSS, Tailwind, React, or Vue code.
- Copy generated code or download a component ZIP with its image assets.
- Work with Figma auto layout, wrapping, and min/max layout properties.
- Use Weblify's code inspection tools from Figma Dev Mode.