StretchLearn Course

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

Design tokens that survive a rebrand, theme cleanly, and flow from Figma into production CSS

Beginner9 hr 15 minSelf PacedRegistered

Course Overview

What this course is designed to develop

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.

Learning Outcomes

What the learner should be able to understand, build, or execute.

Distinguish global, alias, and component tokens and choose the right tier for each value

Apply a category-property-modifier naming convention that survives rebrands and reads in code

Structure tokens in the W3C DTCG JSON format with type, value, and reference fields

Build light, dark, and brand themes using modes and alias rebinding instead of duplicate values

Export a single token source to CSS custom properties and JSON with Style Dictionary

Sync tokens between Figma Variables and a code repository using Tokens Studio and GitHub

Curriculum Preview

Inside the curriculum: a structured path from fundamentals to execution.

Preview the course structure, see how the modules build on one another, and understand the path this program is designed to take you through.

Module 1

Module 1: What Design Tokens Are and Why Tiers Matter

Define tokens precisely, see the three-tier taxonomy, and understand the problem each tier solves before you write a single value.

3 lessons

What a token is, and what it is notContent · 40 min

Preview Enabled

The three tiers: global, alias, componentContent · 45 min

LMS Access

The rebrand and the theme: the problems tiers solveContent · 40 min

LMS Access

Module 2

Module 2: Naming Conventions and Token Structure

Adopt a naming pattern that reads in code, then express your tokens in the W3C DTCG JSON format with types and references.

3 lessons

A naming convention that readsContent · 45 min

LMS Access

Token structure in the DTCG JSON formatContent · 50 min

LMS Access

Organizing files: collections, tiers, and modesContent · 45 min

LMS Access

Module 3

Module 3: Theming and Modes

Build light and dark themes and multi-brand variants using modes and alias rebinding, and bake accessibility into the tokens themselves.

3 lessons

Light and dark with modesContent · 50 min

LMS Access

Multi-brand and high-contrast themesContent · 50 min

LMS Access

Baking accessibility into your tokensContent · 45 min

LMS Access

Module 4

Module 4: Export, Sync, and Governance

Pipe one token source to CSS and JSON with Style Dictionary, keep Figma and code in sync with Tokens Studio, and version and govern the set.

3 lessons

Exporting to CSS and JSON with Style DictionaryContent · 50 min

LMS Access

Syncing Figma and code with Tokens StudioContent · 50 min

LMS Access

Versioning, deprecation, and governanceContent · 45 min

LMS Access

Built for Application

A complete learning path, not a one-off inspiration hit.

This program is designed around progression: focused lessons, structured modules, applied resources, assessments, and a course rhythm that turns information into usable capability.

design tokensdesign systemsFigma variablesStyle DictionaryDTCGthemingCSS custom propertiesTokens Studio