The Evolution of Design Tokens
summary
Design tokens are a platform‑agnostic single source of truth stored as JSON, translated into CSS custom properties, Swift, XML and more via a translation layer (demos use Style Dictionary and exporters), so changing one value immediately regenerates code for web, iOS and Android. A cited case shows the problem scale: 200 designers, 2,000 engineers, 45 platforms, 22 design systems. Benefits: faster cross‑platform theming and synced docs; drawbacks: hard naming, initial setup time, and incomplete Figma support.
AI-written summary · about
chapters (17)
- 0:00Design tokens intro
- 1:15Early web styling methods
- 3:22CSS global design control
- 5:51Raw CSS limitations
- 7:16CSS custom properties
- 9:43Cross-platform inconsistencies
- 13:00Design tokens defined
- 15:54Platform-agnostic decisions
- 18:22Token structure
- 20:52Alias tokens and theming
- 21:55Layered token architecture
- 24:49Design tokens in Figma
- 26:38Token distribution
- 28:05Token management tools
- 30:32Benefits and drawbacks of design tokens
- 33:18Standardization progress
- 34:02Conclusion
related talks
13mLightning Talk: Design Tokens – Searching for a Source of Truth
01h 00mDesign Token Architecture
35mDesign Tokens for Cross-platform Design Systems
27mDesign Tokens and You
51mDesign system and tokens
16mIntroduction to Design Tokens
23mHow design tokens can make us better collaborators
11mDesign Tokens: Getting Agents to Follow Brand Guidelines