UnHTML vs Copying Elements From Chrome DevTools Into Figma

No, Chrome DevTools cannot copy an element straight into Figma. Every copy option it documents produces text: a CSS declaration, a rule, or the same values in JavaScript syntax. Getting editable layers needs either Figma's own Chrome extension or a file import. This article compares the three routes so you can pick by input, plan and job.

What DevTools copy gives you

The Styles pane in Chrome DevTools has a right-click menu on every CSS property. According to the DevTools CSS reference, the options are:

• Copy declaration: the property and its value in CSS syntax.
• Copy property: only the property name.
• Copy value: only the value.
• Copy rule: the entire rule, selector included.
• Copy all declarations: every property and value in the rule.
• Copy declaration as JS and Copy all declarations as JS: the same content in JavaScript syntax, which the reference calls handy for CSS-in-JS libraries.
• Copy all CSS changes: the edits you made in the Styles tab, part of an experimental setting called "Sync CSS changes in the Styles tab".

Computed styles

The Computed tab shows the CSS that is actually applied to an element, so you can ignore overridden declarations. Check Show All to include inherited properties. The reference does not describe a copy function inside the Computed tab, so you read those values rather than export them.

The gap

Every option above is text. Nothing in the documented menu creates a frame, a text layer or an auto layout container. Whatever you copy still has to be rebuilt in Figma by hand.

Rebuilding copied CSS by hand

The manual route works like this: copy the rule for an element, create a frame in Figma, then translate each declaration yourself. A display: flex rule with gap: 16px and justify-content: space-between becomes an auto layout frame with 16px spacing and space between distribution. Padding, border radius, font family and color each need their own pass.

That works for one button, one card, or a quick check of a value. It breaks down when the page has nested flex containers, a grid, or fifty repeated items. You also have to check fonts yourself, because a family that is not installed on your machine will not render as the page did.

DevTools copy suits reading a value. It doesn't suit producing layers.

Figma's own Chrome extension

Figma publishes a Chrome extension that goes directly from page to canvas. Per the Figma Help Center article, it offers two capture modes:

1. Select element: hover a region such as a card or button, then click to capture it.
2. Capture page: the capture includes parts of the page that are scrolled out of view.

Each capture lands in the toolbar tray and is copied to your clipboard. You paste it into a Figma Design file or a FigJam board with Cmd+V on macOS or Ctrl+V on Windows and Linux. The result is editable layers: frames, text, images and shapes.

The extension reads the code behind the web elements and translates it. Figma says it can apply certain auto layout properties, font properties and variables "if available", and it tries to bind existing color, number and string variables, including ones from libraries.

Two checks before you rely on it. First, the plan: the extension is available on all plans, but Figma states that code to canvas turns on once you are signed in to a paid plan. Second, fidelity: the help article lists no limitations, and its wording ("certain" properties, variables "if available") suggests coverage varies. Test it on your own page before committing a workflow to it.

What a file import does instead

UnHTML is a Figma plugin that works from a file instead of a live tab. It takes three inputs: a self-contained .html file, a Safari .webarchive, or a scene.json captured with its open-source CLI. You choose Desktop (1440px), Mobile (390px) or a custom width, then drop the file onto the plugin.

It maps flex and grid to auto layout. When a frame cannot reproduce the captured geometry, it falls back to absolute positioning. Fonts you do not have are substituted (Inter by default) and every substitution is listed in an import report. The result is editable layers, not a pixel-exact clone.

On privacy, the default is zero network requests. Remote fetching is opt-in, and scripts, inline event handlers and javascript: URLs are stripped from markup before rendering. For live sites, remote assets or pages built with JavaScript, the CLI or bookmarklet captures a scene.json first.

Pricing is one-time and, in the vendor's words, "launch pricing, and it may change". Checked 2026-10-10:

A node budget also guards against runaway imports, so a very large page can stop short of a full conversion.

Which route fits which job

Use DevTools copy when you are reading CSS. Use the extension when you are on a paid Figma plan and want a live element or page from an open tab. Use a file import when you want a whole page from a saved file, when the free 500-layer cap is enough, or when you need nothing to leave your machine. For login-gated pages, see how capturing a page behind a login works with a saved file.

How to test any route on your own page

Pick one real page and run the same three checks on each route, so the comparison rests on your content and not on a demo.

1. Count the layers. Note how many layers the result has and whether repeated items (a row of cards, a nav list) arrive as separate frames. The free file-import tier stops at 500 layers per import, so a long page is a useful stress test.
2. Inspect auto layout. Select a flex container from the source CSS, for example one with display: flex, gap: 24px and align-items: center. Check that the Figma frame has auto layout with a 24px gap and centered alignment. If it shows absolute positioning, that is a fallback, not a bug in your page.
3. Check the fonts. Open the text layers and compare the family to the page's font-family. A missing font is substituted, so a heading can look right at a glance and still carry the wrong family.

Write down what differs. A route that matches your page on these three checks will usually be fine for the rest of the work, and a route that fails one of them tells you where to expect manual cleanup.

Conclusion

DevTools is built for reading and debugging CSS, and its copy menu reflects that: it hands you text. Layers come from a capture tool. Figma's own extension is the nearest alternative if you already pay for a plan that includes code to canvas; a file import is the alternative when you want the page as a saved input with no network traffic by default. Whichever you pick, test it on your real page and read the output. Every route here has limits. If you want to see the file route in practice, start from the homepage.