Paste any webpage into Figma
as editable layers

Capture a live page or element from Chrome, then paste layered content straight into Figma Desktop.

GitHub See how it works
Send2Figma product stage showing the capture dock on a webpage canvas

Presets

Device width capture

Capture at a device preset width.

Device Desktop 1440px
Fidelity

Editable keeps more layers editable in Figma. Exact matches the look more closely.

Fidelity report

86% editable

  • Text stays editable
  • Frames auto-layout ready
  • Effects flattened where needed

Paste in Figma Desktop with Cmd/Ctrl+V

Capture ready

checkout.example · Desktop 1440

Works with the tools you already use

How it works

From live Chrome to editable Figma in three steps.

Capture the viewport or a single element, pick Editable or Exact fidelity, then paste into Figma Desktop as layers you can restyle — or export tokens and clone via MCP.

  • Open any http(s) page and launch the Send2Figma dock
  • Capture with presets, custom width, or element select
  • Paste in Figma Desktop — or export tokens / clone via MCP
Capture progress demo on a blue canvas

Presets

Device width capture

capturing

Desktop (1440px)

Starting…

Processing: 8% — Starting…

Capabilities

Everything you need to capture,
tokenize, and recreate.

From honest fidelity modes to AI-ready Style Reference and Cursor MCP — one extension, two output paths.

Editable Figma layers panel demo
Homepage
Body
Container
Header
Main Content
Footer
Container

Watch layers stay editable

Editable mode keeps text and frames tweakable in Figma — not a flat PNG paste.

Exact fidelity mode controls demo
Fidelity

Exact matches the look more closely — hard effects become images.

  • Filters Rasterized
  • Shadows Flattened
  • Canvas Image

Add Exact when look matters

Rasterize hard effects when visual match comes first — filters, shadows, canvas.

Style Reference token export demo
Colors → STYLE.md
Type → AI-ready tokens
Components → tokens.json

Export a Style Reference

Colors, type, and components as .md for AI and .json for the Figma tokens plugin.

Structured specs.json output demo
JSON braces specs.json Schema check schema

Returns structured specs

Section layoutSpec / typeSpec / colorSpec for Cursor rebuilds — aliases win on spacing.

Preview before paste score demo

Preview

0% editable

3 rasters highlighted

Preview before you paste

See % editable, highlight rasters, then copy — or discard and recapture.

Built for fidelity

Honest capture. Editable when you need it. Exact when you don’t.

Layers

Not a flat PNG

editable Figma paste

Exact

When pixels matter

filters & shadows

Tokens

Style Reference

.md + Figma .json

MCP

Clone in Cursor

Next · React · HTML

Teams

Competitor audits without
starting from a blank frame.

Designers and builders use Send2Figma to restyle live sites in Figma and recreate sections in Cursor.

“I paste a competitor hero into Figma and restyle it in minutes instead of rebuilding frames by hand.”

Maya Chen

Product Designer, Northwind
“The MCP Style Reference stops the agent inventing colors. Specs win on spacing.”

Diego Santos

Frontend Lead, Relay
“Extract tokens from production, apply them in Figma, and keep the source of truth live.”

Priya Nair

Design Systems, Cortex
“Preview before copy is underrated — I see % editable, highlight rasters, then paste with confidence.”

Theo Park

Design Engineer, Ledger
“Device presets plus multi-size capture means one competitor audit covers mobile and desktop.”

Lena Ortiz

Product Design Lead, Beacon
“I paste a competitor hero into Figma and restyle it in minutes instead of rebuilding frames by hand.”

Maya Chen

Product Designer, Northwind
Get started

Install Send2Figma
in minutes.

Load the Chrome extension, open any page, capture, and paste into Figma Desktop. Optional: connect Web Clone MCP for Cursor.

chrome://extensions

$ Load unpacked → select the extension/ folder

Check Dock ready · Ctrl+Shift+H

Check Capture → paste figh2d in Figma Desktop

Check MCP: enable bridge · copy Cursor config

GitHub Connect MCP