Design System Manager | @kevintyj/design

About this plugin

Design System Manager

Generate → Sync → Ship

Documentation

Design System Manager turns a single JSON or base.ts config into a complete, Radix-based design-token system—12-step color scales (alpha, P3, light/dark included) and matching spacing tokens—then keeps everything in perfect, two-way sync between Figma variables and your codebase. One click and you’re exporting clean CSS custom properties, Tailwind-ready JSON, or collections you can import straight back into Figma—good-bye copy-pasting and token drift.

What does it do?

1. Instant token generation – Drop in a brand color and get accessible, APCA-safe 12-step scales with automatic dark mode.
2. Spacing made simple – Define a multiplier once; the plugin spits out a full px/rem spacing scale and optional utility classes.
3. Bidirectional variable sync – Create, update, and re-import color & spacing variables without leaving Figma.
4. Live preview & validation – See scales render in real time and catch config errors before they sneak in.
5. Multi-format export – CSS (hex / P3 / alpha), JSON (flat, nested, tokens, Tailwind), collections ZIPs, and more—batch-exported in seconds.
6. CLI companion – Prefer the terminal? Use bun run system:all to regenerate every format headless.

Perfect for

1. Design-to-dev hand-off: one source of truth across Figma, code, and docs.
2. Green-field or legacy systems: import existing tokens, or start from scratch.
3. Teams chasing AA/AAA contrast without mastering color theory.
4. Publish once, and every palette tweak—or spacing nudge—flows everywhere it needs to go.

Sample configuration

colors-figma.json

spaing-figma.json