How to Use HTML.to.design to Copy a Website into Figma for a Client Project

To copy a website into Figma with html.to.design, open its Figma plugin, enter the public page URL, choose a viewport and theme, review the import options, and import. For a logged-in page, a private network, or a specific browser session, use the companion browser extension to capture the page you can access, then transfer the capture to the plugin or import a local .h2d file. Either way, treat the result as editable starting material: inspect and refine it before using it in a client presentation.

1. Choose the capture method

html.to.design includes a Figma plugin and a companion browser extension. The plugin imports a public page from its URL. The extension captures the page as it appears in your browser, which is useful for signed-in or private pages and session-specific states. The extension can capture a full page or a selected area, then send the capture to the plugin or save it locally as a .h2d file. html.to.design product overview, extension guide.

Need	Use	What to consider
Public page, ordinary viewport	Plugin URL import	Choose viewport and theme, then review import settings.
Logged-in, VPN-only, or local page	Browser extension	Capture from the browser session that can reach the page.
A particular signed-in state or visible banner state	Browser extension	Capture the state shown in the browser; choose full page or selection.
Local handoff or import without direct transfer	Extension `.h2d` download	Keep the file accessible on the machine where you use the plugin.
Several pages	Plugin bulk import, if available on your plan	The product overview describes bulk imports; the Pro plan page lists bulk imports as a Pro feature.

2. Import a public website by URL

Open the html.to.design plugin in Figma.
Enter the URL of the page you are authorized to use for the project.
Select the viewport and theme that best match the client question. For example, use a desktop viewport for a desktop redesign review and a mobile viewport when evaluating the mobile experience.
Review the available import options and start the import.
Inspect the resulting layers in Figma. Map missing fonts if prompted and refine the result for the intended design work.

Import the page or pages relevant to the client task rather than assuming one viewport represents the whole site. If responsive behavior matters, capture the needed viewport variants deliberately.

3. Import a logged-in or private page with the extension

Use the browser extension when the page requires a login or VPN, depends on the current session, or you need to capture the state visible in your browser. The vendor specifically recommends its extension for private or local pages, pages behind a login, session states, and cases where a banner should be removed before capture. Private page import guide.

Open the target page in the browser where you are authorized and able to access it. Confirm the right account, page, and state are visible.
Launch the html.to.design browser extension.
Choose a full-page capture or select the area needed for the project.
Choose direct transfer to the Figma plugin, or download the capture as a .h2d file.
For direct transfer, open the plugin in Figma. If the page does not arrive automatically, check the plugin’s Extension tab.
For a local file, drop the .h2d file into the plugin and select the import settings.
Map missing fonts if needed, then review the imported page and refine it for the client deliverable.

The vendor says a downloaded .h2d capture stays on the local computer and does not reach its servers. That is the vendor’s stated handling, not an independent security audit. Follow your client’s data-handling requirements when capturing private or sensitive pages.

4. Review the import before client use

An imported page gives you editable layers to work with; it is not automatically a polished redesign or a client-approved artifact. Check the parts that affect the specific project decision:

Typography: confirm font family, weight, line breaks, and text sizing; map missing fonts where necessary.
Spacing and alignment: inspect margins, padding, column widths, and repeated spacing patterns.
Assets: check images, icons, and other visual assets at the intended presentation size.
Responsive variants: import or capture the viewport sizes required by the audit or redesign discussion.
Content and state: verify that the page, session, and visible content match the project brief.
Layer structure: organize and rename imported layers where that will help client collaboration or later editing.

Keep the source page and the imported file associated with the project so reviewers can distinguish the reference capture from proposed design changes.

5. Choose a plan for the amount of work

The official Pro page currently lists Free at $0 with up to 10 imports every 30 days. It lists Pro at $12 per user per month billed annually or $18 per user per month billed monthly. The page lists unlimited imports subject to fair use, high-resolution images, bulk imports, and a re-import shortcut among Pro features; it says fair use caps typical individual use at 1,000 imports per month. These plan details can change, so check the live Pro plan page before budgeting or committing to a client workflow.

Project need	Plan question
A small number of page imports	Does the Free quota of up to 10 imports every 30 days cover the work?
Many pages or repeated variants	Would bulk imports and the listed Pro import allowance help?
Large source images	Do you need the high-resolution image feature listed for Pro?
Frequent revisions to the same source	Would the Pro re-import shortcut save steps?

6. Troubleshooting

Symptom	Likely cause	What to do
The public URL does not import the page you expect	The page needs a signed-in session or relies on private-network access.	Open it in an authorized browser session and capture it with the extension.
Extension capture does not appear in the plugin	The direct transfer has not been picked up by the plugin.	Open the plugin and check its Extension tab. If needed, download the `.h2d` file and import it locally.
The imported page is missing a font	The font may not be available to the Figma document or needs mapping.	Use the plugin’s font mapping step if prompted, then review typography and line wrapping.
The capture reflects the wrong account or state	The browser was open to a different session or the target state was not active at capture time.	Verify the account and page in the browser first, then capture again.
A banner or popup is visible in the import	The captured page state included it, or the selected method did not remove it.	For browser capture, review the visible state and the extension’s banner-removal option. Remove or adjust the element in Figma if appropriate for the project.
The project needs more imports than expected	Page variants and revisions consume imports.	Count the required pages and viewports, then check the current plan quota and bulk-import availability.

7. Or skip the browser setup

If the client task needs a visual reference screenshot rather than editable Figma layers, ScreenshotNeo can return a website screenshot through one API request. It does not replace html.to.design for turning a page into editable Figma content. For a screenshot, see the ScreenshotNeo API documentation and use this cURL request:

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,
)
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', new Uint8Array(await res.arrayBuffer()));

Replace the example target URL with a page you are authorized to capture. ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before the shot. Bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots. Each response includes page-verdict and billing headers. Sign up for 1,000 free screenshots a month, no card required.

8. FAQ

Can I import an entire multi-page website at once?

The overview describes bulk importing pages, and the Pro page lists bulk imports as a Pro feature. Check the current plan details and import the pages needed for the project.

Can I use the imported page as the final redesign?

Use it as editable source material. Review and refine the design, assets, responsive states, and content against the client brief before presenting it.

Does ScreenshotNeo turn a website into editable Figma layers?

No. ScreenshotNeo provides screenshots or PDFs; use html.to.design when the goal is editable Figma material.

What if the site belongs to a client or another party?

Confirm that your project authorization and applicable agreements cover the capture and use. The cited technical documentation does not establish permission for a particular site.