Get Started with Weblify

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

Weblify Figma Plugin

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.

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 if you're unable to install certain Figma plugins.

Running the Weblify Figma Plugin ​

Once you've installed 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

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).

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

How to run Weblify inside of Figma

Activate Weblify Pro

How to buy and use a Pro license key

Using Weblify ​

Weblify Documentation

Detailed docs with short screencaps

Weblify Video Tutorials

Full step-by-step video walkthroughs

Frequently Asked Questions ​

Troubleshooting Weblify

Common issues issues you may run into

Weblify Security

Details about how Weblify works

Receipts

Find email receipts and PDF invoices

Billing

Manage your Pro subscription

License Seat Management

Manage the Figma users on your key

Weblify Free vs Pro

Compare Free vs Pro features

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.