How to Convert a Full Web Page to Editable Figma Layers with HTML.to.design

To convert a full web page into editable Figma layers, use the Web tab in the html.to.design Figma plugin for a public page. Paste its URL, choose the viewport and theme, adjust any import options you need, and import. For a page that requires a login, lives on a private network, or must be captured in a particular browser session, use the html.to.design browser extension and import its capture into the plugin.

This produces editable design layers, which is different from placing a screenshot in Figma. A screenshot can be useful as a visual reference, but it does not turn the page’s text, images, and layout into editable layers. The html.to.design vendor describes its plugin and browser extension as converting websites into editable Figma designs; the result can still vary with page behavior and resource availability. See the product overview.

Choose the right import route

Your page	Use this route	Why
Public page with an open URL	Figma plugin, Web tab	Paste the URL and import directly.
Page behind a login or on a private network	Browser extension	Capture the page from the browser session where you can access it.
Local preview or a particular signed-in state	Browser extension	Capture what is visible in that browser state without publishing the page.
Page already saved as a supported file	Figma plugin, File tab	Import an .h2d, HTML, ZIP, email, or MHTML file where supported.

The plugin’s Web tab is intended for publicly accessible URLs. The extension can capture pages that require a login, VPN, or specific session state; it can send the capture to the plugin or save an .h2d file for later import. Extension guidance · Private-page workflow.

Import a public page by URL

Open Figma and launch the html.to.design plugin.
Choose the Web tab and paste the complete public page URL, including the path and any query string needed to reach the intended page.
Choose the viewport and theme for the design you want to inspect. If the page has responsive layouts or light and dark modes, import the relevant combinations separately.
Review the plugin’s import settings. Enable local styles or auto layout if those options suit the redesign or handoff you are preparing.
Start the import, then inspect the result in Figma before using it as a design source.

The vendor documents desktop, tablet, and mobile viewport choices, light and dark themes, optional local styles, and optional auto layout. These options change what you import; they are not a guarantee that every site-specific behavior will reproduce identically. Overview of import choices · Feature details.

Pick a viewport that answers your design question

For a desktop redesign, start with the desktop layout. For responsive work, import desktop and mobile separately so you can compare the page at each breakpoint. The documented mobile preset is 390 pixels wide; the length is determined by page content. The vendor says custom mobile width is available to Pro subscribers. Mobile import instructions.

For a page with a theme switch, import both light and dark versions if both are relevant. A theme may depend on browser or site state; inspect what the imported design actually contains before treating it as a complete theme specification.

Decide whether to create local styles and use auto layout

Local styles can make it easier to reuse or change imported text and color styles in the Figma file. Auto layout can make imported structures easier to work with when adjusting spacing or content. Treat both as import choices: review the resulting layers and styles and decide whether they fit your Figma file’s conventions. The vendor documents the options, but does not provide independent fidelity scores for different settings. Documented features.

Capture a private or session-specific page

Install the html.to.design browser extension and sign in to the site in your browser, if required.
Navigate to the exact page and state you want to capture. Dismiss dialogs or choose the language, theme, and account state before capture if those should appear in the design.
Open the extension and capture the whole page or a selection. Choose either direct transfer to the Figma plugin or a downloaded .h2d file.
For direct transfer, open the html.to.design plugin and check its Extension tab. The vendor says direct sending requires you to be logged in to Figma during capture.
For a local file, open the plugin’s File tab or drop the .h2d file into the plugin, then import it.
Choose the import settings, map any missing fonts if needed, and inspect the resulting layers.

The extension route is suited to pages behind a login, on a VPN, or in a specific browser state. If keeping the capture local matters, the vendor recommends downloading the .h2d file; its private-page guide says the locally stored file does not reach its servers. Private-page and file workflow.

Import from a saved file

In the plugin’s File tab, upload or drop a supported file. The vendor lists .h2d, .html/.htm, ZIP files containing webpages, .eml/.emlx/.msg email files, and .mhtml/.mht files. It recommends .h2d because it contains the information needed to recreate the webpage. ZIP files should be under 32 MB. Supported file types and instructions.

HTML files can reference images, CSS, or JavaScript that are not included locally. The plugin may be unable to retrieve external resources that are unavailable or inaccessible. If preserving the rendered page matters, use the extension to capture the page in the browser or package the resources with the HTML in a ZIP file where appropriate.

Make the imported design useful

