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 and 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

Build a Website

Create editable website pages from templates, sections, and elements

Import a Website

Copy a page or selected element with the free Chrome extension

Audit & Export

Validate and download a static HTML and CSS website

Inspect Figma Layers

Generate HTML, Tailwind, React, or Vue code from a selected layer

Frequently asked questions

Troubleshooting Weblify

Common 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

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