Design Tokens for Cross-platform Design Systems

on YouTube ↗35m

" summary

Shows a working pipeline that pulls Figma variables into a JSON token file, runs Style Dictionary transforms, and generates platform code — resulting in generated Kotlin and Swift files that immediately update the apps. Live demo changes a radius to 64 and flips dark/light palettes, runs a build script, and both Android and macOS apps reflect the new theme. Includes tips on primitive/semantic/component token layers and a GitHub repo with the scripts.

AI-written summary · about

" chapters (15)

1. 0:00Design tokens intro
2. 1:05What is a design system
3. 7:29Solving design system inconsistencies with tokens
4. 12:53Core token principles
5. 13:37Tokens as system foundation
6. 14:05Live demo setup
7. 17:20Real-time theme updates
8. 22:50Tokens with Material Design
9. 24:22Advanced token features
10. 25:27When to use tokens
11. 25:49Token implementation tips
12. 27:01Q&A: Figma vs Token Studio
13. 29:09Q&A: Team token collaboration
14. 31:39Q&A: A/B testing tokens
15. 33:05Q&A: Component vs semantic tokens

" related talks

• 27mDesign Tokens and YouMax Thorson · UtahJS Conf 2023
• 35mThe Evolution of Design TokensNils Wiere · code.talks 2023
• 18mOne design system to rule them all 1Daniel Beleza · droidcon London 2022
• 45mBridge the Gap between Design and DevelopmentSAMANTHA GORDASHKO · SmashingConf Freiburg 2024
• 49mExploring the Anatomy of Design SystemsDAN DONALD · SmashingConf Freiburg 2023
• 01h 00mDesign Token ArchitectureBrad, Ian Frost · CSS Day 2025
• 23mHow design tokens can make us better collaboratorsJan Six · Config 2022
• 21mLiving Design SystemsJina Bolton · CSSconf EU 2014