How to Export an HTML.to.design Import as Figma Components

Direct answer: HTML.to.design imports HTML, CSS, web pages, and supported files as editable Figma layers. To make a reusable component, select the imported layer or group that represents the element you want to reuse, then create a component in Figma. Review and refine the imported layer structure first; an import does not guarantee that every website element will arrive as a well-structured component.

1. Choose an import route

Pick the route that matches the source you can access and the structure you want in Figma:

Source	Import route	What to watch for
HTML and CSS you can edit	Open the plugin’s Editor tab, enter the code, and choose Create.	Check whether referenced assets and styles are available to the import.
Public web page	Import the page using the plugin’s website-import workflow.	Choose the viewport and theme that match the design you need to reproduce.
Page behind login or VPN	Use the browser extension to capture the page after accessing it, then send the capture to the plugin or save it as an .h2d file.	The browser must be able to access the private page when capturing it.
Local source file	Use the plugin’s File tab and drop in a supported file.	Supported formats include .h2d, .html, .htm, ZIP, email files, .mhtml, and .mht. ZIP files should be smaller than 32 MB.

For browser captures, the vendor recommends the .h2d format because it contains the information needed to recreate the webpage. A standalone HTML file can depend on external images, CSS, or JavaScript; unavailable or inaccessible resources can impair the import.

2. Set import options

Before creating the import, choose the viewport and theme you want to inspect. Depending on the import route and available controls, HTML.to.design also documents options for automatic auto layout, local styles and variables, and converting hover states into Figma components. These options affect the imported result; inspect the output rather than assuming they create the exact component architecture you need.

Viewport: Use the relevant screen dimensions. Different breakpoints can change which elements appear and how they are arranged.
Theme: Import the appearance you need to reproduce. If the page has multiple themes, consider importing each relevant state separately.
Auto layout: Enable it when it suits the imported structure, then check spacing, sizing, and behavior in Figma.
Styles and variables: Enable local styles and variables when useful for editing and reuse; verify the generated values and names.
Hover states: Enable conversion to components when you want hover-state variants represented in the import. Review the result to see whether it fits your intended component.

3. Import the page or code

Import HTML and CSS

Open the HTML.to.design plugin in Figma and choose the Editor tab.
Paste or enter your HTML and CSS.
Set the needed import options and choose Create.

Keep the source and assets available during import. If an image, stylesheet, or script depends on a remote resource, make sure that resource can be fetched. If the page is private, use the browser-extension capture route instead of expecting a direct import to access your session.

Import a captured page or file

For a page you can access in a browser, capture it with the documented website-import workflow.
For a private page, sign in or connect to the required VPN in the browser, capture the page with the extension, then send it to the plugin or save it as .h2d.
For a local file, open the File tab and drop in a supported format. For a ZIP, keep the archive under 32 MB.

4. Find the reusable element in the layer tree

The import produces editable layers. In Figma, inspect the layer hierarchy and identify the smallest layer or group that represents the reusable unit, such as a button, card, navigation item, or section.

Expand the imported page in the layers panel and locate the intended element.
Select it and check its bounds on the canvas. Confirm that it contains the visual and content you expect.
If the element is split across unrelated layers or includes surrounding page content, refine the selection by grouping the intended layers or adjusting the structure.
Check text, images, layout, and any imported hover state before creating the component.

There is no universal layer selection that works for every page. Websites can have complex nesting, repeated elements, and responsive layouts, so use the visible result and layer tree to decide what belongs together.

5. Create and check the Figma component

Select the layer or group you want to reuse.
Use Figma’s component-creation command to turn that selection into a component.
Check the component on the canvas and, where useful, place an instance in the surrounding design to confirm it behaves as expected.
Review text, images, spacing, clipping, and any hover-state conversion. Make corrections in Figma where the imported structure needs refinement.

The documented workflow supports editable layers and describes an option to convert hover states as components. It does not guarantee that arbitrary page elements will automatically become correctly organized, production-ready components.

6. Troubleshoot import and component issues

Symptom	Likely cause	What to try
An image or style is missing	A standalone HTML file references an external resource that is unavailable or cannot be accessed.	Make the resource available to the import, check its reference, or use a browser capture or .h2d file when that better preserves the page.
The private page does not appear	The direct import does not have the browser’s login or VPN access.	Open the page in a browser with access, capture it with the browser extension, and send the capture to the plugin or save it as .h2d.
The imported layers are difficult to componentize	The page’s hierarchy does not match the reusable unit you want.	Inspect the layer tree, select the intended layers, and refine their grouping before creating the component.
The component contains extra page content	The selected layer or group is larger than the reusable element.	Check the selection bounds and choose or group only the layers that belong in the component.
The layout does not match the target design	The imported viewport, theme, or generated layout differs from the intended state.	Review those import choices, then correct the component in Figma.
A ZIP file will not import	The archive may exceed the documented 32 MB limit or contain unavailable resources.	Reduce the archive below 32 MB and confirm that required page assets are included and accessible.

7. Keep the workflow reliable

Use the intended viewport and theme so the imported layers reflect the state you plan to reuse.
Prefer .h2d for browser captures when possible, as the vendor recommends it for retaining the information needed to recreate the webpage.
Check external resources before importing standalone HTML; missing assets make the result incomplete.
For private pages, capture from the authenticated browser session rather than relying on an import that cannot use that session.
Inspect the resulting layers and component in context. The options can help with layout, styles, variables, and hover states, but the final structure needs review.

Or skip the browser setup

If you need a clean screenshot of the source page before recreating it in Figma, ScreenshotNeo is a website screenshot API and MCP server. Its API takes one GET request with a URL and returns an image or PDF. This is a screenshot step, not an HTML.to.design import: you can use the resulting reference while building or refining your Figma component.

See the ScreenshotNeo API documentation for request options. Here is the cURL version, with Python and Node.js equivalents:

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

Cookie banners are accepted and removed before the shot, along with known newsletter popups and chat widgets; each step can be turned off.
Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing. Response headers report the page verdict and whether the shot was billed.
An MCP server lets AI agents, including Claude and Cursor, use screenshot tools.
The free plan includes 1,000 shots a month with no card; paid plans start at $5 for 3,000 shots.

FAQ

Does HTML.to.design automatically make every imported element a component?

No. The import creates editable layers. Select and componentize the layer or group you want, then check its structure.

Can I componentize a hover state?

The vendor documents an import option to convert hover states as Figma components. Review the generated result to confirm it matches the interaction you need.

Capture the page from an authenticated browser session with the extension, then send that capture to the plugin or save it as .h2d for import.

What if the imported component needs cleanup?

That can happen because page structures vary. Refine the layer selection and adjust the resulting component in Figma.