Lessons learnt building a design system
summary
DataCamp builds a design system called Waffles that ships React + TypeScript components styled with Emotion, published as many small packages via Lerna so each package has independent versions and upgrades stay focused. The system starts from tokens in JSON, composes text → markdown → buttons → modals, and uses Storybook, react-testing-library and Stryker for live development and mutation-tested confidence. Documentation site dogfoods the components, the intent + appearance API for buttons reduces ambiguity, and the system proves usable across apps while easing upgrades and enforcing consistency.
AI-written summary · about
chapters (7)
- 0:00Introduction
- 6:49Start with existing assets
- 14:00Design system architecture
- 23:13Documentation as core
- 34:40Atomic design approach
- 48:33Component decision making
- 57:28Final thoughts and Q&A
related talks
21mDesign Systems 101: The Developer Approach to Better Frontends
25mBuilding a Design System as a team
14mBuilding a design system in Next.js with Tailwind
20mDesign Systems for the Rest of Us
35mDesign system - From a Developer Point-of-View
38mEmpathetic Design Systems
58mFrom nothing to state of the art
41mBuilding a design system with React in 2025, what's new?