Mapleform
One design system for five products
Service
Design systems
Duration
10 weeks
Year
2024
Stack
Figma variables · React · Storybook · Style Dictionary
5 → 1
design systems
62
shared components
In one paragraph
Five products, five button styles. We built one token-driven system in Figma and code, with dark mode from day one.
(04) — Case notes
The problem, what we built, and what changed. Numbers are from the client’s own analytics.
The problem
Mapleform had grown by acquisition. Five products, five sets of buttons, and a two-week wait for any cross-product change.
What we built
A token-driven design system: Figma variables and React components generated from the same source, documented in Storybook, with dark mode and accessibility checks built in.
The result
All five products now ship from one system of 62 components. A brand change that used to take a quarter took an afternoon.