Check the frame and page coverage. Confirm that the imported design includes the sections you expected, including content below the fold.
Check the viewport and theme. Compare the imported canvas with the intended browser size and visual state.
Inspect typography. Look for missing or substituted fonts, and map or install fonts when the plugin indicates they are missing.
Review images and other assets. Check for broken, absent, or low-resolution assets before handing off the design.
Organize the layers. Rename, group, or componentize the parts you intend to edit. Keep a reference copy of the initial import if you need to compare later changes.
Make edits in Figma. Use the imported layers as a starting point for copy, colors, layout, or collaboration, rather than assuming the imported file is a production-ready design system.

Imports can be useful starting points without being exact reproductions. The vendor documents edge cases involving external resources and pages whose height or scrolling behavior causes only the visible region to be captured. Review the output against the browser page before basing implementation decisions on it.

When a page imports only the visible area

Some pages handle body height, scrolling, or item display in ways that result in only the visible portion being imported. The vendor’s documented workaround is:

Use the html.to.design browser extension.
Open browser developer tools and enable Device Mode.
Set a very large viewport height.
Use the extension’s Capture full page action.
Import the generated .h2d file into the Figma plugin.

This is a vendor-provided workaround, not a guarantee for every page. Full-page capture troubleshooting.

Or skip the browser setup

If you need a clean visual reference or a screenshot asset for a public page, ScreenshotNeo can return an image or PDF from one GET request. It does not convert a page into editable Figma layers, so use html.to.design for the editable design workflow above. ScreenshotNeo can provide a screenshot to place in Figma as a reference.

For a WebP screenshot of a public page, replace the example URL with the page you need. See the ScreenshotNeo API documentation.

cURL

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

Python

import requests

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

Node.js

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);

The Node.js example uses the built-in fetch API and Bun’s file writer. In Node.js, save the response body with the filesystem module instead:

import { writeFile } from 'node:fs/promises';

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 writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));

ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, and failed loads are never billed; responses include page-verdict and billing headers. Its MCP server provides screenshot, page-info, and PDF tools for AI agents. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month, with no card.

Performance, reliability, and cost considerations

Page complexity: Long pages, large images, delayed content, and client-side rendering can make an import more involved. Capture the page after the content you need is visible, and verify the full-page result.
State matters: A URL import and a browser-extension capture may represent different states if the page depends on cookies, login, location, or user interaction. Choose the route that can access the intended state.
External resources: Missing or inaccessible CSS, images, scripts, or fonts can affect the result, especially when importing a standalone HTML file.
Repeatability: Keep the URL, viewport, theme, and browser state consistent when comparing imports. Re-import if the website changes; an import reflects a capture, not a live Figma link.
Plan limits: html.to.design’s current product pages state a free allowance of up to 10 imports every 30 days and a Pro fair-use cap of 1,000 imports per month. These vendor terms can change; check the product’s plan page before relying on them. Product overview.

Troubleshooting

Symptom	Likely cause	What to try
The URL import cannot access the page	The page is private, login-protected, behind a VPN, or otherwise not publicly accessible.	Open the page in a browser where you have access and capture it with the html.to.design extension.
Only the first viewport appears	The site’s body height, scrolling, or item display behavior interferes with full-page capture.	Use the documented tall-viewport workaround: Device Mode, a very large height, full-page extension capture, then import the .h2d file.
Images or styles are missing from an HTML file	Referenced external resources may not be included or publicly available.	Use an .h2d browser capture, or include the assets and styles in the ZIP where appropriate.
The capture shows the wrong account, language, or dialog state	The browser session was not in the intended state when captured.	Set the required session, language, or page state first, then recapture with the extension.
Fonts look different	The font may be unavailable in Figma or on the machine viewing the file.	Check the plugin’s missing-font notice and map or install the font if available.
A ZIP upload is rejected	The vendor’s file guide says ZIP files should be under 32 MB.	Remove unnecessary files or split the content into smaller imports.
Direct extension transfer does not appear in Figma	The Figma session may not have been logged in during capture, or the capture may be waiting in the plugin’s Extension tab.	Confirm the Figma login, open the plugin, check Extension, or download and import the .h2d file.

FAQ

Does importing a page create editable layers or just an image?

html.to.design is intended to create editable Figma designs. A screenshot image alone remains a flat visual reference; it is not a replacement for the plugin’s conversion.

Yes. Use the browser extension while signed in and import the resulting capture through the plugin.

Can I import my own HTML or a saved page?

The File tab supports HTML and several other formats. For pages that depend on external resources, the browser extension or a complete ZIP can be more suitable.

Will the import be pixel-perfect?

No guarantee of pixel-perfect reproduction is established by the documentation. Inspect the imported page for differences in fonts, assets, page length, and browser-specific behavior.

Can ScreenshotNeo create the editable Figma layers?

No. ScreenshotNeo returns screenshots or PDFs. Use it for a visual reference; use html.to.design to convert the webpage into editable Figma layers.