UnHTML vs a Screenshot Plus Image Trace: What You Actually Get

What "Screenshot Plus Trace" Actually Means

"Trace it" usually means one of two things in Figma: the built-in Vectorize feature, or a community tracer plugin. Both start from the same place, a flattened image. Both produce the same kind of output: vector geometry.

Figma's own Vectorize feature turns a static image into editable vector layers, but its documentation frames it around hand-drawn symbols, lettering, and illustrations, not UI screenshots. You select an image, open More in the secondary toolbar, and choose Vectorize. Nowhere in Figma's own description is there a mention of text layers or auto-layout coming out the other side, and the warning is explicit: complex or low-resolution images may not vectorize well. A screenshot of a text-heavy web page is close to the worst case that warning describes.

Community plugins like Image Tracer do the same job with a different interface: feed in a bitmap, get back scalable vector paths. These tools work purely on pixel data. They have no concept of the page's original DOM, its CSS, or which pixels used to be a paragraph of body copy versus a decorative icon. A heading and a drop shadow both become traced geometry, and neither one is text you can select, edit, or reflow.

What AI Screenshot Tools Add

A newer category sits between plain tracing and a real import: AI-powered screenshot-to-design plugins. image.to.design, for one, takes a screenshot and runs it through a model that extracts text, names layers something more useful than "Rectangle 17," applies auto-layout groups, and tries to identify components like buttons, nav bars, and cards.

That's a real step up from a tracer plugin, and it deserves a fair word for it: for a quick mockup of someone else's interface, or a reference you plan to redraw by hand anyway, that inferred structure can save real time. But it's still working from a flattened picture of the page, assembled after every CSS value that produced that picture is already gone. The tool reconstructs spacing, color, and layout from pixels and a trained guess, not from the numbers the browser actually used. div.RIOTS's own description says as much: complex or unusual designs may need manual cleanup.

Text extraction specifically still isn't something Figma does natively. A long-running feature request on Figma's own forum asking for built-in OCR has sat since April 2024, with a reply amounting to "we'll pass it along." The most recent activity still points people toward third-party plugins. Want text out of a screenshot in Figma today? You're relying on a plugin's model to guess it correctly, not on a built-in capability.

That guess can be wrong in ways that matter. OCR reads what the pixels look like, not what the markup says, so it has no way to tell you that a heading was actually an <h2> wrapped in a flex container with a 24px gap, or that a price was a live value pulled from a template rather than static copy. The reconstructed Figma file might look right at a glance, and for a one-off mockup that's often enough. But every number it shows you, spacing, corner radius, line height, is an estimate the model arrived at by looking at a picture, not a value it read off the page.

What UnHTML Captures Instead

UnHTML skips the screenshot step entirely. It reads the page's live DOM and CSS and builds frames, text, images, vectors, and auto-layout directly from what the browser actually rendered. Text comes in as text, because it was text in the page. Auto-layout comes from the page's real flexbox and grid rules, not a model's guess at where the gaps probably are.

The free plugin imports up to 500 layers per page, using absolute positioning. Pro removes that cap and adds auto-layout conversion, for $39 one-time per editor. Studio extends a Pro license to five editors for $119 one-time. By default the import makes zero network requests, nothing leaves your machine, and fetching remote assets is an explicit opt-in you have to turn on yourself.

Where UnHTML Still Falls Back

None of this makes the import pixel-exact, and it shouldn't claim to be. If a font used on the page isn't installed locally, UnHTML substitutes it, Inter by default, and logs every substitution in the import report so you know exactly what changed. If a section's layout is too complex to reproduce as clean auto-layout, it falls back to absolute positioning on its own rather than forcing a broken structure. Fidelity limits are the honest trade for working from the page's real structure instead of a picture of it. See how missing fonts get replaced and logged for the font side of that trade in more detail.

What matters is what the fallback preserves compared to a screenshot tool's cleanup work. When UnHTML falls back to absolute positioning, the text is still real text, the colors are still the page's actual CSS values, and the import report tells you exactly which frame fell back and why. A screenshot tool's cleanup, by contrast, is manual: you're the one who has to notice that a button's padding looks off and fix it by eye, because there was never a CSS value behind it to read in the first place.

Picking the Right Tool for the Job

The two approaches aren't really competing for the same job. Vectorize and tracer plugins are for static reference art: a mood board image, an annotated competitor screenshot, artwork you never intend to functionally rebuild. AI screenshot tools sit a step further, useful for a fast mockup when you don't need the result to match the source's real CSS.

An editable structure you actually intend to redesign or rebuild is a different job, and it's the one UnHTML and other structure-reading tools are built for. The distinction gets sharper once you compare specific tools: see which direction the conversion actually runs for how that plays out against Anima, and design to code and web to design are not the same job for why a tool built to go from design to code doesn't automatically work well in reverse.

Frequently Asked Questions

Can Figma's built-in Vectorize feature turn a screenshot into a working UI design?

Vectorize is built for static artwork like hand-drawn symbols, lettering, and illustrations. It converts an image into vector paths, but Figma's own documentation doesn't describe it producing text layers, frames, or auto-layout, and it warns that complex or low-resolution images may not vectorize well. A screenshot of a web page is exactly the complex, text-heavy case it isn't built for.

Do AI screenshot-to-Figma plugins produce real, editable text?

Some do, within limits. Plugins like image.to.design run OCR and layout inference over the flattened image and can extract text and guess at auto-layout groups, which is a real step up from plain tracing. But it's a reconstruction from pixels, built after the page's actual CSS values are gone, so spacing, exact color tokens, and font metadata are approximations the vendor itself says may need manual cleanup on complex designs.

What does UnHTML do differently from a screenshot-based tool?

UnHTML reads the page's live DOM and CSS instead of a flattened image, so text layers come from the page's real text, auto-layout comes from the page's real flexbox and grid rules, and colors and spacing come from the page's real CSS values. The free tier caps at 500 layers with absolute positioning; Pro removes the cap and adds auto-layout conversion for $39 one-time per editor.

Is UnHTML's import pixel-exact?

No, and it doesn't claim to be. Fonts that are not installed locally get substituted, Inter by default, and every substitution is logged in the import report. A frame that can't reproduce the captured geometry falls back to absolute positioning on its own rather than silently producing a worse layout.

Conclusion

A screenshot plus trace, whether that's Figma's native Vectorize, a tracer plugin, or an AI reconstruction, gives you vector geometry and, at best, an inferred approximation of structure. UnHTML gives you the page's actual CSS-mapped structure, with the fallbacks logged rather than hidden. Which one is right depends on whether you need reference art or a structure you intend to actually edit and rebuild.