Project 01 Figma Plugin · AI · Personal
Design System Architect
Setting up a design system's token foundation is days of careful, repetitive work - and almost every team redoes it from zero. This plugin generates the whole foundation from a brand's identity, organized the way mature systems actually are.
- Type
- Figma plugin, AI-assisted
- Role
- Everything - concept, design, build
- Output
- Primitive + semantic token collections
- Modes
- Light · Dark · High contrast
At a glance
- What it is
- An AI-assisted Figma plugin that generates a complete, production-ready design token system from a brand's identity.
- The problem
- Token setup is days of careful, repetitive work - and nearly every team rebuilds it from zero, every project.
- My role
- Everything - concept, UX, visual design, and the build itself.
- Key idea
- Primitive/semantic token structure and all three modes (light, dark, high-contrast) generated together, not retrofitted.
- What it shows
- Systems thinking, design-system fluency, and the ability to ship a working tool solo.
- Status
- Working build - full coded flow embedded below.
What it does
- Takes brand colors, typography, and a few guided questions about the intended look and feel - or analyzes an uploaded brand document and extracts the fonts and colors itself.
- Generates a 10-step scale for every color family: brand, neutral, accent, and semantic.
- Separates output into primitive tokens and semantic tokens - the structure mature design systems converge on, built in from the first minute.
- Creates spacing, padding, and radius tokens plus text styles, and delivers everything into the file as neatly organized variable collections.
- Builds every mode at once: light, dark, and high contrast - accessibility included from the start, not retrofitted.
The plugin, screen by screen
The full eight-step flow below is a working spec I built in code - the same fidelity I hand to engineers. Scroll inside the frame to walk through it.
Fig. 01 - Welcome → brand identity → colors → typography → visual style → breakpoints → review → generate
Why it exists
This is the 5S instinct applied to my own craft: standardize the repeatable. Token setup is the same careful work on every project - which means it's exactly the kind of work a tool should do, so designers can spend their attention on the decisions that are actually different each time.