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. You can also send the capture directly to the open HTML to Figma plugin with a one-time pairing code.
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.
Send a capture directly to the Figma plugin
The public Chrome extension includes optional paired delivery. No extension account is required. Local .h2f download remains the default; choose Figma plugin under Deliver to only when you want to send a capture to your open plugin.
In Figma, open HTML to Figma, choose Files, then Connect extension. Copy the one-time pairing code into the extension's Figma plugin delivery field. Choose your capture area, widths and appearance, then start capture. Keep the source tab and the paired plugin open until the workflow finishes.
A pairing code is short-lived and single-use. Create a new code for the next capture, or if the previous code expires. An upload confirmation means the relay received the capture, not that Figma has finished creating layers. Return to the paired plugin and wait for its import result and font review.
- Open HTML to Figma → Files → Connect extension.
- Choose Figma plugin under Deliver to in the Chrome extension and paste the code.
- Capture, return to the paired plugin, and review the imported layers.
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.
Version 0.3.0 also supports ordered multi-area selection with Shift-click, Browser / Light / Dark appearance, and optional higher-resolution images and interactive-state capture. Light and Dark emulate the browser preference; a site's own theme switch may still need to be changed manually.
Understand the capture boundary
The default download workflow saves 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.
If you choose Figma plugin delivery and enter a pairing code, compressed .h2f bytes are sent over HTTPS through api.htmltofigma.com. The relay stores them only in memory for up to ten minutes, with deletion on consumption, cancellation or expiry. This is optional transfer, not cloud capture history. Readable debug JSON always downloads locally.
If direct delivery does not finish
If direct sending fails, the extension attempts to save the completed capture as a local .h2f file. Check its completion message and Chrome Downloads before capturing again. In the plugin, choose Files and import the downloaded capture.
If the final acknowledgement was lost, the paired plugin may already have received the capture. Check your Figma canvas before importing a fallback file to avoid duplicates. If no file was saved and no result arrived, capture again with Download .h2f selected.
For an expired code, create a new code in the plugin and replace the old one in the extension. If Figma reports an import error after receiving the capture, check for a recovery download. Include the extension and plugin versions, the stage that stopped, and any available copied diagnostics when contacting support; do not share private page content unless you intend to.
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. Download .h2f for file import, or use paired delivery to the open HTML to Figma plugin. Both routes need the companion plugin to create layers. It is not a native Figma clipboard exporter.
Where do I get the pairing code?
Open HTML to Figma inside your target Figma file, choose Files, then Connect extension. Copy the code into the Chrome extension under Deliver to → Figma plugin. Keep the plugin open; each code is temporary and single-use.
Do I have to upload my capture?
No. Download .h2f is the default and does not send captured page content to HTMLtoFigma. Only choosing Figma plugin delivery and entering a pairing code requests transfer through the temporary relay. Referenced assets may still be fetched from their original hosts in either mode.
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.