Design system and tokens
summary
Insurance-company design system chronicles moving from a one‑person effort to an army of four developers and one designer, with an older codebase of 70 components replaced by small overridable building blocks. Practical claim: tokens improve maintainability and theming. Pipeline put tokens from Figma through Token Studio and Style Dictionary into TypeScript objects and then into CSS variables for components and scaffolding. Result: simplified to two levels of tokens (system + component), but some overrides break when levels change.
AI-written summary · about
chapters (12)
- 0:00Design system journey
- 1:10Agenda overview
- 3:20Rebranding and the birth of the design system
- 8:00Revamping with tokens
- 12:22Goals and benefits
- 15:56Design tokens purpose
- 21:44Token pipeline Figma to code
- 25:23Token tool challenges
- 29:24Current token setup
- 33:26Future improvements
- 36:00Takeaways and improvements
- 38:35Q&A: Semantic layers
related talks
25mDesign systems for agencies
01h 00mDesign Token Architecture
35mThe Evolution of Design Tokens
49mExploring the Anatomy of Design Systems
24mTiny Design Systems for Tiny Teams
18mOne design system to rule them all 1
16mIntroduction to Design Tokens
45mDesign System Typography: Intent, Application, and Scale