Capturing a Page Behind a Login for a Figma Import

To import a page that sits behind a login, sign in yourself, save the page from that browser as a file, and drop the file into the plugin. Don't hand the plugin a URL and hope it can sign in. A saved Safari Web Archive or a self-contained HTML file holds the page exactly as your browser rendered it, so the import never has to authenticate anything.

This guide is for designers and developers who have a dashboard, an admin screen or a staging build and no design file for it. It covers pages you are entitled to view, such as your own product, a client's staging app or an account you pay for. It's not a way around a login wall, and nothing here helps with that.

Prerequisite: an account that can already see the page, and either Safari on a Mac or a way to save self-contained HTML from your browser.

Why a plain URL import cannot see the page

A fresh request to a signed-in URL has no cookies, so the server answers with the login screen or a redirect. A tool working from that request would convert the login screen. That's not what you wanted.

UnHTML's documented capture CLI takes a URL and an output flag, and runs a real headless browser that fetches assets with no CORS limits and full-page scroll. The published documentation does not mention cookies, headers or login state. So this article doesn't assume the CLI or the bookmarklet can carry a session, and neither should you. The dependable route is the one where your own browser does the signing in.

A local dev server is a related case with its own steps. If that is your situation, see importing a Next.js app running on localhost.

Save the page from your own signed-in Safari

Safari's Web Archive format saves a complete page, including linked images, CSS and JavaScript, in one file, as described on Wikipedia. Because you save it from the tab you already have open, the file contains what that tab showed. For the longer walkthrough, see saving a page as a Safari Web Archive.

The Mac steps

1. Sign in and open the page in Safari.
2. Wait for it to finish loading, including content that loads as you scroll. Scroll to the bottom once.
3. Open the File menu and choose Save As.
4. Set the Format to Web Archive. The Page Source and Web Page, HTML Only formats do not bundle linked assets the same way.
5. Save the file and note where it went.

What the archive holds

The archive is a main resource plus its subresources and subframe archives, so nested iframes keep their own assets. It is a snapshot of the page as rendered at save time. That is the useful part for a login: the saved content does not depend on your session any more.

On iPhone or iPad

Safari on iOS or iPadOS 13 and later can save the same format. Open the page, tap the Share icon, choose Save to Files and pick a location you can reach from a Mac, such as iCloud Drive. Move the file to your Mac before importing.

What to do when you work in Chrome

If Chrome is your daily browser, use a self-contained HTML save instead. The steps are in exporting self-contained HTML from Chrome. A self-contained file carries its own images, styles and fonts, which is what the plugin needs.

You may also find Chrome's pageCapture extension API, which saves a tab as MHTML. It is an API for extension authors, not a menu item. It needs the pageCapture permission in the manifest, and the docs say an MHTML file can only be loaded from the file system and only in the main frame. MHTML is also not on the list of file types the plugin documents, so treat it as an experiment, not a step in this workflow.

Prepare the page before you save it

The snapshot keeps what is on screen, so set the screen up first.

• Put the app in the state you want to design. Open the menu, expand the table, switch to the tab. A closed dropdown is a layer you never get.
• Swap real data for test data. Use a test account or staging data. Customer names, emails and figures in a saved file travel with it into your design file and anywhere you share it.
• Let animation settle. Content that keeps rendering after load can freeze mid-render in a saved snapshot or lose cross-origin content entirely. If a chart animates in, wait for it to finish before saving.
• Check you may copy it. Look at the terms that apply to the product before you move its screens into a design file.

Why the import stays on your machine

A signed-in page often holds data you would not want sent anywhere. For file imports, nothing is. Default imports make zero network requests and nothing leaves your machine, according to the UnHTML site. Fetching remote assets and running page scripts is a single opt-in that stays off until you turn it on. When it is on, scripts run only in a sandboxed frame, and the markup is sanitized first: scripts, inline event handlers and javascript: URLs are stripped.

That is why this workflow suits a login-gated page. The session never goes to a third party, and the file you saved is the only input.

What to check after the import

An import is faithful, not pixel-exact, and the import report tells you where it fell back. As of 2026, three things come up most on app screens:

• Fonts. Any font that is not installed locally is substituted, with Inter as the default, and each swap is listed in the report. Product UIs often use a licensed typeface, so expect swaps.
• Layers. The free tier caps an import at 500 layers and falls back to absolute positioning past that. A dense data table can hit the cap fast.
• Grids. Complex CSS grids that cannot map to auto layout fall back to absolute positioning.

Links inside the saved page keep working only as long as their destination pages stay online, and those destinations may ask you to sign in again.

Conclusion

Sign in yourself, save a snapshot of the page you are allowed to use, and import the file locally. The login stays in your browser, the data stays on your machine, and the import gets a fixed page to convert. Start with a test account, wait for the page to settle, and read the import report before you trust the result.