To turn a web page into editable Figma layers, use the html.to.design Figma plugin’s Web tab for a publicly accessible URL. For a page behind a login, on a private network, or in a particular browser session, capture it with the html.to.design browser extension and send it to Figma or import its downloaded .h2d file. The imported design is a starting point to edit—not a guarantee that every page will reproduce perfectly.
Choose the right way to import the page
| Page you need to capture | Recommended route | Why |
|---|---|---|
| Public page with an open URL | Figma plugin, Web tab | Paste the URL and import it directly. |
| Login-required, private-network, or session-specific page | html.to.design browser extension | Capture the page in the browser state you need, then send it to the plugin or save a .h2d file. |
| Downloaded or locally stored page | Plugin file import | Supported types include .h2d, HTML, ZIP, email files, and MHTML. |
html.to.design describes its product as a Figma plugin and browser extension that converts websites into editable Figma designs. Its documentation does not establish an independent fidelity score, so inspect the imported result before relying on it for a redesign or specification.
As an Amazon Associate I earn from qualifying purchases.
Import a public web page by URL
- Open Figma and launch the html.to.design plugin.
- Select the Web tab and paste the page’s URL.
- Choose the options that match the design you want to work on, such as viewport size and theme. The plugin documents desktop, tablet, and mobile sizes, plus light and dark themes.
- Enable local styles or auto layout if useful for your workflow. The vendor says text and color styles can be created as local Figma styles.
- Run the import, then inspect the resulting frame and layers before editing.
For a useful comparison, import the same page at the viewport and theme you intend to redesign. Desktop and mobile layouts can differ substantially; a single capture should not be treated as a representation of every responsive state.
Capture a private or session-specific page
- Open the required page in your browser and make sure it is in the state you want captured—for example, after signing in or selecting a particular view.
- Use the html.to.design browser extension to capture the full page or a selected area.
- Send the capture directly to the Figma plugin, or download the
.h2dfile and drop it into the plugin for import.
The vendor guide says direct sending requires you to be logged into a Figma account during capture. If you are not, use the downloaded .h2d transfer route instead.
#1 Best Overall
Import a saved file instead of a live URL
The plugin documentation lists these local import formats:
.h2d— the recommended format; the vendor says it contains the information needed to recreate the page..htmland.htm- ZIP archives containing web pages; the guide says ZIP files should be under 32 MB.
- Email files:
.eml,.emlx, and.msg. .mhtmland.mht.
An HTML file may rely on external images, stylesheets, or scripts that are unavailable during import. If assets are missing or the page does not reconstruct correctly, the vendor recommends using its browser extension to capture the page.
When the import shows only part of a long page
html.to.design says it captures the full length of a webpage, but also documents cases where a site’s body height, scrolling behavior, or item display causes the result to show only the visible portion. Its suggested workaround is to use the extension with a very tall viewport:
- Install or open the html.to.design browser extension.
- Open browser developer tools and enable device mode.
- Set the viewport height to a very large value.
- Capture the full page with the extension.
- Import the resulting
.h2dfile into the plugin.
This is the vendor’s documented workaround, not a guarantee for every site. Check the imported frame for missing sections, repeated content, or layout changes caused by the unusually tall viewport.
What to check in the editable Figma result
- Page coverage: confirm the capture includes the sections you need, especially below the fold.
- Responsive state: confirm the imported viewport is the intended desktop, tablet, or mobile size.
- Theme: check light or dark appearance against the source state you want to reproduce.
- Assets: look for missing images or styling, particularly when importing HTML that depends on external resources.
- Layer structure: inspect text, colors, and layout before turning the import into reusable components or local styles.
The vendor describes the output as editable, but its documentation also notes page-height and external-resource limitations. Treat the import as a working design base and correct discrepancies in Figma.
Or skip the browser setup
If you need a clean image capture rather than editable Figma layers, ScreenshotNeo can return a webpage screenshot with one GET request. It does not convert screenshots into Figma layers; use html.to.design when editable layers are the goal.
For example, this cURL command saves a WebP screenshot of Stripe:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. Before the capture, it accepts the cookie or consent banner as a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. An MCP server provides screenshot, page-info, and PDF tools for AI agents. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo’s free plan to try 1,000 screenshots a month with no card.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Pricing and import limits
html.to.design’s current product pages state an allowance of up to 10 imports every 30 days on the free plan and a Pro fair-use cap of 1,000 imports per month. The pages do not state a publication year for these figures, and plan terms can change; check the vendor’s current plan terms before relying on a limit. The reviewed documentation does not establish current paid prices.
Frequently Asked Questions
Can html.to.design import a website that requires a login?
Yes. Use the browser extension to capture the page while it is open in the required browser session, then send it to Figma or import its .h2d file.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsDoes importing a page make every element pixel-perfect and editable?
The vendor describes the design as editable but documents limitations involving external resources and unusual page height or scrolling. Inspect and adjust the imported layers rather than assuming a perfect reproduction.
Can I import a local HTML file?
Yes, the plugin lists .html and .htm among its accepted formats, but external images, CSS, or JavaScript may not be available to the import. The vendor recommends the extension when those resources cause problems.
Quick Recap
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.
