Design System Manager | @kevintyj/design

About this plugin

Design System ManagerGenerate → Sync → ShipDocumentationDesign 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?Instant token generation – Drop in a brand color and get accessible, APCA-safe 12-step scales with automatic dark mode.Spacing made simple – Define a multiplier once; the plugin spits out a full px/rem spacing scale and optional utility classes.Bidirectional variable sync – Create, update, and re-import color & spacing variables without leaving Figma.Live preview & validation – See scales render in real time and catch config errors before they sneak in.Multi-format export – CSS (hex / P3 / alpha), JSON (flat, nested, tokens, Tailwind), collections ZIPs, and more—batch-exported in seconds.CLI companion – Prefer the terminal? Use bun run system:all to regenerate every format headless.Perfect forDesign-to-dev hand-off: one source of truth across Figma, code, and docs.Green-field or legacy systems: import existing tokens, or start from scratch.Teams chasing AA/AAA contrast without mastering color theory.Publish once, and every palette tweak—or spacing nudge—flows everywhere it needs to go.Sample configurationcolors-figma.json{"constantsLight": {"gray": "#878780","background": "#FFFFFF"},"constantsDark": {"gray": "#6F6D66","background": "#0F0F0E"},"light": {"blaze": "#FC4B32","autumn": "#311318","pink": "#F9486F","teal": "#00A77F","blue": "#286EDC","red": "#DA3132","yellow": "#FBB919","green": "#28B450","violet": "#5B5BD6"},"dark": {"blaze": "#FD563D","autumn": "#30181B","pink": "#F55776","teal": "#17AD85","blue": "#3A80E0","red": "#DE393A","yellow": "#FFBD3B","green": "#51B251","violet": "#5B5BD6"}}spaing-figma.json{"spacingMultiplier": 4,"remValue": 16,"spacing": {"0": 0,"1": 4,"2": 8,"3": 12,"4": 16,"5": 20,"6": 24,"7": 28,"8": 32,"9": 36,"10": 40,"11": 44,"12": 48,"13": 52,"14": 56,"15": 60,"16": 64,"18": 72,"20": 80,"1px": 1,"2px": 2,"3px": 3,"5px": 5,"6px": 6,"10px": 10,"14px": 14}}