Design System Generatordraft
A Figma plugin that scaffolds a complete design system foundation — semantic tokens, primary components, and starter screens — in minutes instead of weeks.
TL;DR
- Input one brand color + a few choices (typography scale, density, motion preference) → get a complete design system foundation in Figma.
- Generates ~40 starter components, semantic token architecture, and 5 sample screens you can fork.
- Built so internal-tools teams can spin up a system in a day instead of waiting six weeks for design system support.
Why I built it
At any large org, the design system team is the bottleneck. Internal-tools teams need a basic system now — not in three months when the central team gets to them. Most end up re-inventing the wheel badly: copy-pasting colors, inventing components, drifting from brand.
The opportunity: 80% of design systems share the same scaffolding (semantic tokens × density × type scale × component primitives). Only the brand-specific bits actually need a human's judgment. So I built a plugin that produces the 80% in minutes — leaving humans to focus on the differentiating 20%.
First use case at PwC was for an internal admin tool. It went from "we need a system" to "system in Figma + starter screens" in one afternoon.
How it works
- Brand inputs: you paste your brand color (or up to 3) — the plugin generates a WCAG-clean semantic palette: background / content / border × primary / secondary / tertiary states.
- Density + scale prompts: a few questions ("compact / comfortable / spacious", "modern grotesque / classic serif / mono-flavoured") pick the typography + spacing tokens.
- Token generation: a full semantic token set lands as Figma Variables — tied to a sync schema for downstream pipeline use.
- Component scaffolding: ~40 components ship — buttons, inputs, cards, lists, navs — all wired through the tokens, with ready-made variants.
- Starter screens: 5 sample layouts (login, dashboard, table, form, empty state) so engineers see the system in context, not in isolation.
Stack
- Figma Plugin API for variable + component creation
- TypeScript + a strict component spec format
- Anthropic SDK for naming + categorisation suggestions ("what should we call this token cluster?")
- WCAG contrast math built-in to guarantee AA palettes
Example output
Try it
Currently invite-only while I stabilise the component coverage. If your team wants to pilot, ping me at hsuneja.suneja7@gmail.com.