Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

To save a website layout as editable Figma layers, use html.to.design’s Figma plugin for a publicly accessible URL. If the page requires a login, is on a private network, or needs to be captured in a particular browser state, capture it with the html.to.design browser extension instead. You can also import supported local files. The vendor describes the output as editable; that is not a guarantee that every page will reproduce perfectly.

Choose the right import route

Route Use it when How the capture reaches Figma
Plugin URL import The page is publicly accessible and its URL opens the state you want. Paste the URL in the plugin’s Web tab and import. The product overview says it supports one page or pages in bulk. html.to.design product overview
Browser extension The page needs a login, is on a local or private network, or must be captured in its current browser state. Send the capture to the plugin, save an .h2d file and upload it, or use the clipboard workflow described in the vendor’s blog. Extension documentation · Product blog
Local file You already have a webpage file, archive, email file, or .h2d capture. Open the plugin’s File tab and drop in a supported file. Local-file guide

The extension is also the route the vendor documents for pages after solving a CAPTCHA, language states that cannot be selected through URL import, and generated previews that have not been deployed to a public URL. Its install guide lists Chrome, Edge, Brave, Opera, Arc, and other Chromium-based browsers; check the current guide if your browser is not listed. Extension documentation · Extension install guide

Import a public webpage through the Figma plugin

  1. In Figma, open the Actions menu, search Plugins & widgets for html.to.design, and run the plugin. The vendor’s guide recommends starting in the Web tab. html.to.design guide
  2. Paste the publicly accessible page URL into the Web tab.
  3. Choose the available import options for the page you need, such as viewport, theme, and other settings shown by the plugin.
  4. Run the import, then inspect the resulting layers in Figma. If the page requires a session, depends on a private network, or is showing the wrong language or state, use the extension route instead.

The vendor lists additional options such as multiple viewports, dark and light themes, local styles, auto layout, missing-font handling, multilingual imports, and prototype-related features. These are product-described capabilities, not independently verified guarantees about the fidelity of any particular site. html.to.design product overview

Capture a browser-visible page with the extension

  1. Install the html.to.design extension in a supported Chromium-based browser using the vendor’s install guide. Extension install guide
  2. Open the page and put it into the state you want represented—for example, sign in, select a language, or dismiss an overlay if that is part of the reference you need.
  3. Use the extension to capture the whole page or a selection.
  4. Transfer the capture by sending it directly to the plugin, downloading an .h2d file and dropping it into the plugin, or using the clipboard copy-and-paste workflow described by the vendor’s blog. Extension documentation · Product blog

Use this route when the browser can reach a page that the plugin’s URL import cannot access, or when the current browser state matters. A capture records a visual state; it should not be treated as proof of how users experience the page or as validated UX research by itself.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Import a supported local file

In the plugin, open the File tab and drop in a supported file. The official guide lists .h2d, .html or .htm, ZIP archives, .eml, .emlx or .msg email files, and .mhtml or .mht web archives. It recommends .h2d because that format contains the information needed to recreate the webpage. ZIP uploads should be smaller than 32 MB. Local-file guide

An HTML file may refer to images, stylesheets, or scripts hosted elsewhere. If those resources are unavailable when imported, they may not come through. For a page you can open in a browser, the extension can be a more practical choice than relying on incomplete local assets.

Turn the capture into useful UX research material

  • Capture comparable states consistently: use the same viewport and theme when comparing pages or versions.
  • Keep context with the Figma file: note the source URL, capture date, viewport, and any interaction or authentication state that affects what is visible.
  • Separate observation from interpretation: imported layers provide a visual reference to inspect and annotate; they do not establish why a design choice was made or how users respond to it.
  • Check text, fonts, imagery, spacing, and responsive behavior against the live page before relying on the import for detailed analysis. html.to.design describes editable output, but no exact-fidelity guarantee is established.

Plans and import limits

At the time reflected on html.to.design’s product page, the free plan is described as allowing up to 10 imports every 30 days. Pro is described as unlimited imports subject to a fair-use policy, with typical individual use limited to 1,000 imports per month. These are vendor-stated plan terms and can change; confirm the current limits on the product page before planning a project. html.to.design plans

Troubleshooting common import problems

  • The plugin cannot reach the page: If it needs a login, is on a private network, or depends on browser state, open it in a supported browser and capture it with the extension.
  • The wrong language or state appears: Set the intended state in the browser first and use the extension; the vendor specifically documents this for states URL import cannot select.
  • A local HTML import is missing images or styling: Check whether referenced external resources are available. The local-file guide warns that unavailable images, CSS, or JavaScript may not import successfully.
  • A ZIP will not upload: Confirm it is smaller than the guide’s 32 MB limit, or try the recommended .h2d format if you have a capture in that format.
  • The Figma result differs from the live page: Inspect fonts, assets, responsive layout, and dynamic content against the browser view. The vendor describes editable layers and related options, but not guaranteed exact fidelity or reliable capture of every interaction.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Or skip the browser setup

If you need a screenshot file rather than editable Figma layers, ScreenshotNeo can return an image or PDF from one GET request. This does not replace html.to.design when you specifically need a Figma import. ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before the shot; bot checks, blank pages, and failed loads are never billed. It also provides an MCP server for AI agents, and includes 1,000 screenshots a month free with no card; paid plans start at $5 for 3,000. See the ScreenshotNeo API documentation.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

ScreenshotNeo offers PNG, JPEG, WebP, or PDF output. Sign up for 1,000 free screenshots a month, with no card required.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.