Every team says they have a design system. Usually they have a Figma file with some components in it. The difference shows up six months later, when a redesign takes a quarter instead of a sprint.
Tokens before components
The foundation isn't buttons, it's decisions. Color, spacing, typography, radius, and shadow encoded as named tokens. When the brand evolves, you change a token once and the entire product follows. Skip this layer and every future change becomes a manual hunt.
Components earn their place
A component joins the system when it's used three times, not when someone thinks it might be useful someday. Speculative components rot. Proven patterns, promoted deliberately with clear props and states, stay healthy.
- Name tokens by role (surface, accent) not value (blue-500)
- Document the why, not just the what, for each pattern
- Version the system and publish change logs engineers read
- Audit quarterly: usage analytics tell you what to prune
“A good design system is measured by the speed of the next feature, not the beauty of the documentation site.”
Built this way, the system becomes a flywheel: design moves faster because decisions are pre made, engineering moves faster because the UI is predictable, and the product feels coherent because consistency is the default rather than a discipline.
Irene Castillo
Design Director at Xpanix, writing from the trenches of real client projects.
