Design Tokens
Course Index
28 Lessons · 3 Sections
Master design tokens — the single source of truth connecting design tools to code. Covers W3C Token Format, token taxonomy, Figma Variables, Style Dictionary & multi-brand theming. Includes 4 production deliverables: token library, multi-theme system, Style Dictionary pipeline & token documentation.
28Lessons
3Sections
4Projects
FreeAccess
Section 1Token Fundamentals & ArchitectureLessons 1–10
Lesson 1
What Are Design Tokens?
Lesson 2
Why Tokens? The Problem They Solve
Lesson 3
Token Types: Color, Spacing, Typography & More
Lesson 4
Three-Tier Architecture: Primitive, Semantic & Component
Lesson 5
Naming Conventions: Scalable Token Naming
Lesson 6
W3C DTCG Specification v1: The Standard
Lesson 7
Figma Variables: Native Token Implementation
Lesson 8
Figma Variable Modes: Light, Dark & Themes
Lesson 9
Tokens Studio: Plugin Workflow
Lesson 10
JSON Format: Token Files in Code
Section 2Tooling, Pipeline & Advanced SystemsLessons 11–22
Lesson 11
Style Dictionary: Transform Tokens to Code
Lesson 12
Generating CSS Custom Properties from Tokens
Lesson 13
Generating iOS Swift & Android Kotlin Tokens
Lesson 14
Git Integration: Tokens as Code
Lesson 15
CI/CD Pipeline for Token Distribution
Lesson 16
Dark Mode with Design Tokens
Lesson 17
Multi-Brand Token Architecture
Lesson 18
Responsive Tokens: Spacing & Typography Scale
Lesson 19
Motion & Interaction Tokens
Lesson 20
Token Documentation & Governance
Lesson 21
Token Drift: Auditing & Maintenance
Lesson 22
Tokens in Storybook: Design-Code Parity
Section 3AI & Generative UI, DTCG v1 & ProjectsLessons 23–28
Lesson 23
AI & Design Tokens: Generative UI in 2026
Lesson 24
DTCG v1 Implementation: 2026 Practical Guide
Lesson 25
Build a Token System in Figma Variables
Lesson 26
Export Tokens to CSS with Style Dictionary
Lesson 27
Build a Multi-Brand Token Architecture
Lesson 28
Set Up a Full Token Pipeline with CI/CD