Decal renders the real thing — your dev server, your local build, your downloaded HTML — and rebuilds it as layers you can select and restyle.
HTML files, framework routes, and any route you visit while browsing. Next.js, Nuxt, Vite, Vue, Laravel, PHP, or a folder of plain HTML with no server at all.
Decal renders the page at that size and captures the real layout, not an approximation of it. Each screen remembers when you last captured it.
Headings, paragraphs and labels arrive as Figma text nodes with their real font, size, weight and colour — ready to edit, not retype. Images come with them.
Works on localhost, on a build that is not deployed, and behind your dev server's auth. Nothing is uploaded.
Activation is the only step that needs the network. After that Decal verifies your licence on your own machine.
Every capture stays in the app with its screen, size and time — paste one into Figma again days later.
Most of the work isn't reading a page — it's the handful of things that quietly go missing when you do.
Anything animated in on scroll is invisible at the moment of capture — which is how you end up with a page that's 85% empty. Decal walks the page, turns the transitions off, reveals what was built to fade in, then returns to the top so sticky headers land where they belong.
The whole font-family chain, not just the first name — so Figma substitutes down the same list the browser would, and tells you what it swapped instead of quietly making everything Inter.
Fetched outside the page, so CORS never applies and file:// images work — the ones a browser extension simply cannot reach.
Figma cannot decode WebP, so on a modern site those images arrive as empty frames. Decal converts them before they are sent.
Icons and logos arrive as editable paths rather than a flattened bitmap, sized in real pixels even when the source used em.
A capture never scrolls, so every loading="lazy" image below the fold would never load at all. Decal forces them and waits.
CSS gradients as native Figma gradients rather than pictures of gradients. Multi-layer shadows, corner radii and opacity as real properties. Line height and letter spacing in pixels. Right-to-left text aligned correctly. Closed drawers and skip links left out instead of arriving as stray frames.
Decal puts a capture on your clipboard; the plugin rebuilds it on your canvas as real layers. You need both, so the plugin is free and always will be — install it once and paste for as long as you use Decal.
To see whether it fits how you work.
$0
For anyone doing this more than occasionally.
$19.99/year
Already bought one? Paste the key into Decal, or manage your licence.
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.
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.
Decal keeps opening and you keep every capture you have taken. New captures go back to the free allowance until you renew.
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.
Two — a laptop and a desktop. You can release a machine yourself from your licence page when you change hardware.
Anything that serves pages: Next.js, Nuxt, Vite, Vue, Laravel, PHP, or plain HTML files with no server at all.
Three captures free, no account. See what lands on your canvas.
Download for macOS