---
url: "/weblify/overview/quickstart.md"
description: "Inspect your Figma layers as clean HTML, Tailwind, React or Vue code in one click."
---

# Get Started with Weblify

> Inspect your Figma layers as clean HTML, Tailwind, React or Vue code in one click.

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

## 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 & 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

  - [Weblify Documentation](/weblify/inspect/layers.md): Detailed docs with short screencaps
  - [Weblify Video Tutorials](/weblify/tutorials.md): Full step-by-step video walkthroughs

## Frequently Asked Questions

- [Troubleshooting Weblify](/weblify/faq/troubleshooting.md): Common issues 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

- Inspect a Figma layer's markup and styles with one click.
- Toggle between HTML/CSS, Tailwind, React or Vue code output.
- Integrates with Figma's native "Dev Mode" inspector panel.
- Supports auto-layout, wrapping and min/max Figma properties.
- View a live HTML preview of your HTML in the plugin.
- Instantly copy code directly to your clipboard.
- Download your code component as a .zip file.
- Includes assets folder if your layers contain images.
- No external APIs or logins required.