Localhost to Figma: Capture Any Page with the Chrome Extension

A URL import works when the page is public. Plenty of the screens you actually need in Figma are not: the feature branch running on localhost:3000, an admin dashboard behind a login, a staging server on the office network, or a checkout with items already in the cart.

For those, HTML to Frames has a free Chrome extension. It captures the page from your own browser, exactly as you see it, and hands it to the Figma plugin, which turns it into editable frames, text, vectors and images with Auto Layout. This guide covers how to get localhost to Figma, how to capture logged-in pages and specific states, and what to do when something goes wrong.

When to use the Chrome extension instead of a URL

The plugin's Link source renders pages in an isolated browser on the HTML to Frames capture service. That browser sees what an anonymous visitor sees on the public internet. It cannot reach your machine, your private network or your logged-in session.

Use the extension when the page is:

• Running locally, such as localhost, 127.0.0.1 or a dev server on your network.
• Behind a login, like SaaS dashboards, admin panels, account settings or client portals.
• On a private network, like staging environments on a VPN or intranet tools.
• In a specific state, such as an open dropdown, a filled-in form, a modal, a cart with products, or an error message after submit.

For public pages, a URL to Figma import is still the simplest route, and it supports responsive sets in one click.

What the extension is (and is not)

The extension runs in your browser. It needs no account, contains no analytics and loads no remote code. It does not send anything to HTML to Frames unless you choose Send to Figma. Even then, the capture is held in memory only until your plugin takes it, for a maximum of 30 minutes.

A capture counts as one import on your plan. The extension itself is free. Read more on the Chrome extension page.

Step by step: localhost to Figma

1. Install the HTML to Frames Chrome extension and pin it to the toolbar.
2. Start your dev server and open the page in Chrome, for example http://localhost:3000/settings.
3. Set the window width to the screen you want (more on this below).
4. Get the page into the state you want: logged in, data loaded, menu open.
5. Click the extension icon and choose to capture the whole page or select an element.
6. Deliver the capture to Figma, either through the clipboard or a .h2f file, or with Send to Figma.
7. In Figma, the plugin builds the layers and shows the result screen with frames, layers, Auto Layout share and any warnings.

Whole page vs a single element

The extension offers two capture modes.

Capture the whole page

This is the default for screens you want to review or redesign in full: a dashboard, a settings page, a landing page under development. You get one frame for the page with nested frames mirroring the DOM.

Select a single element

Often you only need a component: a pricing card, the navigation bar, a data table, a modal. Choose element selection and:

• Hover over the page; the element under your cursor is highlighted.
• Press ↑ to move to the parent element, ↓ to move to a child.
• Press Enter to capture the highlighted element.
• Press Esc to cancel.

Element capture is the fastest way to build a component reference from a live product, or to send a single widget to a designer for review without the rest of the page.

Two ways to deliver: clipboard/.h2f or Send to Figma

Clipboard and .h2f

The capture is copied to your clipboard, or saved as a .h2f file. In Figma, open the plugin, go to the Browser tab and paste. A .h2f file is handy when someone else captures the page (say, a PM with access to a client dashboard) and a designer imports it later.

Send to Figma

If you capture often, connect the extension to your plugin once with a one-time code. After that, captures go straight into the open plugin with no paste step. Keep the plugin open in Figma while you work.

One capture = one screen at your current window width

The extension captures what your browser renders, so one capture is one screen at the current window width. If your window is 1440 px wide, you get a 1440 desktop frame.

To capture other breakpoints, resize the window and capture again:

• Tablet: resize to around 768 px wide and capture.
• Mobile: resize to around 390 px wide and capture.

Chrome's DevTools device toolbar is a convenient way to set exact widths. Each capture counts as one import. If the page is public, the plugin's Link source can produce the full responsive set (Desktop + Tablet + Mobile) in a single import instead.

Capturing states that a URL can't reproduce

The extension captures the page's current state, which unlocks screens that are otherwise tedious to recreate:

• Open menus and dropdowns. Open the menu, then capture the page or select the menu element.
• Filled forms and validation errors. Fill the fields, submit to trigger errors, then capture.
• Carts and checkouts. Add products and capture the cart with real line items.
• Empty, loading and populated states. Capture the same dashboard with and without data for a state inventory.
• Modals and toasts. Trigger them and capture while they are on screen.

For product teams, this is the quickest way to document every state of a flow in Figma before a redesign or a usability review.

What comes through

The extension feeds the same conversion engine as every other source, so you get the full set of features covered on the features page: layout, mixed-style text, gradients, images, SVG as editable vectors, borders, shadows, blur, ::before/::after, form fields, shadow DOM and z-index order.

Auto Layout is inferred from the browser's measured geometry and verified: every child's position is checked within 2 px, and if it doesn't hold, a simpler plan is tried or the frame keeps absolute positions with sensible constraints. In our tests, Auto Layout was inferred on roughly 86 to 97 percent of frames, depending on the site. If you write the front end yourself, this mapping guide shows how to write CSS that imports cleanly.

Embedded content that can't become layers, such as iframes with maps, videos without a poster or WebGL canvases, comes in as a screenshot image of that box.

A quick pre-capture checklist

Run through this list before each capture session to avoid re-doing work:

• Width: is the window at the breakpoint you want, with browser zoom at 100%?
• Data: is the page fully loaded, including charts, images and lazy sections?
• State: are menus, modals or form errors visible exactly as you want them in Figma?
• Content: have you switched to a test account or seed data where real customer data would otherwise appear?
• Scope: do you need the whole page, or would a single element be clearer for review?
• Delivery: is the plugin open in Figma if you're using Send to Figma?

Two minutes here saves several rounds of capturing the same screen again.

Privacy for logged-in and internal pages

Capturing a dashboard means capturing whatever is on it. A few practical rules:

• The capture happens in your browser. Nothing leaves it unless you paste into Figma or use Send to Figma.
• Send to Figma is transient. The capture waits in memory until your plugin takes it, at most 30 minutes, and is not written to disk.
• Mask sensitive data first. Use test accounts or seed data when you can, because what is on screen ends up as text layers in your Figma file.
• Your Figma file is not read. The plugin only writes layers and reads its own frames' metadata.

See the security page for the full policy.

Troubleshooting

The capture is missing content that loads late

Wait until the page has fully loaded, including lazy sections and charts, before capturing. Scroll the page once if content loads on scroll.

The layout looks different from what I see

Check the window width; the capture reflects the current width exactly. Also make sure no browser zoom is applied.

Send to Figma does nothing

Make sure the plugin is open in Figma. If you paired a while ago or switched machines, pair again with a new one-time code. Captures wait up to 30 minutes, so opening the plugin within that window still delivers them.

Paste in the Browser tab doesn't work

Your clipboard may have been overwritten by another copy. Capture again, or save as a .h2f file and load that instead.

Fonts look wrong

Local or licensed web fonts may not be installed on your machine. The plugin's Missing fonts screen suggests replacements before building and remembers your choices per site.

Some frames are not Auto Layout

The results screen lists why a frame stayed absolute. Often it's overlapping content or negative margins. The frame still matches the page; it just keeps absolute positions with constraints.

Localhost to Figma in a developer workflow

For front-end developers, the extension turns design handoff into a two-way street:

1. Build the feature locally.
2. Capture the new screens at desktop and mobile widths.
3. Send them to Figma next to the original design.
4. Designers review the real implementation, comment, and adjust.
5. You fix, re-capture and compare.

If you build with AI tools, there's also a direct route: Claude Code, Claude Desktop or Cursor can send HTML to the plugin over MCP. See AI to Figma via MCP.

Getting started

Install the Chrome extension, open your local build, and capture one element first, a card or a button, to see how it comes through. Then capture the full page at desktop and mobile widths. The docs cover pairing and the Browser tab in detail, and pricing explains how captures count toward your imports.