👋 Welcome

👋 Welcome

Design Tokens From Basic to Mastery

Design Tokens From Basic to Mastery

COHORT #2

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 lessons4 live sessions3 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

feb 24 - mar 02

6 lessons

1 Live session

3 resources

Live Session #1

Live Session about the course

WEEK 2

mar 03 - mar 09

8 lessons

2 Live sessions

2 activities

2 project files

LIVE SESSION #2

Live Q&A

Live Session #3

Complex example of Component tokens

WEEK 3

mar 10 - mar 16

10 lessons

1 Live session

1 activity

1 project files

Live Session #4

Live Q&A

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 lessons8 live sessions8 activities8 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

Mar 17 - Mar 23

12 lessons

1 Live session

1 activity

1 project file

1 resource

Live Session #5

Live Q&A

WEEK 4

Mar 17 - Mar 23

12 lessons

1 Live session

1 activity

1 project file

1 resource

Live Session #5

Live Q&A

WEEK 5

Mar 24 - Mar 30

7 lessons

2 Live sessions

1 activity

1 project file

Live Session #6

Live Q&A

Live Session #7

Plan Button Component Specific Tokens

WEEK 7

Apr 07 - Apr 13

9 lessons

2 Live sessions

2 activities

2 project files

3 resources

Live Session #9

Live Q&A

Live Session #10

Convert JSON to CSS code

WEEK 8

Apr 14 - Apr 20

9 lessons

1 Live session

1 activities

1 project files

Live Session #11

Live Q&A

Lesson

LoginForm Tokens Documentation

Lesson

Apply LoginForm Tokens in CSS

Lesson

Typography Tokens Documentation

Lesson

Apply Typography Tokens in CSS

Lesson

InputField Tokens Documentation

Lesson

Apply InputField Tokens in CSS

Lesson

Button Tokens Docuemntation

Lesson

Apply Buttons Tokens in CSS Part 1

Lesson

Apply Buttons Tokens in CSS Part 2

Activity #8

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 by Sun. Apr 20

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

Lesson

LoginForm Tokens Documentation

Lesson

Apply LoginForm Tokens in CSS

Lesson

Typography Tokens Documentation

Lesson

Apply Typography Tokens in CSS

Lesson

InputField Tokens Documentation

Lesson

Apply InputField Tokens in CSS

Lesson

Button Tokens Docuemntation

Lesson

Apply Buttons Tokens in CSS Part 1

Lesson

Apply Buttons Tokens in CSS Part 2

Activity #8

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 by Sun. Apr 20

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

Lesson

LoginForm Tokens Documentation

Lesson

Apply LoginForm Tokens in CSS

Lesson

Typography Tokens Documentation

Lesson

Apply Typography Tokens in CSS

Lesson

InputField Tokens Documentation

Lesson

Apply InputField Tokens in CSS

Lesson

Button Tokens Docuemntation

Lesson

Apply Buttons Tokens in CSS Part 1

Lesson

Apply Buttons Tokens in CSS Part 2

Activity #8

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 by Sun. Apr 20

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

Lesson

Create Dark Mode

Lesson

Export Dark Mode Tokens to JSON code

Lesson

Convert Dark mode JSON file to CSS

Lesson

Implement Dark Mode in Code

Activity #9

Create Dark Mode

Create Dark Mode tokens, Export to JSOn, Convert JSON to CSS, and Implement CSS Tokens into the code

Submit by Sun. Apr 27

Project file

Download Activity 9 Files

Lesson

Create new brand

Lesson

Create Logo for New Brand

Lesson

Create Bg Image for New Brand

Lesson

Export New Brand Tokens to JSON Code

Lesson

Conver New Brand JSON To CSS

Lesson

Implement New Brand in Code

Lesson

The Magic of One Source of Truth

Activity #10

Create new brand

Create new brand Tokens, Export to JSON, Convert JSON to CSS, and Implement CSS Tokens into the code

Submit by Sun. Apr 27

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

Lesson

Create Dark Mode

Lesson

Export Dark Mode Tokens to JSON code

Lesson

Convert Dark mode JSON file to CSS

Lesson

Implement Dark Mode in Code

Activity #9

Create Dark Mode

Create Dark Mode tokens, Export to JSOn, Convert JSON to CSS, and Implement CSS Tokens into the code

Submit by Sun. Apr 27

Project file

Download Activity 9 Files

Lesson

Create new brand

Lesson

Create Logo for New Brand

Lesson

Create Bg Image for New Brand

Lesson

Export New Brand Tokens to JSON Code

Lesson

Conver New Brand JSON To CSS

Lesson

Implement New Brand in Code

Lesson

The Magic of One Source of Truth

Activity #10

Create new brand

Create new brand Tokens, Export to JSON, Convert JSON to CSS, and Implement CSS Tokens into the code

