How to Import a Website into Figma with HTML.to.design

To import a public website into Figma with html.to.design, run the plugin, open its Web tab, paste the page URL, choose the viewport and theme, then click Import. For a login-protected page or a particular browser state, capture the page with the html.to.design browser extension and send that capture to the plugin. If you already have a saved page, use the plugin’s File tab.

The result is editable Figma layers that you can use as a starting point for redesign or benchmarking. Review the canvas afterward: an import is not a guarantee of pixel-perfect rendering or working site behavior.

1. Choose the right import method

Your page or source	Use this method	Why
Public URL that anyone can open	Plugin Web tab	Paste the URL and import directly.
Login-protected page, local/private page, or browser-specific state	Browser extension	It captures what is visible in your browser session.
Page behind a CAPTCHA you have already solved	Browser extension	Capture the visible page after solving the CAPTCHA in the browser; the plugin cannot solve it on its own.
Saved HTML, email, archive, or extension capture	Plugin File tab	Import a supported file from your computer.

For a public page, use the Web tab first. Switch to the extension when access or session state matters; use the File tab when the source or a capture is already saved.

2. Import a public website from its URL

In Figma, open Actions, search for html.to.design under Plugins & widgets, and run the plugin.
Choose the plugin’s Web tab.
Paste the full page URL, including https://.
Choose the viewport and theme. Review any other available import options, such as style handling and auto layout.
Click Import and wait for the layers to appear on the Figma canvas.
Inspect the result and adjust it for your design work.

The plugin supports multiple viewport choices and light and dark themes. Depending on the available options, you can also use or create local styles and enable auto layout. Choose settings that match the version you want to examine: for example, use a mobile viewport to study the mobile layout rather than scaling down a desktop capture.

3. Capture a private page or browser state

Use the browser extension if the page requires authentication, is only available locally, or depends on a specific session, language, or interaction state. The extension captures a page you can see in your browser and sends it to the plugin for conversion to editable layers.

Open the target page in your browser and sign in or set up the state you need.
Complete any browser-side steps that make the page visible, such as solving a CAPTCHA or choosing a language.
Use the html.to.design browser extension to capture the whole page or the portion you need.
Send the capture directly to the Figma plugin, or download it as a .h2d file.
If you downloaded a file, open the plugin’s File tab and upload it.
Check the imported canvas for missing content and make any needed design adjustments.

The extension is useful when the browser can display a page that a direct URL import cannot reach. Site-specific language controls and other interactive behavior may still have technical limitations, so confirm the captured state visually.

4. Import HTML, ZIP, email, or capture files

Open the plugin’s File tab and select the saved source. Supported formats include:

.h2d capture files; the documentation recommends this format for extension captures because it contains the information needed to recreate the webpage.
.html and .htm files.
ZIP archives containing webpages. The archive must be smaller than 32 MB.
.eml, .emlx, and .msg email files.
.mhtml and .mht saved web pages.

An HTML file may refer to images, stylesheets, fonts, or scripts hosted elsewhere. The plugin attempts to import external resources, but they may not load if they are missing or inaccessible. If the source file gives an incomplete result, capture the page in the browser or include the needed assets in an accessible form before importing.

5. Review the result and refine the design

Imported layers are an editable base. Before using them in a handoff or redesign, check the parts that matter to your work:

Layout: confirm that the selected viewport matches the intended desktop, tablet, or mobile view.
Theme: make sure the captured appearance is light or dark as intended.
Fonts: check for substitutions. The feature list includes missing-font replacement, but verify that text wrapping and hierarchy still make sense.
Images and styling: look for missing external assets, unexpected spacing, or styles that did not transfer.
Links and scrolling: prototype-oriented features include automatic linking and scroll behavior, but inspect interactions in the imported design rather than assuming every original site behavior was reproduced.
Structure: review the layer organization and auto layout behavior before building on top of the imported content.

Keep the original URL or source file nearby so you can compare the import against the page. An editable reconstruction can still need manual cleanup.

6. Troubleshooting

Symptom	Likely cause	What to try
The public URL does not import the page I see when signed in.	A direct URL import does not have your authenticated browser session.	Open the page in your browser while signed in, then capture it with the extension.
A CAPTCHA blocks the import.	The plugin cannot resolve the CAPTCHA for you.	Complete the CAPTCHA in the browser, confirm the target page is visible, then capture with the extension.
Images, fonts, or styles are missing from an HTML import.	The source references external resources that are unavailable or inaccessible.	Use a browser capture, or make the dependencies accessible and retry the file import.
The ZIP upload is rejected.	The archive may be 32 MB or larger, or it may not contain a usable webpage.	Reduce the archive to below 32 MB and confirm it includes the page files and assets.
The imported language is wrong.	The URL import may not reproduce the language or session state selected in your browser.	Set the language in the browser and use the extension to capture the visible version. Some site-specific controls can still be limited.
The canvas does not match the page dimensions or responsive layout.	The chosen viewport may not match the version you want.	Choose the appropriate viewport and import again. Inspect responsive layouts at their intended sizes.
Text wraps differently or looks unlike the reference.	A font may be unavailable or replaced, or imported styles may differ.	Check missing-font replacement and local style options, then adjust font, spacing, and line breaks in Figma.
The import is editable but some interactions do not work.	Website behavior is not necessarily recreated as a working site.	Check available prototype features and add or revise interactions in Figma as needed.

7. Performance, reliability, and plan limits

Import time and completeness can depend on the page and its resources. Pages that rely on external assets, authentication, or browser state are more reliable to capture from a browser that already displays them. For a saved HTML file, remember that linked resources may not be available to the importer.

The official plan documentation lists a free tier with up to 10 imports every 30 days. It lists Pro at $12 per user per month when billed annually or $18 per user per month when billed monthly; the documented “unlimited” allowance is subject to fair use, with a stated limit of 1,000 imports per month for typical individual use. Plans and prices can change, so check the provider’s current plan page before relying on those figures.

html.to.design also lists desktop, tablet, and mobile viewports; dark and light themes; local Figma styles; auto layout; missing-font replacement; and prototype-oriented options such as automatic linking and scroll behavior. The options shown in the plugin may vary with its current version and plan.

8. When a screenshot is enough

If your goal is a reference image or a visual check rather than editable Figma layers, a website screenshot can be simpler. ScreenshotNeo is a website screenshot API and MCP server from Yorker Media. Its API can return a PNG, JPEG, WebP, or PDF from one GET request. A screenshot is a raster or document output; it does not replace html.to.design when you need editable design layers.

Or skip the browser setup

For a screenshot of a public page, call ScreenshotNeo’s API directly. See the ScreenshotNeo API documentation for request 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}`);
const image = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', image));

ScreenshotNeo accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers say which page verdict and billing status applied. Its MCP server offers take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. All features are on every plan.

9. Frequently asked questions

Does html.to.design turn a website into editable Figma layers?

Yes. Its stated purpose is to convert website content into editable Figma layers. Expect to inspect and refine the imported design.

Can I import a website that requires a password?

Use the browser extension after signing in. It captures the page visible in your browser and can send it to the plugin or save it as a .h2d file.

Can the plugin import a whole ZIP of a website?

It accepts ZIP archives containing webpages, provided the archive is smaller than 32 MB. External resources may still be unavailable.

Will the import be pixel-perfect?

Do not assume so. The imported layers are an editable starting point; check fonts, layout, assets, and behavior against the source.

Can I use the browser extension to capture the language I selected?

The extension can capture the language shown in the browser, though some site-specific language controls may have technical limitations.