Web to Figma - Convert any website or HTML code to design

About this plugin

Web to Figma converts any website or HTML code to fully editable Figma designs.

Web to Figma is your go-to plugin to convert, collect and save, website design inspirations into Figma as fully editable components.

How it works

Web to Figma lets you import full website or HTML code into an editable Figma file using the plugin, or import specific components from a website, using our Chrome Extension.

Import webpages using the plugin:

1. Install the plugin

2. From within any file, run the plugin by going to Plugins menu and selecting Web to Figma

3. In the Import tab of the plugin, enter the URL of the webpage that you want to import.

4. Choose the relevant settings

5. Click on Import

Import components or websites using the Chrome Extension:

1. Install the Web to Figma Chrome Extension from Chrome Web Store

2. Go to any website in your Chrome Browser

3. Invoke the extension, and then choose if you want to capture the entire page design or a single component

4. Once the extension captures the page, save the page/component to a Collection

5. Go to Figma and run the plugin

6. Go to the Collections tab of the plugin

7. Find your latest capture and click on Add to Figma

Benefits

1. Create a library of website design inspirations using collections

2. Create a mood-board

3. Collaborate with developers by importing their HTML code implementation and comparing against the reference design

4. Learn how some of the more complex websites have been structured

5. Quickly explore various design patterns when solving a new task

Web to Figma Pro Feature Benefits:

The PRO plan caters to designers leveraging the plugin extensively, aiming to enhance and accelerate their design workflow.

Upgrade to Web to Figma PRO to enjoy limitless website or HTML imports, advanced functionalities, and be among the first to access our latest features to level up your design game.

Features include:

1. Unlimited exports
2. Unlimited collections
3. Icon imports
4. Style imports
5. Custom viewport sizing
6. Priority support
7. Early access to upcoming features

Support:

💬 Having issues? Talk to us on Discord