4.6
(33 RATINGS)
13 WEEKS
COHORT-BASED COURSE
14 week Deep Dive into Design Tokens: From Basics to Expert-Level Implementation
HOSTED BY
Osama Eldrieny
Design Lead | Design Tokens Consultant | Creator
This course includes
📺
121 Video lessons
🔴
17 Live Sessions
✏️
16 Interactive Activities
🔗
10 Resource Links
📥
16 Downloadable Activity Files
🏅
Certificate of Completion
👨🏫
Direct Access to the Instructor
💬
Guided Feedback and Reflection
🤝
Exclusive Peer Community
🗂️
Lifetime Access to Course Materials
Course Overview
This course guides you from foundational principles to advanced applications of design tokens, empowering you to build scalable and consistent design systems.
In Module 1, you’ll build a solid understanding of design tokens and design systems, including naming conventions, token levels, and library publishing.
Module 2 dives into Figma Variables, where you’ll create and manage option, alias, and component-specific tokens. You'll also learn to convert tokens to CSS, implement tokens in code, and create both dark mode and new theme variations.
Module 3 expands on these skills with the Tokens Studio Plugin, covering live token previews, documentation, and GitHub integration. You’ll also apply tokens across multiple projects, manage dark mode and theme creation, and ensure efficient token implementation in code.
By course end, you’ll be well-prepared to create and maintain scalable design systems with Figma Variables and the Tokens Studio Plugin.
Course syllabus
Module 1
Module 1
Module 1
Foundations of Design Systems and Design Tokens
Foundations of Design Systems and Design Tokens
24 lessons
4 Live sessions
3 activities
3 project files
3 resources
24 lessons
4 Live sessions
3 activities
3 project files
3 resources
24 lessons
4 Live sessions
3 activities
3 project files
3 resources
In this foundational 3-week module, participants will immerse themselves in the essential concepts and practices of design systems and design tokens.
Through 24 lessons, 4 live sessions, 3 activities, and access to 3 project files and 3 resources, you'll explore the fundamentals of design systems, the importance of design tokens, and the tools used in the industry.
Starting with an introduction to design systems, you'll learn about their components, benefits, and the differences between variables and design tokens.
The module will guide you through understanding why design tokens are crucial in modern design tools, the process of creating tokens, and the challenges and benefits associated with them.
You'll also dive deep into systematic token naming, managing token levels, and crafting component-specific tokens.
By the end of this module, you'll have created a simple design system, applied tokens, and published your design system library, setting a strong foundation for more advanced topics in subsequent modules.
WEEK 1
sep 30 - OCT 6
2 Live sessions
1 activity
Live Session #1
Foundations of Design Tokens & Systems.
Discover what makes a design system truly scalable and how tokens act as its building blocks. We'll break down key terminology and relationships that every designer should internalize.
What You’ll Learn
Inside the Session
Introduction about the course
What is the Design System
The relationship between Design System and Design Tokens
Variables Vs Design Tokens
Best Tools for Design Tokens
Design Tokens Process
Why do we have to use Design Tokens in Design Tolols
Live Session #2
Exploring Design Tokens in Action: Figma & Tokens Studio.
Learn how tokens work conceptually across design tools, and how they’re used to control design decisions like spacing, typography, and color — even before touching Figma.
What You’ll Learn
Inside the Session
Figma Variables Interface, Tokens Studio Plugin Interface
Challenges and Benefits of Design Tokens
Design Tokens Essentials
Takeaways
Assignment #1
Use Figma Variables and Tokens Studio Plugin to Control Colors, Gradiants, Spacing, Border Radius & Typography
Submit one day before the next session.
WEEK 1
sep 30 - OCT 6
2 Live sessions
1 activity
WEEK 1
sep 30 - OCT 6
2 Live sessions
1 activity
Live Session #1
Foundations of Design Tokens & Systems.
Discover what makes a design system truly scalable and how tokens act as its building blocks. We'll break down key terminology and relationships that every designer should internalize.
What You’ll Learn
Inside the Session
Introduction about the course
What is the Design System
The relationship between Design System and Design Tokens
Variables Vs Design Tokens
Best Tools for Design Tokens
Design Tokens Process
Why do we have to use Design Tokens in Design Tolols
Live Session #2
Exploring Design Tokens in Action: Figma & Tokens Studio.
Learn how tokens work conceptually across design tools, and how they’re used to control design decisions like spacing, typography, and color — even before touching Figma.
What You’ll Learn
Inside the Session
Figma Variables Interface, Tokens Studio Plugin Interface
Challenges and Benefits of Design Tokens
Design Tokens Essentials
Takeaways
Assignment #1
Use Figma Variables and Tokens Studio Plugin to Control Colors, Gradiants, Spacing, Border Radius & Typography
Submit one day before the next session.
WEEK 2
mar 03 - mar 09
2 Live sessions
3 activities
LIVE SESSION #3
Creating Token Stories: Levels, Naming & Real-World Examples.
Go beyond naming conventions — understand the logic behind token levels, build a button token story, and plan for scale using examples from real design systems.
What You’ll Learn
Inside the Session
Tokens Levels
What is the best way to name my Tokens
Takeaways
Assignment #2
Craft a component token story for a button - Group Activity
Submit one day before the next session.
What You’ll Learn
Inside the Session
Naming Structure
Complex Example of Component Tokens
Takeaways
Assignment #3
Create Complex Example Tokens for a Button
Submit one day before the next session.
Live Session #4
Building with Purpose: Designing Components & Structuring Tokens.
Break down components into tokenizable parts and plan your option and alias tokens with precision across spacing, typography, and scopes.
What You’ll Learn
Inside the Session
Design Card Component. (Title, Des, Button)
Design Button Component, Simple
Figma Variables Interface
Plan & Create Option Tokens
Plan & Create Alias Tokens
Set Variables Scope
What is the Limitations for Assign Alias Tokens to components
Takeaways
Assignment #4
Plan, Create Option & Alias Tokens, Link your tokens to your components
Submit one day before the next session.
WEEK 2
mar 03 - mar 09
2 Live sessions
3 activities
WEEK 2
mar 03 - mar 09
2 Live sessions
3 activities
LIVE SESSION #3
Creating Token Stories: Levels, Naming & Real-World Examples.
Go beyond naming conventions — understand the logic behind token levels, build a button token story, and plan for scale using examples from real design systems.
What You’ll Learn
Inside the Session
Tokens Levels
What is the best way to name my Tokens
Takeaways
Assignment #2
Craft a component token story for a button - Group Activity
Submit one day before the next session.
What You’ll Learn
Inside the Session
Naming Structure
Complex Example of Component Tokens
Takeaways
Assignment #3
Create Complex Example Tokens for a Button
Submit one day before the next session.
Live Session #4
Building with Purpose: Designing Components & Structuring Tokens.
Break down components into tokenizable parts and plan your option and alias tokens with precision across spacing, typography, and scopes.
What You’ll Learn
Inside the Session
Design Card Component. (Title, Des, Button)
Design Button Component, Simple
Figma Variables Interface
Plan & Create Option Tokens
Plan & Create Alias Tokens
Set Variables Scope
What is the Limitations for Assign Alias Tokens to components
Takeaways
Assignment #4
Plan, Create Option & Alias Tokens, Link your tokens to your components
Submit one day before the next session.
WEEK 3
mar 10 - mar 16
2 Live sessions
2 activities
Live Session #5
From Semantic Tokens to CSS: Testing the Source of Truth Workflow.
Export tokens to JSON, convert them to CSS variables, and discuss automation limitations using Style Dictionary.
What You’ll Learn
Inside the Session
Intro about Project Files
Export Tokens to JSON
Introduction of Style Dictionary Configurator
Convert JSON to CSS
Test the source of truth process and check the limitation make the process not fully Automated
Takeaways
Assignment #5
Generate JSON, Convert it to CSS "Camel Case" and Test the one source of truth limitation
Submit one day before the next session.
Live Session #6
Semantic Systems in Practice: From Debugging to Component Token Design.
Review common pitfalls, fix issues, and plan out precise component token strategies for scalable token libraries.
What You’ll Learn
Inside the Session
Review tasks and learn how to fix the issues
Plan & Create Component Tokens
Takeaways
Assignment #6
Fix your Issues for Semantic Tokens Example, Then Plan and Create the Component Specific Tokens
Submit one day before the next session.
WEEK 3
mar 10 - mar 16
2 Live sessions
2 activities
WEEK 3
mar 10 - mar 16
2 Live sessions
2 activities
Live Session #5
From Semantic Tokens to CSS: Testing the Source of Truth Workflow.
Export tokens to JSON, convert them to CSS variables, and discuss automation limitations using Style Dictionary.
What You’ll Learn
Inside the Session
Intro about Project Files
Export Tokens to JSON
Introduction of Style Dictionary Configurator
Convert JSON to CSS
Test the source of truth process and check the limitation make the process not fully Automated
Takeaways
Assignment #5
Generate JSON, Convert it to CSS "Camel Case" and Test the one source of truth limitation
Submit one day before the next session.
Live Session #6
Semantic Systems in Practice: From Debugging to Component Token Design.
Review common pitfalls, fix issues, and plan out precise component token strategies for scalable token libraries.
What You’ll Learn
Inside the Session
Review tasks and learn how to fix the issues
Plan & Create Component Tokens
Takeaways
Assignment #6
Fix your Issues for Semantic Tokens Example, Then Plan and Create the Component Specific Tokens
Submit one day before the next session.
Module 2
Module 2
Module 2
Advanced Design Tokens with Figma Variables
Advanced Design Tokens with Figma Variables
55 lessons
8 Live sessions
8 activities
8 project files
4 resources
55 lessons
8 Live sessions
8 activities
8 project files
4 resources
55 lessons
8 Live sessions
8 activities
8 project files
4 resources
In this module, you’ll advance your skills in creating and managing design tokens using Figma Variables.
Spanning 55 lessons, 8 live sessions, 8 activities, 8 project files, and 4 resource files, you'll dive deep into the intricacies of option tokens, alias tokens, and component-specific tokens.
Starting with an introduction to Figma Variables, this module guides you through the structured creation of option tokens, from colors to typography, spacing, and borders, helping you build a foundation for scalable design systems. You'll dive into alias tokens and learn the nuances of setting variable scopes, while also creating component-specific tokens for elements such as logos, input fields, buttons, and login forms.
As you progress, the module covers the developer handoff process in detail: exporting tokens to JSON, converting them into CSS, and implementing them in your projects. You'll explore the Style Dictionary configurator, with hands-on guidance for using these tokens in a live design-to-development workflow. This journey culminates in creating dark mode and new brand tokens, where you’ll experience the efficiency of managing a single source of truth for consistent, adaptable designs across themes.
By the end, you’ll be equipped with the skills to implement a cohesive, flexible design system, utilizing Figma Variables to enhance collaboration and ensure design continuity across teams and projects.
WEEK 4
2 Live sessions
2 activities
Live Session #7
Applying Component-Specific Tokens & Testing Themes in Code.
Apply dark mode tokens, export them to CSS, and understand how to maintain consistency through variable-based theming.
What You’ll Learn
Inside the Session
Convert Tokens to JSON and CSS
Try the Dark Mode
Takeaways
Assignment #7
Apply Component-Specific Tokens to Card and Convert to CSS Variables
Submit one day before the next session.
Live Session #8
From Structure to Styling: Multi-Theme & Multi-Brand Component Tokens.
Create flexible token setups for light/dark themes and Arabic/English locales, and explore modern documentation strategies.
What You’ll Learn
Inside the Session
Set Card Tokens Structure. (Light, Dark, Arabic and English)
Plan for Component Tokens
Create Component Specific Tokens
New way to Tokens Documentation
Apply Component Tokens
Takeaways
Assignment #8
Plan, Create, and Apply for Multi Theme and Brand Component Tokens
Submit one day before the next session.
WEEK 4
2 Live sessions
2 activities
WEEK 4
2 Live sessions
2 activities
WEEK 5
2 Live sessions
2 activities
Live Session #9
Building Smart Themes – Creating and Coding Multi-Theme Tokens.
Build theme-specific tokens for dark mode and Arabic, convert them to code, and learn smart strategies for theme control.
What You’ll Learn
Inside the Session
Create Dark mode
Convert Dark mode to JSON and CSS and Apply in Project files
Create Arabic Version
Convert Arabic mode to JSON and CSS and Apply in Project files
Prepare Multi-Theme Tkoens Manually
The Magic
Takeaways
Assignment #9
Create Arabic Mode Components and Convert it to the code
Submit one day before the next session.
Live Session #10
Multi-Theme Review & Group Token Challenge.
Finalize multi-theme implementation, get feedback, test your token architecture, and explore new documentation workflows.
What You’ll Learn
Inside the Session
Review Assessment Tasks
New way to Tokens Documentation
Multi-Theme Group Test
Takeaways
Assignment #10
Group Challenge – Plan & Build Scalable Multi-Theme
Submit one day before the next session.
WEEK 5
2 Live sessions
2 activities
WEEK 5
2 Live sessions
2 activities
Live Session #9
Building Smart Themes – Creating and Coding Multi-Theme Tokens.
Build theme-specific tokens for dark mode and Arabic, convert them to code, and learn smart strategies for theme control.
What You’ll Learn
Inside the Session
Create Dark mode
Convert Dark mode to JSON and CSS and Apply in Project files
Create Arabic Version
Convert Arabic mode to JSON and CSS and Apply in Project files
Prepare Multi-Theme Tkoens Manually
The Magic
Takeaways
Assignment #9
Create Arabic Mode Components and Convert it to the code
Submit one day before the next session.
Live Session #10
Multi-Theme Review & Group Token Challenge.
Finalize multi-theme implementation, get feedback, test your token architecture, and explore new documentation workflows.
What You’ll Learn
Inside the Session
Review Assessment Tasks
New way to Tokens Documentation
Multi-Theme Group Test
Takeaways
Assignment #10
Group Challenge – Plan & Build Scalable Multi-Theme
Submit one day before the next session.
WEEK 6
2 Live sessions
2 activities
Live Session #11
Smart Components, Scalable Tokens & Responsive Layout – From Buttons to Final Project.
Learn how to publish your design library, use tokens for responsive components, and reduce token bloat through smart strategies.
What You’ll Learn
Inside the Session
How to Publish the library
How to create responsive component using Variables
Understand the Button
Plan for Button Component Specific Tokens
Think Smart - How to minimize the Tokens and still controlling everything
Strategy and Implementation
Case Studies
Final Project Task
Takeaways
Assignment #11
Design System Challenge – Build a Scalable, Multi-Theme Token
Submit one day before the next session.
Live Session #12
What's Next – Graduation, Tools & Community.
Explore additional tools, share resources, connect with peers, and graduate with confidence and clarity.
What You’ll Learn
Inside the Session
What is Next
Other Tokens Tools
Share Resources
Graduation & Certification: How to receive certificates.
Networking: Connect with the community.
Final Q&A: Open for last questions.
Takeaways
Final Project
Build scalable, Multi-Theme Design System with Case Study
Submit within two weeks
WEEK 6
2 Live sessions
2 activities
Live Session #11
Smart Components, Scalable Tokens & Responsive Layout – From Buttons to Final Project.
Learn how to publish your design library, use tokens for responsive components, and reduce token bloat through smart strategies.
What You’ll Learn
Inside the Session
How to Publish the library
How to create responsive component using Variables
Understand the Button
Plan for Button Component Specific Tokens
Think Smart - How to minimize the Tokens and still controlling everything
Strategy and Implementation
Case Studies
Final Project Task
Takeaways
Assignment #11
Design System Challenge – Build a Scalable, Multi-Theme Token
Submit one day before the next session.
Live Session #12
What's Next – Graduation, Tools & Community.
Explore additional tools, share resources, connect with peers, and graduate with confidence and clarity.
What You’ll Learn
Inside the Session
What is Next
Other Tokens Tools
Share Resources
Graduation & Certification: How to receive certificates.
Networking: Connect with the community.
Final Q&A: Open for last questions.
Takeaways
Final Project
Build scalable, Multi-Theme Design System with Case Study
Submit within two weeks
WEEK 6
2 Live sessions
2 activities
Live Session #11
Smart Components, Scalable Tokens & Responsive Layout – From Buttons to Final Project.
Learn how to publish your design library, use tokens for responsive components, and reduce token bloat through smart strategies.
What You’ll Learn
Inside the Session
How to Publish the library
How to create responsive component using Variables
Understand the Button
Plan for Button Component Specific Tokens
Think Smart - How to minimize the Tokens and still controlling everything
Strategy and Implementation
Case Studies
Final Project Task
Takeaways
Assignment #11
Design System Challenge – Build a Scalable, Multi-Theme Token
Submit one day before the next session.
Live Session #12
What's Next – Graduation, Tools & Community.
Explore additional tools, share resources, connect with peers, and graduate with confidence and clarity.
What You’ll Learn
Inside the Session
What is Next
Other Tokens Tools
Share Resources
Graduation & Certification: How to receive certificates.
Networking: Connect with the community.
Final Q&A: Open for last questions.
Takeaways
Final Project
Build scalable, Multi-Theme Design System with Case Study
Submit within two weeks
WEEK 7
Apr 07 - Apr 13
9 lessons
2 Live sessions
2 activities
2 project files
3 resources
Live Session #9
Live Q&A
Desc
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
Project file
Download Project Files
What You’ll Learn
Inside the Session
🚩 Tips and Tricks
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
Live Session #10
Convert JSON to CSS code
Desc
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
Takeaways
Implement Logo and Bg Image Tokens into the code
Create Logo and Bg Image Documentation, Export Code and implement CSS tokens to the code
Submit one day before the next session.
Project file
Download Activity 7 Files
Resource
Style Dictionary Documentation
Resource
Configurator Tutorial Video
Resource
Configurator Documentation Guide
WEEK 7
Apr 07 - Apr 13
9 lessons
2 Live sessions
2 activities
2 project files
3 resources
Live Session #9
Live Q&A
Desc
Live Session #10
Convert JSON to CSS code
Desc
WEEK 7
Apr 07 - Apr 13
9 lessons
2 Live sessions
2 activities
2 project files
3 resources
Live Session #9
Live Q&A
Desc
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
Project file
Download Project Files
What You’ll Learn
Inside the Session
🚩 Tips and Tricks
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
Live Session #10
Convert JSON to CSS code
Desc
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
Takeaways
Implement Logo and Bg Image Tokens into the code
Create Logo and Bg Image Documentation, Export Code and implement CSS tokens to the code
Submit one day before the next session.
Project file
Download Activity 7 Files
Resource
Style Dictionary Documentation
Resource
Configurator Tutorial Video
Resource
Configurator Documentation Guide
WEEK 8
Apr 14 - Apr 20
9 lessons
1 Live session
1 activities
1 project files
Live Session #11
Live Q&A
Desc
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
Takeaways
Implement Typography, InputField, Button, and Login Form Tokens into the Code
Create Tokens Documentation for Typography, InputField, Button, and Login Form, and Implement CSS Tokens into the code
Submit one day before the next session.
Project file
Download Activity 8 Files
WEEK 8
Apr 14 - Apr 20
9 lessons
1 Live session
1 activities
1 project files
Live Session #11
Live Q&A
Desc
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
Takeaways
Implement Typography, InputField, Button, and Login Form Tokens into the Code
Create Tokens Documentation for Typography, InputField, Button, and Login Form, and Implement CSS Tokens into the code
Submit one day before the next session.
Project file
Download Activity 8 Files
WEEK 8
Apr 14 - Apr 20
9 lessons
1 Live session
1 activities
1 project files
Live Session #11
Live Q&A
Desc
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
Takeaways
Implement Typography, InputField, Button, and Login Form Tokens into the Code
Create Tokens Documentation for Typography, InputField, Button, and Login Form, and Implement CSS Tokens into the code
Submit one day before the next session.
Project file
Download Activity 8 Files
WEEK 9
Apr 21 - Apr 27
11 lessons
1 Live session
2 activities
2 project files
Live Session #12
Live Q&A
Desc
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
Takeaways
Create Dark Mode
Create Dark Mode tokens, Export to JSOn, Convert JSON to CSS, and Implement CSS Tokens into the code
Submit one day before the next session.
Project file
Download Activity 9 Files
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
Takeaways
Create new brand
Create new brand Tokens, Export to JSON, Convert JSON to CSS, and Implement CSS Tokens into the code
Submit one day before the next session.
Project file
Download Activity 10 Files
WEEK 9
Apr 21 - Apr 27
11 lessons
1 Live session
2 activities
2 project files
Live Session #12
Live Q&A
Desc
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
Takeaways
Create Dark Mode
Create Dark Mode tokens, Export to JSOn, Convert JSON to CSS, and Implement CSS Tokens into the code
Submit one day before the next session.
Project file
Download Activity 9 Files
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
Takeaways
Create new brand
Create new brand Tokens, Export to JSON, Convert JSON to CSS, and Implement CSS Tokens into the code
Submit one day before the next session.
Project file
Download Activity 10 Files
WEEK 9
Apr 21 - Apr 27
11 lessons
1 Live session
2 activities
2 project files
Live Session #12
Live Q&A
Desc
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
Takeaways
Create Dark Mode
Create Dark Mode tokens, Export to JSOn, Convert JSON to CSS, and Implement CSS Tokens into the code
Submit one day before the next session.
Project file
Download Activity 9 Files
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
Takeaways
Create new brand
Create new brand Tokens, Export to JSON, Convert JSON to CSS, and Implement CSS Tokens into the code
Submit one day before the next session.
Project file
Download Activity 10 Files
Module 3
Module 3
Module 3
Advanced Design Tokens with Tokens Studio Plugin
Advanced Design Tokens with Tokens Studio Plugin
42 lessons
5 Live sessions
5 activities
5 project files
3 resources
42 lessons
5 Live sessions
5 activities
5 project files
3 resources
42 lessons
5 Live sessions
5 activities
5 project files
3 resources
This module, focused on the Tokens Studio Plugin, will elevate your expertise in managing and applying design tokens within your projects.
Throughout 42 lessons, 5 live sessions, 5 activities, 5 project files, and 3 resources files you'll gain a deep understanding of how to utilize the Tokens Studio Plugin to create, manage, and implement tokens effectively.
Starting with the Tokens Studio Plugin interface, you'll learn to convert Figma styles into tokens and back, create and group option and alias tokens, and apply them to specific components like logos, pages, and forms.
You will also explore advanced techniques for live previewing tokens, annotating documentation, and integrating them with CSS.
As the module progresses, you'll dive into the complexities of dark mode implementation, brand and theme creation, and the essential integration of your tokens with GitHub for version control.
By the end of this module, you’ll be equipped to manage design tokens across multiple projects with precision, ensuring a consistent and efficient design system workflow.
WEEK 10
Apr 28 - May 04
10 lessons
1 Live session
1 activity
1 project file
3 resources
Live Session #13
Live Q&A
Desc
What You’ll Learn
Inside the Session
Plugin Interface
Reset your Tokens
Convert Figma Styles to Tokens
Convert Tokens to Figma styles
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
🚩 Tips and Tricks
Takeaways
Create Option & Alias Tokens
Create and group your option & Alias Tokens for Colors, Sizing, Spacing, Borders, Fonts, Opacity, Icons, Logo, and Bg Image
Submit one day before the next session.
Project file
Download Activity 11 Files
Resource
Design Tokens Format Module Documentation
FREE
Resource
Tokens Studio Learning Resources
FREE
Resource
Tokens Studio for Figma Documentation
FREE
WEEK 10
Apr 28 - May 04
10 lessons
1 Live session
1 activity
1 project file
3 resources
Live Session #13
Live Q&A
Desc
WEEK 10
Apr 28 - May 04
10 lessons
1 Live session
1 activity
1 project file
3 resources
Live Session #13
Live Q&A
Desc
What You’ll Learn
Inside the Session
Plugin Interface
Reset your Tokens
Convert Figma Styles to Tokens
Convert Tokens to Figma styles
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
🚩 Tips and Tricks
Takeaways
Create Option & Alias Tokens
Create and group your option & Alias Tokens for Colors, Sizing, Spacing, Borders, Fonts, Opacity, Icons, Logo, and Bg Image
Submit one day before the next session.
Project file
Download Activity 11 Files
Resource
Design Tokens Format Module Documentation
FREE
Resource
Tokens Studio Learning Resources
FREE
Resource
Tokens Studio for Figma Documentation
FREE
WEEK 11
May 05 - May 11
8 lessons
1 Live session
1 activities
1 project files
Live Session #14
Live Q&A
Desc
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
🚩 Tips and Tricks
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
Takeaways
Create and Apply Component Specific Token for "Logo, Bg Image, Typography, Input Field, Button, and Login Form"
Create Component Specific Tokens for the heading, body text, and button
Submit one day before the next session.
Project file
Download Activity 12 Files
WEEK 11
May 05 - May 11
8 lessons
1 Live session
1 activities
1 project files
Live Session #14
Live Q&A
Desc
WEEK 11
May 05 - May 11
8 lessons
1 Live session
1 activities
1 project files
Live Session #14
Live Q&A
Desc
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
🚩 Tips and Tricks
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
Takeaways
Create and Apply Component Specific Token for "Logo, Bg Image, Typography, Input Field, Button, and Login Form"
Create Component Specific Tokens for the heading, body text, and button
Submit one day before the next session.
Project file
Download Activity 12 Files
WEEK 12
May 12 - May 18
12 lessons
1 Live session
1 activity
1 project file
Live Session #15
Live Q&A
Desc
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
Takeaways
Create Tokens Documentation & Implement Tokens in CSS
Create Component Specific Tokens for "Logo, Bg Image, Typography, Input Field, Button, and Login Form"
Submit one day before the next session.
Project file
Download Activity 13 Files
WEEK 12
May 12 - May 18
12 lessons
1 Live session
1 activity
1 project file
Live Session #15
Live Q&A
Desc
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
Takeaways
Create Tokens Documentation & Implement Tokens in CSS
Create Component Specific Tokens for "Logo, Bg Image, Typography, Input Field, Button, and Login Form"
Submit one day before the next session.
Project file
Download Activity 13 Files
WEEK 12
May 12 - May 18
12 lessons
1 Live session
1 activity
1 project file
Live Session #15
Live Q&A
Desc
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
Takeaways
Create Tokens Documentation & Implement Tokens in CSS
Create Component Specific Tokens for "Logo, Bg Image, Typography, Input Field, Button, and Login Form"
Submit one day before the next session.
Project file
Download Activity 13 Files
WEEK 13
May 19 - May 25
12 lessons
2 Live sessions
2 activities
2 project files
Live Session #16
Live Q&A
Desc
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
Takeaways
Create Dark Mode
Create Dark Mode Tokens and Implement it in the Code
Submit one day before the next session.
Project file
Download Activity 14 Files
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
Takeaways
Create a New Brand
Create a new Brand and implement it in the Code
Submit one day before the next session.
Project file
Download Activity 15 Files
Live Session #17
Congratulations and Good Bye
Desc
WEEK 13
May 19 - May 25
12 lessons
2 Live sessions
2 activities
2 project files
Live Session #16
Live Q&A
Desc
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
Takeaways
Create Dark Mode
Create Dark Mode Tokens and Implement it in the Code
Submit one day before the next session.
Project file
Download Activity 14 Files
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
Takeaways
Create a New Brand
Create a new Brand and implement it in the Code
Submit one day before the next session.
Project file
Download Activity 15 Files
Live Session #17
Congratulations and Good Bye
Desc
WEEK 13
May 19 - May 25
12 lessons
2 Live sessions
2 activities
2 project files
Live Session #16
Live Q&A
Desc
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
Takeaways
Create Dark Mode
Create Dark Mode Tokens and Implement it in the Code
Submit one day before the next session.
Project file
Download Activity 14 Files
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
What You’ll Learn
Inside the Session
Takeaways
Create a New Brand
Create a new Brand and implement it in the Code
Submit one day before the next session.
Project file
Download Activity 15 Files
Live Session #17
Congratulations and Good Bye
Desc