Show HN: Open-source library to copy-paste HTML into Figma as editable layers

Rating

Jul 1, 2026 · via hackernews.com

Copy-paste rendered HTML directly into Figma as fully editable layers.

Bridges the dev-to-design gap by letting designers import live browser UI into Figma without plugins, saving significant manual recreation time.

FigmaOpen-sourceHTMLWorkflow

Visit Show HN: Open-source library to copy-paste HTML into Figma as editable layers →

Deep divePro

An open-source library that converts live, browser-rendered HTML into editable Figma layers via a simple copy-paste interaction — no plugin installation required. It works by traversing the DOM, capturing computed styles, and assembling a clipboard payload Figma can interpret natively. The promise is a tighter loop between coded components and design files without the usual friction of import plugins.

Why it stands out

The copy-paste mechanic is genuinely clever UX — it sidesteps plugin permission flows and works inside whatever browser workflow you already have. Getting computed styles rather than raw markup means what lands in Figma should actually reflect real rendering, not source-code approximations.

Best for

Generalist designers who work closely with a codebase or component library and want to pull production UI into Figma quickly for annotation, redlining, or concept iteration without maintaining a plugin dependency.

The full deep dive is a Pro perk

Why it stands out, who it's best for, the honest caveat, and our bottom line.

Go Pro — $5/mo →