Marcua releases Figmimic to turn live webpages into editable Figma layers

Developer Marcua has released Figmimic, a bookmarklet that allows users to copy any webpage and paste it directly into Figma as editable layers. Unlike traditional import tools that often rely on flat screenshots, Figmimic converts live web content into native Figma frames and layers, preserving the original nesting and hierarchy of the page.

The tool functions by embedding Figma's own capture.js library into a bookmarklet, which enables the serialization of the Document Object Model (DOM) directly into Figma's native file format. Because the tool runs within the user's active browser session, it is particularly effective for capturing dashboards, admin panels, and other applications hidden behind authentication walls that external import tools cannot access. Marcua noted that the bookmarklet and its accompanying landing page were developed with the assistance of Claude Code.

The discovery of capture.js

Designers have long struggled to keep Figma wireframes synchronized with shipped production code, often spending hours manually recreating elements or editing static image overlays. While Figma has integrated "code-to-canvas" capabilities within its Model Context Protocol (MCP) server, this functionality was not previously available as a standalone tool for the general user.

Figmimic was born from the exploration of these MCP tools, leading to the discovery of the capture.js script. Describing the process, Marcua stated, "Figmimic is less a creation than a discovery," highlighting that the core logic already existed within Figma's ecosystem and simply needed to be packaged for browser-side injection.

Bridging the design-engineering gap

This release addresses a persistent "tooling chasm" between design and engineering teams. By allowing designers to import live production environments instantly, the tool removes the friction of manual recreation. This enables faster iteration cycles, as designers can pull the exact state of a live app into their workspace to propose changes based on real-world implementation rather than idealized mockups.

What to watch

As the tool relies on the underlying capture.js library, its precision depends on how well that library interprets various CSS and HTML structures. Users should monitor how the tool handles complex visibility rules or specific element dimensions during the serialization process. It remains to be seen if Figma will officially integrate this specific bookmarklet-style workflow into its primary feature set or if it will remain a community-driven utility.