Submit by Sun. Apr 27

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

Lesson

Create Dark Mode

Lesson

Export Dark Mode Tokens to JSON code

Lesson

Convert Dark mode JSON file to CSS

Lesson

Implement Dark Mode in Code

Activity #9

Create Dark Mode

Create Dark Mode tokens, Export to JSOn, Convert JSON to CSS, and Implement CSS Tokens into the code

Submit by Sun. Apr 27

Project file

Download Activity 9 Files

Lesson

Create new brand

Lesson

Create Logo for New Brand

Lesson

Create Bg Image for New Brand

Lesson

Export New Brand Tokens to JSON Code

Lesson

Conver New Brand JSON To CSS

Lesson

Implement New Brand in Code

Lesson

The Magic of One Source of Truth

Activity #10

Create new brand

Create new brand Tokens, Export to JSON, Convert JSON to CSS, and Implement CSS Tokens into the code

Submit by Sun. Apr 27

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 lessons5 live sessions5 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

Lesson

Tokens Studio Plugin Interface

Plugin Interface

Reset your Tokens

Convert Figma Styles to Tokens

Convert Tokens to Figma styles

Lesson

Create Option Tokens for Colors

Lesson

Create Option Tokens for Sizing

Lesson

Create Option Tokens for Spacing

Lesson

Create Option Tokens for Borders

Lesson

Create Option Tokens for Fonts

Lesson

Create Option Tokens for Opacity

Lesson

Create Option Tokens for Icons

Lesson

Create Option Tokens for Logo & Bg Image

Lesson

Create Alias Tokens

🚩 Tips and Tricks

Activity #11

Create Option & Alias Tokens

Create and group your option & Alias Tokens for Colors, Sizing, Spacing, Borders, Fonts, Opacity, Icons, Logo, and Bg Image

Submit by Sun. May 04

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

WEEK 10

Apr 28 - May 04

10 lessons

1 Live session

1 activity

1 project file

3 resources

Live Session #13

Live Q&A

Lesson

Tokens Studio Plugin Interface

Plugin Interface

Reset your Tokens

Convert Figma Styles to Tokens

Convert Tokens to Figma styles

Lesson

Create Option Tokens for Colors

Lesson

Create Option Tokens for Sizing

Lesson

Create Option Tokens for Spacing

Lesson

Create Option Tokens for Borders

Lesson

Create Option Tokens for Fonts

Lesson

Create Option Tokens for Opacity

Lesson

Create Option Tokens for Icons

Lesson

Create Option Tokens for Logo & Bg Image

Lesson

Create Alias Tokens

🚩 Tips and Tricks

Activity #11

Create Option & Alias Tokens

Create and group your option & Alias Tokens for Colors, Sizing, Spacing, Borders, Fonts, Opacity, Icons, Logo, and Bg Image

Submit by Sun. May 04

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

Lesson

Create Component Tokens for Logo & Bg Image

Lesson

Create Component Tokens for Typography

🚩 Tips and Tricks

Lesson

Create Component Tokens for Input Field

Lesson

Create Component Tokens for Button Part 1

Lesson

Create Component Tokens for Button Part 2

Lesson

Create Component Tokens for Login Form

Lesson

Publish Our Tokens

Lesson

Tokens Live Preview - Clapy Plugin

Activity #12

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 by Sun. May 11

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

WEEK 11

May 05 - May 11

8 lessons

1 Live session

1 activities

1 project files

Live Session #14

Live Q&A

Lesson

Create Component Tokens for Logo & Bg Image

Lesson

Create Component Tokens for Typography

🚩 Tips and Tricks

Lesson

Create Component Tokens for Input Field

Lesson

Create Component Tokens for Button Part 1

Lesson

Create Component Tokens for Button Part 2

Lesson

Create Component Tokens for Login Form

Lesson

Publish Our Tokens

Lesson

Tokens Live Preview - Clapy Plugin

Activity #12

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 by Sun. May 11

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

Lesson

Preview JSON Code

Lesson

Introduction of Style Dictionary Configurator

Lesson

Convert JSON Code to CSS

Lesson

Introduction about Project Files

Lesson

Link Variables CSS File to the Project

Lesson

Logo & Page Tokens Docs & CSS Guide

Lesson

Login Form Tokens Docs & CSS Guide

Lesson

Typography Tokens Docs & CSS Guide

Lesson

Input Field Tokens Docs & CSS Guide

Lesson

Button Tokens Docs & CSS Guide

Lesson

Up-To-Date Documentation

Lesson

Updated Documentation

Activity #13

Create Tokens Documentation & Implement Tokens in CSS

Create Component Specific Tokens for "Logo, Bg Image, Typography, Input Field, Button, and Login Form"

Submit by Sun. May 18

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

Lesson

Preview JSON Code

Lesson

