BlueprinterGitHub
Figma plugin · open source

Figma to code specs via recursive descendant traversal.

Blueprinter walks the full layer tree of any selection and emits precise layout, spacing, and typography specs. Pick a frame, get clean CSS, TypeScript, and Figma variable bindings - no measuring by hand.

View on GitHubTry the playground
TypeScript/Vite/Bun

Capabilities

Specs you would have written by hand, generated from the tree.

Recursive layout & spacing

Every descendant is traversed in order. Auto-layout direction, gaps, padding, and dimensions come out as exact, copy-ready values.

padding: 32px 28px;
gap: 20px;

Automated typography docs

Font family, size, weight, line height, and letter spacing for every text node, collated into a documentation table you can hand off.

font: 600 28px/34px;
letter-spacing: -0.4px;

Custom configuration

Choose the output format, units, naming convention, and which token namespaces to emit. The generator adapts to your codebase.

units: 'px' | 'rem'
naming: 'kebab' | 'camel'

Built on TS / Vite / Bun

A typed plugin core, instant Vite HMR while you iterate, and Bun for fast installs and tests. The whole thing stays snappy.

bun install
bun run build

Live playground

Walk a real layer tree. Watch the spec write itself.

This is the plugin in miniature. Hover a layer to preview, click to pin it, and switch output formats on the right.

blueprinter / pricing.fig
Layers
Canvasauto × auto

PRO

Team

$24/ mo
Start trial
Page / PricingCard / ProHeaderPlan title
/* Plan title */
.plan-title {
  font-family: "Inter";
  font-size: 28px;
  font-weight: 600;
  line-height: 34px;
  letter-spacing: -0.4px;
  color: #f2f3f5;
}
Hover or select a layer. Blueprinter walks each descendant and emits its spec.

Stop redlining by hand.

Blueprinter is free and open source. Clone it, run it, and ship your design specs from the same place you build them.

View on GitHub