The Power of Design Systems
summary
Claim: a company-wide design system cuts new bugs by 27% fewer bugs, slashes component code from 25k → 4k lines of code, and raises accessibility scores. Workflow runs from Figma to Token Studio + Stencil: designers tokenise in Figma, tokens export via a transformer to a cross‑platform package, developers consume web components and update apps by bumping a dependency. Multibrand theming works by layered tokens (core → semantic → component), most UI changes require no per‑component code edits, and the system remains framework‑agnostic.
AI-written summary · about
chapters (25)
- 0:00Introduction
- 0:51Agenda overview
- 2:23Design systems vs UI kits
- 3:27Challenges design systems solve
- 5:13Accessibility benefits
- 6:40Gains for development teams
- 8:04Success stories
- 9:56Metrics at Mergin
- 11:24Design tokens explained
- 13:31Token structure and naming
- 17:28Token complexity benefits
- 19:17Figma to development workflow
- 21:57Cross-platform tokens process
- 23:44Stencil framework-agnostic system
- 24:05Live demo Infinity design system
- 32:20Q&A
- 33:06Design token pitfalls
- 34:33Technical debt challenges
- 36:45Designer-developer collaboration
- 40:02Token automation limits
- 41:31Figma vs Token Studio
- 42:35Pricing and future plans
- 43:41Definition of ready and done
- 44:24Multi-brand platform differences
- 49:49Quick changes and consistency
