For a public website, open the html.to.design Figma plugin, enter the page URL, choose a viewport and theme, review the import options, and import it. For a signed-in or private page, capture it with the companion browser extension in the browser session that can access it, then transfer the capture to the plugin or import its local .h2d file. Either route gives you editable Figma layers to work from—not a finished, client-approved design.
Choose the right import method
html.to.design combines a Figma plugin with a browser extension to convert website content into editable Figma designs. Use URL import when the page is public and you do not need a particular signed-in browser state. Use the extension when access depends on a login or VPN, when you need the page as it appears in your current session, or when you want to capture a selected area rather than rely on a URL import.
| Method | Best for | Capture and handoff |
|---|---|---|
| Plugin URL import | A public page that can be opened without your browser session | Enter the URL, choose a viewport and theme, and import through the plugin. The overview also describes bulk page imports. |
| Browser extension | A logged-in or private page, a particular session state, or a selected area | Capture the page or selection in the browser, then transfer it directly to the plugin or download a .h2d file. |
See the html.to.design overview and its guides to browser-extension imports and private-page imports for the vendor’s current workflow details.
Import a public website by URL
- Open the html.to.design plugin in Figma.
- Paste the public page URL into the plugin.
- Choose the viewport and theme that suit the client task. For example, use the viewport relevant to the redesign or audit rather than assuming a desktop capture represents every responsive state.
- Review the available import options, then start the import.
- Inspect the resulting layers in Figma and refine them for the project before presenting or using them.
The overview describes importing one or more pages, but the plan page identifies bulk imports as a Pro feature. Check the current plan terms before planning a large batch.
#1 Best Overall
Import a logged-in or private page
For a page behind a login or VPN, open it in the browser where you already have access. The extension captures the page visible in that session, avoiding the need to make the private page publicly reachable just to import it.
- Navigate to the target page in the authenticated browser session.
- Open the html.to.design browser extension and capture the full page or the area you need.
- Choose direct transfer to the Figma plugin, or download the capture as a
.h2dfile. - For direct transfer, open the plugin and check its Extension tab if the capture does not appear automatically.
- For a local file, drop the
.h2dfile into the plugin. - Choose import settings and map missing fonts if prompted.
The vendor says a downloaded .h2d capture stays on your computer and is not sent to its servers. Treat that as the vendor’s stated handling, not an independent security audit. The extension guide also describes using the browser extension when removing a banner before capture.
Review the import before using it with a client
An editable import is a starting point for redesign work, an audit, or collaboration—not a guarantee of pixel-perfect fidelity or a polished deliverable. Check the result against the live page and the purpose of the project.
- Confirm that the imported page state and content are the ones the client asked you to review.
- Check typography, spacing, images and other assets; map fonts that are missing or substituted.
- Review responsive needs separately. A capture at one viewport does not by itself establish how the site behaves at other sizes.
- Clean up layers and refine the layout before treating the file as presentation-ready.
- Work within the client’s authorization and applicable agreements. The technical import guides do not establish permission for every client or third-party site.
Choose a plan for the project size
The official plan page currently lists the following terms; pricing and quotas can change, so confirm them on the live Pro plan page before budgeting.
| Plan | Listed price and allowance | Relevant details |
|---|---|---|
| Free | $0; up to 10 imports every 30 days | Useful for a small number of imports. |
| Pro | $12 per user/month billed annually, or $18 per user/month billed monthly | Unlimited imports subject to fair use; the page says typical individual use is capped at 1,000 imports per month. Listed features include high-resolution images, bulk imports and a re-import shortcut. |
Consider how many pages you need to import, whether high-resolution images matter to the deliverable, and whether bulk import or the re-import shortcut would save work. The plan page’s “unlimited” wording is qualified by fair use, so do not plan on exceeding its stated typical-use cap without checking the current terms.
Or skip the browser setup
If your goal is a clean screenshot rather than editable Figma layers, ScreenshotNeo can return a website screenshot or PDF with one GET request. It removes cookie banners, newsletter popups and chat widgets before capture; bot checks, blank pages and failed loads are never billed; and an MCP server lets AI agents take screenshots. It includes 1,000 screenshots a month free with no card, with paid plans starting at $5 for 3,000.
For example, this cURL request saves a WebP screenshot of the target URL. See the ScreenshotNeo API documentation for options 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.webpSign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.
Free tools Windows power users keep installed
One-click scans. No signup required.
Frequently Asked Questions
Can html.to.design import a page that requires a login?
Yes. Capture it with the browser extension in the session where you can access the page, then transfer it to the plugin or import the local .h2d file.
Does a website import become a finished Figma redesign?
No. The import provides editable layers; review and refine the result for the client’s needs.
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.
