Does HTML.to.design Work with Password-Protected Staging Sites?

Yes. html.to.design supports password-protected staging pages through its browser extension and Figma plugin. Sign in to the staging site in a supported Chromium-based browser, capture the page with the extension, then open that capture in the plugin. You can send it directly to the plugin or download a local .h2d file and import that.

The plugin’s Web tab is for public websites with an open URL. It does not use your authenticated browser session, so it is not the right path for a private staging page. See the official guides for private pages and public URL imports.

Recommended workflow

Install the extension and plugin. Use a supported Chromium-based browser such as Chrome, Edge, Brave, Opera, or Arc. The installation guide does not specify minimum browser versions. Install the html.to.design browser extension and the Figma plugin. See the extension installation guide.
Sign in to staging in the browser. Use an account authorized to access the site. Complete any required login steps before capturing.
Navigate to the exact page and state. Set up the page as you want it represented: open the relevant tab, dismiss or leave dialogs as needed, and scroll or interact to the state you need. The extension captures what is visible in the browser.
Choose capture settings. Open the extension, select the viewports and themes you need, and choose Capture.
Choose a handoff method. Send the capture to the Figma plugin for a direct handoff, or download it as a local .h2d file. Direct sending requires you to be logged in to Figma.
Import in Figma. Open the html.to.design plugin and use its Extension tab to access a directly sent capture. For a local file, drop the .h2d file into the plugin. Choose import settings, map missing fonts if needed, and import.
Review the result. Compare the imported design with the authorized staging page, especially fonts, images, responsive layouts, and interactive states.

See the vendor’s guides for private-page imports, extension handoff, and local file imports.

Direct transfer or local .h2d file?

Method	How it works	Choose it when
Send to plugin	The extension sends the capture to the Figma plugin. A Figma login is required.	You want the shortest handoff and are signed in to Figma.
Download `.h2d`	Download the capture to your computer, then drop the file into the plugin.	You want a local handoff. html.to.design recommends this route when you want the captured page data not to reach its servers.

The local-file statement describes the capture file path; it is not a general privacy guarantee for Figma or your browser. Follow your organization’s policies for staging data. See the private-page instructions and extension guide.

What to expect and what can limit fidelity

The capture uses your browser session. Authenticate first in the browser; the public URL import does not substitute for that session.
Capture the desired state. Since the extension is designed to capture what is visible in the browser, prepare the page state and select the required viewports and themes before capture.
Bot checks can still intervene. A URL import may show a human-verification prompt instead of the page. The documented guidance is to use the extension and solve any CAPTCHA challenge before capturing.
Import quality is not universally guaranteed. The workflow documentation does not promise perfect results for every site or page state. Inspect the imported result and correct discrepancies in Figma.

References: bot-protected sites and the browser extension guide.

Or skip the browser setup

If your goal is a screenshot file rather than an editable Figma import, ScreenshotNeo is a website screenshot API and MCP server. It takes a URL in one GET request and returns an image or PDF. An authenticated staging URL generally cannot be captured unless the site permits the request; use the browser-extension workflow above when you need your signed-in session. ScreenshotNeo supports custom headers, cookies, and Authorization, which can apply when your staging authentication can be supplied that way.

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,
)
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}`);
const bytes = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', bytes));

See the ScreenshotNeo API documentation for request options. Cookie banners, popups, and chat widgets are removed before the shot; each cleanup step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Every feature is on every plan.

Troubleshooting

Symptom	Likely cause	What to do
The Web tab shows a login page or cannot reach the private page.	The Web tab is intended for public URLs and does not use your signed-in browser session.	Sign in to staging in the browser and capture with the extension, then import through the plugin.
The extension captures a login screen.	The staging session is not authenticated, has expired, or the browser is on the wrong page.	Refresh the staging session, confirm access in that browser tab, navigate to the target page, and capture again.
A CAPTCHA or human-verification page appears.	The site’s bot protection requires a human check.	Complete the CAPTCHA in the browser, then capture with the extension. See the bot-protection guidance.
The direct handoff does not appear in the plugin.	Direct sending requires a Figma login, or the plugin is not open to its Extension tab.	Sign in to Figma, open the plugin’s Extension tab, or download the capture as `.h2d` and drop it into the plugin.
Fonts are missing or replaced.	A font used by the staging page is unavailable in the import environment or needs mapping.	Use the plugin’s font mapping option during import, then review typography in Figma.
The design differs from the live browser page.	The capture may represent a different viewport, theme, or page state; the documentation does not promise perfect fidelity for every site.	Recreate the desired state in the browser, select the needed viewport and theme, capture again, and compare the imported result.

Performance, reliability, and data handling

For reliable results, keep the authenticated browser session active, capture the exact page state, and verify the output after import. If a page has multiple responsive layouts or themes, capture each required combination. The source guidance does not provide capture-time benchmarks or a universal fidelity guarantee, so allow time to inspect the result.

Use the local .h2d route if you want that capture file to stay on your computer before you import it. Direct transfer is more convenient but requires Figma login. This does not establish how Figma or the browser handles data; follow the data-handling requirements that apply to your staging site.

FAQ

Do I need a Figma account?

Directly sending a capture to the plugin requires a Figma login. The documented alternative is to download a local .h2d file and drop it into the plugin.

Can I import a staging site from its URL alone?

The Web tab is documented for public websites with an open URL. For a page behind login or VPN, use the extension after signing in.

Can I keep the captured file local?

Yes. The private-page guide recommends downloading a local .h2d file when you want the capture data not to reach html.to.design’s servers.

Will every staging page import perfectly?

No universal fidelity promise is documented. Review the import against the page you are authorized to access and adjust it as needed.