HTML Figma · Built for designers

Upload an HTML.
Paste into Figma.

Copy to Design turns any HTML file into a fully editable Figma file — layers, Auto Layout, text styles all preserved. No plugin. No engineer required.

Drag & drop One-click copy Sub-second
How it works

Three steps from HTML to Figma canvas.

No plugin, no sign-up, no asking an engineer for an export. Drag, copy, paste.

01Upload

Drop any HTML file

Works with single .html files or a .zip bundle. Processed in memory and discarded within 60 seconds.

HTML
02Copy

One click to clipboard

When conversion finishes, Figma node data lands in your clipboard. Or download a .fig file for later.

Copy to clipboard2.4 MB · 184 nodes C
03Paste

Press V in Figma

The full layer tree appears instantly — frames, Auto Layout, text styles, components — all natively editable.

Figma · pastedV
What's preserved

Not a screenshot. Editable layers.

We read the real DOM structure and map each element to its native Figma node.

Frames & Auto Layout

Flexbox and Grid resolve to native Auto Layout — gap, padding, and alignment inferred automatically.

Text styles

Font family, size, line-height, and weight are kept as reusable Figma text styles — ready to plug into your design system.

Color tokens

CSS colors are extracted as Figma Variables. Change one, everything updates.

Component detection

Repeated patterns are promoted to Figma components. Your design system re-emerges from your code.

Structure & naming

class names and semantic tags become Figma layer names — not a pile of Rectangle 42.

Zero plugins

No Figma plugin required — paste uses Figma's native clipboard protocol. Anyone on your team can use it immediately.

Use cases

When designers need to reverse the handoff.

You have HTML. You want to keep designing in Figma. That's why Copy to Design exists.

01 · Shipped pages

Pull production back onto canvas.

Engineering shipped a version. Your mockup is outdated. Upload the live HTML and get a synced Figma file as your new starting point.

Frameh1.titlep.bodyButtonlabelfooter
02 · AI-generated

Turn AI HTML into iterable design.

HTML from Claude, v0, Lovable — upload it and continue in Figma. Stop squinting at code to guess the structure.

<section><h1>...</h1><button />
03 · Inspiration

Capture any web page as editable.

See something you love? Save the HTML, upload, paste into Figma — deconstruct the layout and reuse it fast.

figma · capture.fig
Live playground

Drop an HTML file — try it now.

No sign-up. Processed locally. Hit "Copy" and paste straight into Figma.

playground/upload
local · nothing stored
Step 1 · Upload HTML
Drop an HTML file, or click to browse
Supports .html · up to 5 MB
Step 2 · Copy to FigmaWaiting for file
Your Figma layer tree will appear here
nodes: — · frames: — · text: — · latency: —
Pricing

Priced like a designer's tool.

Free tier covers most designers' daily use. Upgrade when you need more scale.

Free
$0 / month

A daily toolbelt, always on.

  • 5 conversions per month
  • Up to 2 MB per file
  • Layer tree preview
  • Copy-paste to Figma
Start free
Design & Dev
$39/ month

Shared across a design & dev team.

  • Everything in Designer
  • 600 conversions per month
  • API access for automated conversion
  • Priority support
FAQ

Answers, in straight lines.

Still wondering? Email [email protected].

Is the Figma output really editable?

Yes — fully. Every HTML element becomes a native Figma node: frames, text, vectors. Styles map to fills, strokes, and effects. You can select, rename, and restyle any layer.

Do you handle JavaScript-rendered pages?

Yes. We render the page in a headless browser first, then convert the final DOM to Figma nodes. If you upload static HTML, we skip the render step.

Why copy-paste instead of a plugin?

Figma's clipboard is a native protocol — it's faster, more stable, and requires zero install inside Figma. The rest of your team can use the output without lifting a finger.

How large a file can I convert?

Free tier: 2 MB per file (covers most pages). Designer: 20 MB. Beyond that we suggest splitting, or uploading a .zip bundle.

Do you store my files?

No. Everything is processed in memory and discarded within 60 seconds. Designer tier can opt into a 7-day history if you want to revisit recent conversions.

Sketch or XD export?

Figma only for now. Sketch export is on the roadmap — let us know if you need it.