Guides · Updated 1 November 2026

How to import a page behind a login into Figma

Plugins and servers can't see pages that need your login, so capture them from your own browser instead. Open the page while logged in, run the Figback Capture extension on the tab, and import the file it saves into the Figma plugin. Your password never leaves the browser.

A product team wants to redesign its admin panel. The panel has forty screens, none of them public, and the last design file was made before half of those screens existed. Pasting the URL into an import plugin returns the login page, because that is all an outside visitor ever sees.

This is the normal case for internal tools, SaaS dashboards, account areas and anything else behind a sign-in. The page only exists for a browser that holds your session. So the capture has to happen in that browser.

Why URL import can’t work here

When you give a plugin a URL, the request comes from the plugin or from a server, neither of which is logged in as you. The site answers the way it answers any stranger: with a redirect to its login form. Sending your password to a third-party server to get around this would be a bad idea for security and usually against the site’s terms, so Figback doesn’t offer it.

Your own browser already has what’s missing. It is logged in, it has run the page’s scripts and fetched its data, and it shows the screen exactly as you use it.

Capture the tab with Figback Capture

Open the page in a normal Chrome tab, logged in, and click the Figback Capture icon in the toolbar. A small panel opens with two groups of settings.

Under Widths, “Current width” is ticked by default, and you can add 1440, 768 and 390. Other widths resize the browser window briefly and restore it afterwards. Under Options, “Auto layout”, “Components” and “Variables” are on; tick “Also capture dark theme” if the product has one. Widths and the dark theme are chosen here, in the extension, because the plugin never sees the page itself.

Click Capture page. The extension first scrolls through the page so lazy-loaded content appears (“Preparing the page”), then captures each width in turn (“Capturing 1440”, “Capturing 390 dark”) and merges them into one file.

When it finishes, it saves a file named after the site and the date, such as app.example.com-2026-11-01.ir.json, to your Downloads folder, and copies the capture to the clipboard. Captures over 20 MB are too large for the clipboard, so use the file for those. If a width fails, the message lists it after “Skipped”.

Import the file into Figma

Open the Figback plugin in a Figma Design file. The quickest route is to press Cmd+V (Ctrl+V on Windows) anywhere in the plugin window right after capturing: the plugin switches to the Import tab and starts building the design from the clipboard. Dropping the .ir.json file anywhere on the plugin does the same.

To do it by hand, open the Import tab, choose IR file as the source, pick the file and click Import into Figma. The plugin builds every width and dark frame that is in the file; its own width settings only apply to URL and HTML imports.

The plugin converts the file on your computer. Nothing from the capture is sent to our server.

Get the page into the right state first

The extension captures what is on screen, so set the screen up before you click. Close cookie banners, chat widgets and onboarding tips. Open the menus, tabs and collapsed sections you want in the design. Pick realistic data: a dashboard with three rows of test data shows the layout poorly, and one full of real customer names creates a privacy problem.

A demo or staging account is often the best source. It has plausible content without personal data, and you can reset it to the same state when you need to capture the screen again.

What comes through and what doesn’t

The extension records the page as it is drawn at the moment you click, which sets a few limits.

Charts drawn on a <canvas> come in as images of their pixels. Anything inside an iframe, such as a support chat, an embedded video or a map, comes in as a grey placeholder labelled with its source. Content inside web components that use shadow DOM is not captured, which matters for design systems built on them.

Hover and focus states are not captured either, since the extension panel takes focus when you click it. Menus opened by a click are captured if they are open when you press Capture page, and so are <details> sections, but only when expanded: a closed one comes in as its summary line alone.

Images from other domains that refuse cross-origin requests can fail; the plugin reports them. Fonts are referenced by name, so install the product’s typefaces on your computer if they aren’t already there. On very long pages, the scroll-through stops after about 60 screens.

Handle the file with care

A capture file is a snapshot of everything the page showed you, with images embedded. For an internal tool that can mean customer names, emails, order details or financial figures. Treat it like an export from the system itself: keep it out of shared folders, delete it once imported, and replace personal data in the Figma file before you share it. Our guide on what you may copy into Figma covers personal data in more detail.

Questions

Does Figback need my password to import a logged-in page?

No. The extension captures the page you already have open in your own browser, after you have logged in. It sends nothing to our server, and the plugin converts the file on your computer.

Can I import a SaaS dashboard into Figma?

Yes. Open the dashboard in Chrome while logged in, capture the tab with Figback Capture, and import the file into the plugin. Charts drawn on a canvas come in as images; everything else becomes editable layers.