HTML to Figma Chrome extension
Bring the page you can actually see into Figma. Capture a signed-in dashboard, a localhost project or a selected area in your browser, then import the downloaded .h2f file as editable design.
When a public URL is not enough
A URL importer opens a page from a separate capture environment. It cannot automatically see the account session, local server or browser-only state that you are using. The HTML to Figma Chrome extension starts from the tab where that page is already open.
Use it for an internal dashboard you are authorized to access, a local development build, or a specific area of a larger page. It captures supported rendered content; it does not bypass authentication, protected resources or browser restrictions.
Capture in Chrome, import in Figma
Install HTML to Figma Capture from the Chrome Web Store and open the source page. Wait for the content you need to load. Keep private information out of the capture unless you intend to include it in your design file.
Open the extension and choose full-page capture or an area selection. Pick the current window or responsive widths, then start the capture. Download the resulting .h2f file.
Open the HTML to Figma plugin, choose Files, and select or drop the .h2f file. Review the generated layers and any font or asset warnings. The capture file is a handoff package, not a flat screenshot.
- For localhost, keep the local server running during capture.
- For file:// pages, enable file access for the extension in Chrome when needed.
- For signed-in pages, use a session you already have permission to access.
Capture the part that matters
Full-page capture is useful for redesign baselines. Area selection is better for a header, pricing block or dashboard panel: it keeps the Figma result focused and reduces unnecessary content.
Multiple viewport captures let you compare how the source responds at different widths. They do not turn an otherwise fixed website into a responsive design. Check that the source has finished responding to the chosen size.
Understand the capture boundary
The public store workflow downloads a local .h2f file. Captured content is not sent to HTMLtoFigma in this download mode, although referenced assets can be requested from the source website or its CDN. Importing that file into Figma is a separate action.
The file may contain private page content and embedded assets. Review it before sharing it with another person. Chrome internal pages and the Chrome Web Store cannot be captured, and protected cross-origin content may be unavailable.
Some development builds expose paired direct delivery. That optional path sends capture bytes through a short-lived HTTPS relay and has different data handling. Do not assume it is available in the store package: this guide uses the publicly documented download workflow.
FAQ
Questions before you import
Practical answers for chrome extension.
Is the Chrome extension required for public websites?
No. Use the plugin's Website tab for a supported public URL. Use the extension when the browser session or locally running page is important.
Can it capture private or signed-in pages?
It can capture many pages already open in an authorized browser session. Browser restrictions, protected assets and unsupported surfaces still apply. It does not acquire credentials or bypass access controls.
Does it copy native layers to the clipboard?
No. The documented store workflow downloads .h2f, which you import with the plugin. It is not a native Figma clipboard exporter.
Is the extension free?
The public Chrome Web Store listing describes the extension as free, with no account required. Practical capture and file limits still apply.