WebCapture to Figma

Capture a whole website — desktop and mobile — as a JSON file you can import into Figma.

WebCapture turns any website into fully editable Figma layers — not a screenshot, not a flattened image, but real layers with real type, real colors, and the page's actual layout. WHY IT'S DIFFERENT Most website-to-Figma tools stop at static layout. WebCapture also captures what the page DOES: • Hover states — the exact color, shadow and transform change a button undergoes on hover, recorded on the layer • CSS animations — @keyframes captured in full, not just referenced by name • Scroll reveals — AOS, WOW.js, Framer Motion and similar reveal-on-scroll libraries detected and recorded • Sticky & fixed elements — headers and CTAs that stay pinned while scrolling import as sticky Figma layers that behave the same way in prototypes • Real links — page links and in-page anchors become working Figma prototype connections HOW IT WORKS 1. Open the page you want to capture and click the WebCapture icon 2. Choose Desktop, Mobile (6 real phone widths, 360–430px), Tablet (4 sizes), or Desktop + Mobile together 3. Click Capture — the page is read exactly as the browser renders it: computed styles, resolved fonts, real image formats, lazy-loaded content forced to load first 4. Copy the result and paste it into the companion "WebCapture to Figma" plugin — or fetch a URL directly inside the plugin without installing this extension at all WHAT GETS CAPTURED • Full layout, positioned exactly as the browser laid it out • Real type — resolved font family, size, weight, line height and letter spacing, with fallback resolution for variable fonts (a page's "Quicksand Variable" still becomes usable Quicksand instead of silently falling back to a generic font) • Images — PNG, JPEG, GIF, WebP and AVIF, auto-converted to formats Figma can import • Colors, gradients, shadows, borders and corner radii, exactly as rendered • Inline SVGs, with computed color baked in — so icons keep their real colors instead of importing as black silhouettes ALSO INCLUDED: COPY FOR LLM Every capture can also be copied as a compact, structured summary — layout, type, color palette, and every interaction — ready to paste into Claude, ChatGPT or any LLM to rebuild, redesign or critique the page. PERMISSIONS, EXPLAINED • Read/scripting access to the current page — needed to read its rendered layout and inject the capture engine • Debugger — used only for Mobile/Tablet device emulation (viewport, user agent, touch); Chrome does not expose device emulation without it • Downloads — used only if you choose "Save file" for a very large capture PRIVACY Nothing is uploaded anywhere by default. A capture stays in your browser until you choose to copy it to your clipboard or save it to a file. Pages behind a login are captured directly from your own signed-in tab, so nothing is ever sent to a third-party server to reach them.