Htmltodesign

Import any website into Figma as fully editable designs!

With html.to.design, convert any website into fully editable Figma layers. Leverage an existing website and import its HTML to Figma to start your own designs, without building each element from scratch.

This Chrome extension is a companion to the html.to.design Figma plugin, which you’ll need to install for certain features. If you are using the “Copy to clipboard” option, you do not need to run the Figma plugin — simply paste (⌘+V) your captured webpage in your canvas!

This extension also has built-in support for AI Tools like ChatGPT, Bolt and Lovable, and can directly capture their results without any extra steps. You can find the full list of AI tools supported here: https://html.to.design/docs/import-from-ai-tools

How it works:
===========

1. Install the html.to.design Chrome extension by clicking on [Add to Chrome] on this page.

2. Navigate to the page you would like to import into Figma.

3. Click on the html.to.design extension icon in your Chrome top bar.

4. Hit 'Capture' and the extension will automatically start capturing the page.

Once your webpage has been captured, there are several ways to import it into Figma:

a) Store it locally as an .h2d file that must be dropped into the html.to.design Figma plugin

b) Send it directly to the Figma plugin

c) Download it as a .make file to be used in Figma Make

d) Copy it to the clipboard to then directly paste the result in Figma

---
Notes:
In order to best map what you see in your browser to Figma, we need to access Chrome's debugging features.