Specialized Digital Design

Design Tokens

Make every color, space, and font a named, shared decision

12 lessons4 modules9h 15m durationbeginner level

Instructor: StretchLearn Faculty

About this course

Design tokens turn fuzzy decisions like our brand blue or our default spacing into named, versioned values that designers and developers share. This course teaches the three-tier taxonomy (global, alias, component), a naming convention that reads, theming with light and dark modes, and the full export pipeline from Figma Variables through Style Dictionary to CSS custom properties and JSON. You finish able to build a small token set, theme it, and sync it both directions.

Curriculum

Module 1: What Design Tokens Are and Why Tiers Matter3 lessons

What a token is, and what it is notPreview40m
The three tiers: global, alias, component🔒45m
The rebrand and the theme: the problems tiers solve🔒40m

Module 2: Naming Conventions and Token Structure3 lessons

A naming convention that reads🔒45m
Token structure in the DTCG JSON format🔒50m
Organizing files: collections, tiers, and modes🔒45m

Module 3: Theming and Modes3 lessons

Light and dark with modes🔒50m
Multi-brand and high-contrast themes🔒50m
Baking accessibility into your tokens🔒45m

Module 4: Export, Sync, and Governance3 lessons

Exporting to CSS and JSON with Style Dictionary🔒50m
Syncing Figma and code with Tokens Studio🔒50m
Versioning, deprecation, and governance🔒45m