Introduction of Style Dictionary Configurator

Lesson

Convert JSON Code to CSS

Lesson

Introduction about Project Files

Lesson

Link Variables CSS File to the Project

Lesson

Logo & Page Tokens Docs & CSS Guide

Lesson

Login Form Tokens Docs & CSS Guide

Lesson

Typography Tokens Docs & CSS Guide

Lesson

Input Field Tokens Docs & CSS Guide

Lesson

Button Tokens Docs & CSS Guide

Lesson

Up-To-Date Documentation

Lesson

Updated Documentation

Activity #13

Create Tokens Documentation & Implement Tokens in CSS

Create Component Specific Tokens for "Logo, Bg Image, Typography, Input Field, Button, and Login Form"

Submit by Sun. May 18

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

Lesson

Preview JSON Code

Lesson

Introduction of Style Dictionary Configurator

Lesson

Convert JSON Code to CSS

Lesson

Introduction about Project Files

Lesson

Link Variables CSS File to the Project

Lesson

Logo & Page Tokens Docs & CSS Guide

Lesson

Login Form Tokens Docs & CSS Guide

Lesson

Typography Tokens Docs & CSS Guide

Lesson

Input Field Tokens Docs & CSS Guide

Lesson

Button Tokens Docs & CSS Guide

Lesson

Up-To-Date Documentation

Lesson

Updated Documentation

Activity #13

Create Tokens Documentation & Implement Tokens in CSS

Create Component Specific Tokens for "Logo, Bg Image, Typography, Input Field, Button, and Login Form"

Submit by Sun. May 18

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

Lesson

Create Dark Mode

Lesson

Tokens Live Preview - Clapy Plugin

Lesson

Convert Dark Mode JSON file to CSS

Lesson

Implement Dark Mode in Code

Activity #14

Create Dark Mode

Create Dark Mode Tokens and Implement it in the Code

Submit by Sun. May 25

Project file

Download Activity 14 Files

Lesson

Create New Brand

Lesson

Tokens Live Preview - Clapy Plugin

Lesson

Convert New Brand Tokens to CSS

Lesson

Implement New Brand In Code

Lesson

The Magic of One Source of Truth

Lesson

Deep Inspect

Lesson

Create Tokens Using ChatGPT

Lesson

Connect Tokens Studio Plugin to GitHub

Activity #15

Create a New Brand

Create a new Brand and implement it in the Code

Submit by Sun. May 25

Project file

Download Activity 15 Files

Live Session #17

Congratulations and Good Bye

WEEK 13

May 19 - May 25

12 lessons

2 Live sessions

2 activities

2 project files

Live Session #16

Live Q&A

Lesson

Create Dark Mode

Lesson

Tokens Live Preview - Clapy Plugin

Lesson

Convert Dark Mode JSON file to CSS

Lesson

Implement Dark Mode in Code

Activity #14

Create Dark Mode

Create Dark Mode Tokens and Implement it in the Code

Submit by Sun. May 25

Project file

Download Activity 14 Files

Lesson

Create New Brand

Lesson

Tokens Live Preview - Clapy Plugin

Lesson

Convert New Brand Tokens to CSS

Lesson

Implement New Brand In Code

Lesson

The Magic of One Source of Truth

Lesson

Deep Inspect

Lesson

Create Tokens Using ChatGPT

Lesson

Connect Tokens Studio Plugin to GitHub

Activity #15

Create a New Brand

Create a new Brand and implement it in the Code

Submit by Sun. May 25

Project file

Download Activity 15 Files

Live Session #17

Congratulations and Good Bye

WEEK 13

May 19 - May 25

12 lessons

2 Live sessions

2 activities

2 project files

Live Session #16

Live Q&A

Lesson

Create Dark Mode

Lesson

Tokens Live Preview - Clapy Plugin

Lesson

Convert Dark Mode JSON file to CSS

Lesson

Implement Dark Mode in Code

Activity #14

Create Dark Mode

Create Dark Mode Tokens and Implement it in the Code

Submit by Sun. May 25

Project file

Download Activity 14 Files

Lesson

Create New Brand

Lesson

Tokens Live Preview - Clapy Plugin

Lesson

Convert New Brand Tokens to CSS

Lesson

Implement New Brand In Code

Lesson

The Magic of One Source of Truth

Lesson

Deep Inspect

Lesson

Create Tokens Using ChatGPT

Lesson

Connect Tokens Studio Plugin to GitHub

Activity #15

Create a New Brand

Create a new Brand and implement it in the Code

Submit by Sun. May 25

Project file

Download Activity 15 Files

Live Session #17

Congratulations and Good Bye

Your course access will be activated within the next 24 hours.

COURSE STARTED

Sep, 30, 2024

Nov, 11, 2024

Nov, 11, 2024

COURSE STARTED

Feb, 24, 2025