Decal Get Decal

For designers who work from real pages

Any page on your machine, editable in Figma.

Decal renders the real thing — your dev server, your local build, your downloaded HTML — and rebuilds it as Figma layers you can select, restyle and pull apart. Not a screenshot. Not a trace.

Three captures a month, free. macOS.

Figma — pasted from Decal
▾ Frame · /pricing
▾ header
logo
nav
▾ section · hero
h1
p
▾ button
label
▾ pricing-grid
card × 3

Real text nodes, real fills, real auto-layout-ready structure — with the fonts and images that were on the page.

How it works

Three steps, no export

01

Point it at a folder

Open the folder your site lives in. Decal finds every screen — HTML files, framework routes, and any route you visit while browsing. Next.js, Vite, Vue, Laravel, plain HTML.

02

Pick a viewport and capture

Phone, tablet, desktop, or any width you type. Decal renders the page at that size and captures the real layout, not an approximation of it.

03

Paste in Figma

The companion plugin rebuilds it as editable layers. Text stays text, images come with it, and nothing is flattened.

Local pages, not public URLs

Decal runs the page on your machine, so it works on localhost, on a build that is not deployed, and behind whatever auth your dev server has. Nothing is uploaded.

Text stays text

Headings, paragraphs and labels arrive as Figma text nodes with their real font, size, weight and colour — ready to edit, not retype.

Every screen in one place

A project lists its screens as a tree. Capture one, or work through them, and each keeps its own captured-at mark so you can see what you have already done.

Your captures are kept

Every capture stays in the app with its screen, size and time, so you can paste one into Figma again days later without reloading anything.

Pricing

One price, everything in it

Free

To see whether it fits how you work.

$0

  • Three captures a month
  • Every viewport
  • The full Figma plugin
Download
Licence

Decal

For anyone doing this more than occasionally.

$19.99/year

  • Unlimited captures
  • Two machines per licence
  • Works offline once activated
  • A year of updates
Buy a licence

Already bought one? Paste the key into Decal, or manage your licence.

Questions

Before you buy

Is this a screenshot? +

No. Decal reads the rendered page — its real boxes, text runs, fills and images — and rebuilds them as Figma layers. A screenshot gives you one flat image; this gives you a layer tree you can edit.

Does it need my site to be online? +

No, and that is rather the point. It renders locally, so it works against a dev server, an unbuilt branch or a folder of HTML on your desktop. Nothing is uploaded anywhere.

What happens if my licence expires? +

Decal keeps opening and you keep every capture you have taken. New captures go back to the free allowance until you renew.

Does it work offline? +

Yes. Activation is the only step that needs the network. After that Decal verifies your licence on your own machine and keeps working on a plane.

How many machines? +

Two — a laptop and a desktop. You can release a machine yourself from within the app when you change hardware.

Which frameworks? +

Anything that serves pages: Next.js, Nuxt, Vite, Vue, Laravel, PHP, or plain HTML files with no server at all.

Stop rebuilding pages by hand

Three captures free, no account. See what lands on your canvas.

Download for macOS