Figmimic turns any webpage into editable Figma layers

Share
Figmimic turns any webpage into editable Figma layers

The most useful design tool of the weekend is 15 lines of JavaScript. Figmimic, a bookmarklet from B12 engineer Andrew Musselman, copies any webpage you're looking at into Figma as fully editable frames — real nesting, real layers, not a flat screenshot — via a single click from the bookmarks bar. It hit the Hacker News front page on Friday and has been making the rounds among designers since.

What makes it more than a novelty is reach. Screenshot-to-design workflows break down exactly where the valuable interfaces live: dashboards, admin panels, and internal apps sitting behind logins that external capture tools can't touch. Because Figmimic runs in your own authenticated browser session, it captures those pages too. The mechanism is a clever bit of reuse — it injects Figma's own capture library (the same code Figma's MCP server tells you to paste into the browser console) without any MCP setup, and when the injection isn't initiated by the MCP, that code falls back to copying the page to your clipboard.

The origin story is the part worth stealing. Musselman writes that Figmimic is "less a creation than a discovery" — while exploring what Figma's MCP tooling could do for B12's design process, he noticed the console snippet it asked him to paste would work on any page, MCP or no MCP. That's a pattern teams should internalize as agent tooling spreads: the primitives that power official AI integrations are usually ordinary scripts lying around unguarded, and poking at them with "what happens if I run this elsewhere?" curiosity keeps turning side discoveries into products. It's also a quiet answer to the screenshot-to-Figma AI tools that have proliferated — the highest-fidelity conversion isn't a model guessing at pixels, it's the DOM serialized directly into Figma's native format.

The honest caveats are on the record: the author notes it sometimes mangles visibility rules or gets element dimensions slightly wrong, and nobody has tested it on flows, interaction states, or animations. Treat it as a starting point for editing shipped UI, not a pixel-perfect mirror. But for the most common real-world case — someone ships an interface, and a designer needs to propose changes in Figma — it collapses hours of grafting vectors onto screenshots into a paste.

What to watch: whether Figma embraces this usage or moves to gate its capture library behind proper authentication — the same trick cuts both ways, since any page can be cloned wholesale by a visitor's single click.

Has a browser-console detour ever turned into a real tool for your team? Tell us in the comments.

Sources: Figmimic · N=1 (marcua's blog) · Hacker News discussion