the problem
The design system lived only in Figma, so everyone who built from it had to copy it by eye.
popeyes · 2026 · design + code
design system as code
I moved the app’s design system from Figma-only to a versioned code package that engineers and AI coding agents use directly.
the two-minute version
what i did
I built a versioned code package: tokens, 31 React and 12 React Native components, Storybook and automated checks.
the result
Engineering ships it as an internal package, and I’m the design sign-off on releases.
- react components
- 31
- react native components
- 12
- token tiers
- 3
the problem
a system you could only copy by eye
The design system lived only in Figma, so everyone who built from it, people or AI agents, had to copy it by eye.
the process
tokens first, then components
31 React components and a 3-tier token pipeline: primitive, semantic, component.
Storybook with light and dark mode and every breakpoint.
checks that catch drift
Automated checks: a linter for raw values, a Figma drift check and a render harness.
the solution
built for agents as well as people
A React Native token generator and 12 React Native components, plus an AGENTS.md file so AI agents follow the system.
impact & next steps
a package engineering ships
Engineering agreed to ship the system as a versioned internal package with pull-request review, and I became the design sign-off on releases.
the call i made: a conversation, not a pull request
I found the app’s existing system had an active owner and 236 places that imported it. So I started a conversation instead of opening a pull request, and recommended building on it rather than competing with it. I’d also found the app was React Native while my package was web-only, and adapted.
next up
menu simplification
My team cut the core menu from 44 items to 12 and rebuilt it as two simple levels: categories, then products.
or see all 20 projects