With html.to.design, convert any website into fully editable Figma designs. 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, and you’ll need to install the html.to.design Figma plugin too.

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 support 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. The extension will automatically start capture the page.

The result can be:

a) Stored locally in a .h2d file that must be drag-and-dropped to the html.to.design Figma plugin.

b) The result can be sent directly to the Figma plugin once you selected the option.

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