How to install the html.to.design browser extension

Last updated

The html.to.design extension works in Google Chrome and the Chromium-based browsers that install extensions from the Chrome Web Store: Microsoft Edge, Brave, Arc, Opera, Vivaldi and Yandex. It is free to install. There is no Firefox or Safari version.

1. Open html.to.design in the Chrome Web Store

Go to html.to.design in the Chrome Web Store.

2. Add the extension

Click Add to Chrome (in Edge, Brave or Opera the button may say Get or Add to browser).

The html.to.design listing in the Chrome Web Store, with its rating, its users and the Add to Chrome button.

Your browser lists what the extension can access. Click Add extension to continue.

Chrome's Add html.to.design? dialog listing the extension's permissions, with the Add extension button.

3. Pin it to your toolbar

Click the puzzle-piece Extensions icon in the top-right corner of your browser, then the pin next to html.to.design. Its icon now stays in your toolbar, one click away.

4. Capture your first webpage

Open any webpage and click the html.to.design icon. Tick the viewports and themes you want, then click Capture Full Page.

The html.to.design extension popup with Browser (1440px) and Browser theme ticked, ready to capture.
The extension popup: pick viewports and themes, then capture.

Next, choose where the capture goes: straight onto your Figma canvas, into the Figma plugin, or into a local file.

ℹ️ Some actions need an account. See Sign in to the extension.

Permissions, explained

The extension starts with access to the tab you capture only. It asks for more, site by site, when a capture needs it:

  • Access to a website: to capture a large embedded frame from another domain, or to keep recording a flow on a new site. Pick On <domain>, On all <domain> sites or On all websites, then Grant access.
  • Allow access to file URLs: to capture local .html files and local PDFs. Turn it on from chrome://extensions, under Details for html.to.design.
  • Debugger: while a capture runs, your browser shows a “started debugging this browser” bar. html.to.design uses it to read the page exactly as it is rendered. Closing the bar stops the capture.

FAQ

Can I install html.to.design in Firefox or Safari?

No. The extension is built for Chromium browsers and installs from the Chrome Web Store. In Safari, you can still drop .h2d files captured elsewhere onto your Figma canvas with the plugin open.

Why does the extension ask for access to a website?

The extension only reads the tab you capture. When a capture needs more, such as an embedded frame from another domain, it asks for access to that site, all its subdomains or all websites; you choose.

How do I capture a local HTML or PDF file?

Open the extension's details page in your browser and turn on Allow access to file URLs, then reload the file and open html.to.design again.