Import a private webpage

Last updated

For any private webpage behind a log-in or VPN, you’ll need to install our browser extension in addition to the Figma plugin.

How to capture and import a private webpage

1. Log in to the page you want

Log in to your account and access the private webpage you want to import.

Screenshot of a private webpage log-in.

2. Run the extension and capture

Once you’ve installed the browser extension, click the html.to.design icon in your browser toolbar. Choose the viewports and themes you need, then click Capture Full Page, or Capture Selection for part of the page.

The html.to.design extension popup with its Viewports, Themes and capture buttons.
Pick viewports and themes, then capture.

3. Bring the capture into Figma

Choose what to do with the capture:

The extension's 'What to do with the capture?' screen: Send to Figma plugin, Copy to clipboard, Download .h2d file and Download Figma Make file.

4. Choose your import settings

When you import from the plugin, select the import options you need, map missing fonts, then click Proceed.

html.to.design's Import options dialog before importing a capture: Options, Components and Enhancements toggles, with Cancel and Proceed.

5. Start editing in Figma!

Your webpage has now been converted into Figma layers that are fully editable!

A private analytics dashboard imported into Figma as editable layers, with one card selected and its properties in the right panel.

🔒 If you want to make sure your site’s data remains completely private when using the extension, download your capture as an .h2d file. It is stored on your computer and reaches no server until you drop it into the plugin, which then imports it.