HTML.to.design for UX Research: How to Save Website Layouts as Figma Files

To save a website layout as a Figma file with html.to.design, use its Figma plugin to import a publicly accessible URL. If the page requires a login, sits on a private network, or must be captured in a particular browser state, capture it with the html.to.design browser extension and send the result to the plugin or save it as an .h2d file. For a saved page or archive, use the plugin’s File tab. These workflows are described by html.to.design; editable layers are a vendor-described capability, not a fidelity guarantee independently verified here.

Choose the right capture route

Situation	Route	What to consider
Public page that loads without your browser session	Plugin Web tab and URL	Import a single page or use the product’s bulk-import option.
Login, private network, CAPTCHA-completed state, generated preview, or a particular browser state	Browser extension	Capture what is visible in the browser; choose whole-page or selection capture.
Saved webpage, HTML, email, or archive	Plugin File tab	Use a supported format; external assets referenced from HTML may not be available.

The plugin route is convenient when the page is public and its URL represents the state you want. Extension capture gives you access to pages that depend on the browser session or state, including a language selection the URL import cannot select. The extension documentation lists Chrome, Edge, Brave, Opera, Arc, and other Chromium-based browsers; check its current compatibility guidance if your browser differs.

Import a public website URL into Figma

In Figma, open the Actions menu, search Plugins & widgets for html.to.design, and run it.
Open the plugin’s Web tab and paste the public page URL.
Choose the viewport, theme, and other available import settings that match the reference you need.
Start the import and review the resulting design layers on the Figma canvas.
Record the source URL and the viewport or state you imported if other researchers will compare the result later.

The vendor describes options such as multiple viewports, light and dark themes, local styles, auto layout, missing-font handling, multilingual imports, and prototype-related features. Availability and behavior can change; consult the product documentation for current controls. Imported layers can be useful for inspecting and adapting a layout, but do not assume an import reproduces every responsive breakpoint, interaction, or visual detail exactly.

Capture a private or stateful page with the browser extension

Install the html.to.design extension in a supported Chromium-based browser.
Open the page in the browser and sign in or establish the state you want to document. Complete any legitimate access challenge yourself; the extension workflow is for capturing the page visible to you.
Use the extension to capture the full page or a selection.
Transfer the capture using one of the available workflows: send it directly to the plugin, save and drop the .h2d file into the plugin, or use the clipboard copy/paste workflow described in the vendor’s blog.
Review the imported result and note any content that only appeared after scrolling, interaction, or a particular session state.

Use this route for internal or private-network pages, logged-in views, CAPTCHA-completed pages, undeployed generated previews, or other states the URL importer cannot represent. The extension captures a browser-visible state; it does not turn the result into validated UX research by itself.

Import a local file

Open the plugin’s File tab and drop in a supported file. The official guide lists .h2d, .html/.htm, ZIP archives, .eml/.emlx/.msg email files, and .mhtml/.mht web archives. The vendor recommends .h2d because it contains the information needed to recreate the webpage. ZIP uploads should be smaller than 32 MB.

An HTML file may refer to stylesheets, scripts, fonts, or images hosted elsewhere. Those assets may fail to import when they are unavailable to the plugin, so use an archive or .h2d capture when you need a self-contained representation. Check the current file-import guide for supported formats and limits.

Make the capture useful for UX research

Set a consistent viewport. Compare pages at the same width and height; otherwise responsive layout changes can look like design differences.
Capture the relevant state. Record theme, language, account state, and any interaction needed to reach the page.
Keep provenance. Add the source URL and capture date to your research notes or Figma page description.
Separate observation from interpretation. Imported layers show a captured design reference; they do not establish why users behave a certain way.
Check the result. Inspect fonts, images, spacing, long pages, and dynamic sections before using the capture as a comparison artifact.
Respect access and use rules. Capture only pages you are authorized to access and use in your research.

Or skip the browser setup

For a clean screenshot of a public URL, ScreenshotNeo is a website screenshot API and MCP server for developers. It can provide a visual reference alongside a Figma import; it does not convert a screenshot into editable Figma layers. One GET request returns an image or PDF. See the ScreenshotNeo API documentation for parameters and response details.

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

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

ScreenshotNeo removes supported cookie and consent banners, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server includes take_screenshot, get_page_info, and capture_pdf for AI agents. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.

Performance, reliability, and cost

Import time and result quality depend on the page, its assets, and the chosen route. Dynamic content, unavailable external resources, font substitutions, or a page that changes after capture can affect what you receive. For repeatable comparisons, use the same viewport and state, and retain the source and capture date. The reviewed material provides no independent benchmark or guarantee of exact fidelity.

The html.to.design product page describes a free plan with up to 10 imports every 30 days and a Pro plan with unlimited imports subject to a fair-use policy that states a typical individual-use limit of 1,000 imports per month. Plan terms can change; verify current details on the vendor’s page before relying on a quota.

Troubleshooting

Symptom	Likely cause	What to try
The URL import cannot reach the page	The page requires a login, private network access, or browser state.	Open it in your browser and use the extension capture workflow.
The imported page shows the wrong language or state	The state may be stored in the browser rather than encoded in the URL.	Set the desired state in the browser, then capture with the extension.
Images, CSS, or fonts are missing from a local HTML import	Referenced resources are external or unavailable.	Use a self-contained archive or an `.h2d` capture; verify resource paths are accessible.
A ZIP file is rejected	The archive exceeds the documented 32 MB limit or is not a supported import.	Reduce its size and confirm the format in the current file-import guide.
The Figma result differs from the live page	Responsive rules, dynamic content, fonts, or interactive state can alter the rendering.	Match the viewport and state, then review the capture as a reference rather than a pixel-perfect guarantee.
The extension is unavailable in your browser	The browser may not be Chromium-based or compatibility may have changed.	Check the current extension compatibility information or use the plugin URL route for a public page.

FAQ

Does html.to.design create an editable Figma file?

The vendor describes the result as editable design layers. Treat that as a product capability, not a promise that every page element will import perfectly.

Can I capture a page after logging in?

Use the browser extension to capture the page visible in your authenticated browser session, then transfer the capture to Figma.

Can I import a whole site at once?

The product overview describes bulk import. For research comparisons, select the pages and states relevant to the question and keep their capture conditions consistent.

Is a screenshot enough to support a UX conclusion?

No. It is a visual reference. Combine it with the research evidence needed to support the conclusion.

Sources

html.to.design product overview
Official documentation for plugin workflow, extension capture, file formats, and product capabilities.
html.to.design pricing for current plan details.