Six teams had built 14 different buttons, and every handoff ended in a debate about spacing.
Demo case study. The story, team and numbers are placeholders that show how a real case study will read.
(Case study 04) Design system
A design system for a company with six product teams and six slightly different versions of everything. I designed it, built the components in React, and wrote the docs that teams actually read.
3 min read · 2024
Placeholder artwork
The 30-second version
For busy readersBuilt one token-based system in Figma and React, with docs written around real tasks.
Handoff got 40% faster, and 120+ components now ship from one source.
- 120+components
- 6product teams
- 40%faster handoff
Sample numbers
Six teams, six versions of the same button
Each team had moved fast on its own, which worked until the products had to look like one company. An audit found 14 buttons, 9 greys and 31 font sizes.
Designers and engineers spent the end of every sprint arguing over pixels instead of shipping.
I designed it, built it and shipped it.
- 01 · design
Ran the audit, defined the tokens and designed the component library in Figma.
- 02 · build
Built and tested the React components, with visual regression tests on every change.
- 03 · ship
Migrated the first two products myself, then supported the other four teams.
Team: 2 designers, 2 engineers
Teams did not want rules. They wanted fewer decisions
Interviews with each team showed nobody enjoyed choosing a grey. They just had no shared answer.
- Insight 01
Docs nobody opened
The old style guide had been opened 11 times in a year.
- Insight 02
Copying was the system
Teams copied components from whichever product they had worked on last.
- Insight 03
Engineers wanted names
A token called space-4 settled arguments that a hex code never could.
The calls that shaped the product
Why tokens came before components
Teams wanted a button library on day one.
Shipped
Colour, type and spacing as named values, shared by Figma and code. Every component after that was faster.
Why the docs are recipes
Reference docs had already failed once.
Shipped
“Build a settings page” beats “Button props”. Each recipe links to the parts it uses.
Figma and React from the same tokens
Tokens live in one JSON file that generates both the Figma variables and the CSS. Change a colour once and it updates everywhere.
Drag the slider to compare a Figma component with its React version.
FigmaProduction
- One source for tokens
- Visual tests on every pull request
- Accessible by default (WCAG AA)
From first beta to live
→ git log --releases
- v0.1Apr 2024Tokens in Figma and CSS
- v1.0Jul 202460 components, two products migrated
- v2.0Dec 2024120+ components, all six teams
✓ Used by all six product teams.
Fewer debates, faster handoff
- 120+components
- 6product teams
- 40%faster handoff
Sample numbers
The end-of-sprint pixel debates stopped, and a new product team shipped its first screen in three days.
What I would do next
A design system is a product with designers and engineers as its users. Treating it that way, with research and releases, is what made teams adopt it.
Where it's at: Used by all six product teams.
Next case study