I’m excited to share Figmimic, a bookmarklet that lets you copy any website or webapp into Figma in an editable state. The pasted result preserves nesting in Figma’s native format. If you’ve ever wanted to edit a design of an experience that’s already shipped but hasn’t been wireframed before, Figmimic can get you started. Here’s a video of Figmimic in action:
How to use Figmimic: install the bookmarklet, click the bookmarklet to copy any page, and paste the copied result into Figma.

Most product teams have experienced this problem: someone ships a user interface, and then a designer wants to update it in Figma. In a pinch, the designer will copy/paste a screenshot of the existing experience into Figma and then graft vector edits on top of the static image. That’s fine for quickly communicating a design change, but the more you need to edit something in the screenshot, the deeper the hole you dig for yourself. Figmimic skips the screenshot: when you import a screen, it serializes the DOM to Figma’s native file format. You get the full hierarchy and structure of a Figma file, and can click on any element to edit it. It does this with high fidelity to the original design.

While powerful, the underlying library isn’t perfect. I’ve seen it mess up some visibility rules and make some elements not as wide/tall as the original, but it’s been relatively easy to tweak the design to get it back to its original state. I haven’t tried using it to capture flows, interaction states, or animations, so I don’t know how well it would perform in those situations.

Figmimic is less a creation than a discovery. Meredith and I were playing around with Figma’s MCP tooling to figure out how B12’s design process could benefit from AI assistance. One “AI” feature we were excited about was the ability to point Figma’s MCP at any app or element in a browser and bring it into Figma. As we tried to use that feature, the MCP instructed us to paste/inject some code into the browser console in order to give it access to the DOM in that window.

That got us wondering if the code could be injected into any page even without the MCP being set up for it. To our delight, it could! When the MCP doesn’t initiate the code’s injection, the code falls back to copying the screen/element to the clipboard, which is perfect for then pasting into a Figma board. In the same Claude Code session that was directing us to inject the code, we asked Claude to create a bookmarklet for injecting into any page. We then asked it to make a webpage that explained how to install the bookmarklet, and a few edits later, Figmimic was born!

I’m not sure why Figma chose to hide this feature in their MCP. The feature doesn’t seem to use AI to translate the browser’s DOM into the Figma data model. As Figmimic shows, Figma’s code can be used on its own for a fast copy/paste from the web. There’s a broader discussion in the design/engineering world around the challenge of keeping wireframes and implementations in sync and whether code is the source of truth. In that context, I’m curious why Figma hasn’t exposed this feature more broadly, as it’s useful as a standalone experience. Newer tools will make it easier for designers to prototype new experiences directly in a codebase, but at the moment, there’s still a design/engineering tooling chasm. As long as we expect designers to do their work outside of the code, we should build bridges to help keep design and engineering artifacts in sync.