Nora B.
Sample Finally a token pipeline that works
We went from copy pasted hex values to a Style Dictionary build in two weeks. The CI lesson was exactly what our team needed.
Design tokens: from Figma variables to CSS and app code
Structure, name and transform design tokens so one change in Figma flows through Style Dictionary into CSS, iOS and Android
Created by Ana Sousa
- Updated September 2026
- English
- Intermediate
What you will learn
- Explain primitive, semantic and component tokens and when to use each
- Name tokens with a consistent, readable convention
- Model tokens as Figma variable collections with light and dark modes
- Write tokens in the Design Tokens Community Group JSON format
- Transform tokens into CSS, iOS and Android outputs with Style Dictionary
- Theme components with CSS custom properties
- Version, publish and deprecate tokens safely
Course content
What design tokens are
Tokens in Figma
- Article: Figma variables as tokens 10 min
- Article: Modes for themes 10 min
- Article: Scopes and code syntax 8 min
- Article: Getting tokens out of Figma 11 min
Transforming tokens with Style Dictionary
- Article: Setting up Style Dictionary 10 min
- Article: Generating CSS custom properties 9 min
- Article: Transforms, formats and filters 11 min
- Article: Building light and dark themes 10 min
- Article: iOS and Android outputs 9 min
Using tokens in components
- Article: Theming with CSS custom properties 10 min
- Article: Tokens and Tailwind CSS 9 min
- Article: Component tokens in practice 9 min
- Article: Typography and motion tokens 9 min
Pipelines and governance
- Article: Git as the source of truth 9 min
- Article: Automating builds in CI 10 min
- Article: Versioning and changelogs 8 min
- Article: Deprecating and renaming tokens 8 min
Scaling the system
- Article: Multi brand theming 10 min
- Article: Density and platform modes 8 min
- Article: Auditing token adoption 8 min
- Quiz: Final check 6 min
Requirements
- Basic Figma knowledge including styles or variables
- Basic comfort with JSON and the command line; Node.js installed
Description
Design tokens are the named values behind an interface: colours, spacing, type sizes, radii, shadows and motion. When tokens are structured well, a brand colour change or a new dark theme becomes a small, safe edit. When they are not, the same hex value ends up copied into hundreds of files. This course shows you how to build a token system that connects design and code.
What you will build
You will create a token set for a fictional product, define it in Figma variables, export it to the W3C Design Tokens Community Group format and transform it with Style Dictionary into CSS custom properties and platform files. Then you will use those tokens in components and wire up light and dark themes.
- A three tier token architecture: primitive, semantic and component
- A naming convention people can actually remember
- Figma variable collections and modes that mirror the code
- A Style Dictionary build producing CSS, iOS and Android outputs
- A versioned token package published by a CI pipeline
Who it is for
The course is written for designers who want to understand the code side, and front end developers who want to understand the design side. You will touch JSON, a little JavaScript and the command line, but every step is explained. If you work on a design system or are about to start one, tokens are the foundation and the best place to begin.
All tools used are free: Figma's free plan for variables, Node.js, Style Dictionary and Git. A few Figma features, such as the variables REST API, need specific plans; I show plugin based alternatives.
Who this course is for
- Designers working on or starting a design system
- Front end developers who maintain shared styles
- Design technologists bridging design and engineering
Instructor
Ana Sousa
Design systems lead teaching tokens, components and governance that scale across teams
- 4.3 instructor rating
- 21 reviews
- 3,620 students
- 3 courses
- Sample
I have led design system work for product teams where several squads ship to the same interface. My job sits between design and front end engineering: defining tokens, designing and building components, writing documentation and setting up the process that keeps the system alive after launch.
I teach design systems as a product with users, not as a style guide. That means audits, roadmaps, contribution models and versioning, along with the hands on parts like Figma variables, token pipelines, Storybook and accessible component APIs.
My courses suit designers who want to understand the code side and developers who want to understand the design side. I explain the trade offs honestly, including when a team does not need a full system yet.
Student reviews
Hye-jin P.
Sample Naming guide saved arguments
Our naming debates ended once we adopted the convention from this course. Short and practical.
Kemi O.
Sample Useful for multi brand work
The brand layer approach is how we now handle two products from one system.
Akash V.
Sample Clear explanation of tiers
Primitive, semantic and component tokens finally make sense. The quick test for each tier is something I use in reviews.
Sophie R.
Sample Great for designers learning code
I was nervous about the command line, but every step was explained. The Figma modes lesson was my favourite.
Gabriel M.
Sample Solid DTCG coverage
Good explanation of the format and its current state. I would like more on Tokens Studio specifically.
Ruben D.
Sample Some tooling details differ
Plugin versions I used behaved a bit differently from the videos, but the concepts held up and the docs links helped.
Keep exploring
All Design Systems courses
More in Design Systems
$64.99
Enroll now