Audio for Motion: Lifetime Plans Are Live: Get 20% OFF on Plus plan with Coupon - AUDIO20
WebCapture Chrome extension iconWEB CAPTURE - CHROME EXTENSION

Turn any websiteinto editable Figma layers

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.

Capture the Web
Real layers

Real type, real colors and the page's actual layout, exactly as the browser renders it.

Captures interactions

Hover states, CSS animations, scroll reveals, sticky elements and real links.

Copy for LLM

A compact, structured summary of the page, ready for Claude, ChatGPT or any LLM.

Most tools stop at layout. WebCapture captures what the page does

Static layout is only half the story. Interactions are recorded on the layers too.

Not a screenshot. Real layers.

The page is read exactly as the browser renders it: computed styles, resolved fonts, real image formats, and lazy-loaded content forced to load first.

Captures what the page does

  • Hover statesExact color, shadow and transform change, recorded on the layer
  • CSS animations@keyframes captured in full, not just referenced by name
  • Scroll revealsAOS, WOW.js, Framer Motion and similar libraries detected
  • Sticky & fixedHeaders and CTAs import as sticky Figma layers
  • Real linksPage links and in-page anchors become prototype connections

What gets captured

LayoutPositioned exactly as the browser laid it out
TypeFamily, size, weight, line height, letter spacing
Variable fonts"Quicksand Variable" becomes usable Quicksand
ImagesPNG, JPEG, GIF, WebP, AVIF auto-converted
StylingColors, gradients, shadows, borders, radii
Inline SVGComputed color baked in, no black silhouettes

Every screen size

DesktopMobile · 6 widths, 360–430pxTablet · 4 sizesDesktop + Mobile togetherFetch by URL in the plugin

Copy for LLM

A compact, structured summary of any capture. Paste it into Claude, ChatGPT or any LLM to rebuild, redesign or critique the page.

Private by default, clear about every permission

Nothing is uploaded anywhere by default.

Your data stays in your browser

A capture stays in your browser until you copy it or save it. Pages behind a login are captured from your own tab, so nothing goes to a third-party server.

When you capture

Page access

Read and scripting access to the current page, needed to read its rendered layout and inject the capture engine.

Mobile & Tablet only

Debugger

Used only for Mobile and Tablet device emulation (viewport, user agent, touch). Chrome does not expose device emulation without it.

Only if you choose

Downloads

Used only if you choose "Save file" for a very large capture.

From live site to editable Figma

Five steps. Pages behind a login work too, straight from your own signed-in tab.

  1. 1

    Open the page

    Open the page you want to capture and click the WebCapture icon.

  2. 2

    Choose a device

    Desktop, Mobile, Tablet, or Desktop + Mobile together.

  3. 3

    Click Capture

    The page is read as the browser renders it: computed styles, resolved fonts and lazy content.

  4. 4

    Copy the result

    Copy the capture to your clipboard, or save it as a file if it's very large.

  5. 5

    Paste into Figma

    Paste into the "WebCapture to Figma" plugin, or fetch a URL there directly without this extension.

WebCapture: frequently asked questions

What is WebCapture?

WebCapture is a Chrome extension that turns any website into fully editable Figma layers. It is not a screenshot or a flattened image, but real layers with real type, real colors and the page's actual layout.

How do I capture a page?

Open the page, click the WebCapture icon, choose a device and click Capture. Then copy the result and paste it into the "WebCapture to Figma" plugin, or fetch a URL there directly without the extension.

Which screen sizes can I capture?

Desktop, Mobile (6 phone widths from 360 to 430px), Tablet (4 sizes), or Desktop + Mobile together.

Does it capture more than layout?

Yes. It records hover states, CSS animations, scroll reveals, sticky and fixed elements, and real links, all on the layers. Page links and in-page anchors become prototype connections.

Is my data private?

A capture stays in your browser until you copy it or save it. Pages behind a login are captured from your own tab, so nothing goes to a third-party server. The debugger permission is used only for Mobile and Tablet emulation, and downloads only if you choose "Save file".

Capture any website

Stop rebuilding.
Start capturing.

Turn any website into fully editable Figma layers, with real type, real colors, the actual layout, and the interactions the page performs.

More plugins for faster Figma workflows

More Figma plugins for image conversion, audio and animation, built to keep your workflow inside Figma.

Image to Figma Design plugin icon

Image to Figma Design

Transform any image or screenshot into an editable Figma design with AI. Real layers, real components, pixel-accurate layouts.

Learn more
Audio for Motion plugin icon

Audio For Figma

Real sound effects, voiceovers and music synced live to the Motion playhead, right inside Figma.

Learn more
Capture Motion plugin icon

WebCapture - Chrome Extension

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

Learn more