Courses

/

Design Tokens from Basic to Mastery

Design Tokens From Basic to Mastery

Design Tokens From Basic to Mastery

4.6

(33 RATINGS)

14 WEEKS

COHORT-BASED COURSE

13 week Deep Dive into Design Tokens: From Basics to Expert-Level Implementation

HOSTED BY

Osama Eldrieny

Design Lead | Design Tokens Consultant | Creator

Design Tokens From Basic to Mastery

4.6

(33 RATINGS)

14 WEEKS

COHORT-BASED COURSE

13 week Deep Dive into Design Tokens: From Basics to Expert-Level Implementation

HOSTED BY

Osama Eldrieny

Design Lead | Design Tokens Consultant | Creator

Design Tokens: From Basic to Mastery

4.6

(33 RATINGS)

13 WEEKS

COHORT-BASED COURSE

13 week Deep Dive into Design Tokens: From Basics to Expert-Level Implementation

HOSTED BY

Osama Eldrieny

Design Lead | Design Tokens Consultant | Creator

NEXT COHORT

Apr 07, 2025

4.6

(33)

Pro Course

Basic Course

Pay Today

Pay Monthly

$995

$1200

13 Weeks Bootcamp

$1200 USD

Save $205

-$205 USD

Total

$995 USD

ENROLL

121 On-Demand Lessons

Certificate of Completion

Lifetime Course Access

Downloadable Project Files

17 Live Interactive Sessions

Direct Instructor Support

Feedback on Your Work

Join an Exclusive Community

NEXT COHORT

Apr 07, 2025

4.6

(33)

Pro Course

Basic Course

Pay Today

Pay Monthly

$995

$1200

13 Weeks Bootcamp

$1200 USD

Save $205

-$205 USD

Total

$995 USD

ENROLL

121 On-Demand Lessons

Certificate of Completion

Lifetime Course Access

Downloadable Project Files

17 Live Interactive Sessions

Direct Instructor Support

Feedback on Your Work

Join an Exclusive Community

NEXT COHORT

Apr 07, 2025

4.6

(33)

Pro Course

Basic Course

Pay Today

Pay Monthly

$995

$1200

13 Weeks Bootcamp

$1200 USD

Save $205

-$205 USD

Total

$995 USD

ENROLL

121 On-Demand Lessons

Certificate of Completion

Lifetime Course Access

Downloadable Project Files

17 Live Interactive Sessions

Direct Instructor Support

Feedback on Your Work

Join an Exclusive Community

4.6

(33 RATINGS)

13 WEEKS

COHORT-BASED COURSE

13 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

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

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.

Who I made this course for

Who I made this course for

1

Designers Seeking to Level Up, For designers ready to adopt token-driven design and enhance their design systems.

2

UX/UI Leads Building Scalable Systems, For UX/UI Leads building flexible, scalable design systems with a strong token strategy.

3

Developers Integrating Design Systems, For developers who want to integrate design tokens for consistent, scalable projects.

Course syllabus

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

Apr 07 - Apr 13

6 lessons

1 Live session

3 resources

Live Session #1

Live Session about the course

WEEK 2

Apr 14 - Apr 20

8 lessons

2 Live sessions

2 activities

2 project files

LIVE SESSION #2

Live Q&A

Lesson

Challenges and Benefits of Design Tokens

Team Challenges and Benefits

Company Challenges and Benefits

Lesson

Design Tokens Essentials

Transfer values to choices

Systematic naming

Define the design tokens decision

Reuse tokens as a reference

Be Flexible

Lesson

Tokens Levels

Option / Reference Tokens

Alias / Semantic Tokens

Component Specific Tokens

Lesson

What is the best way to name my token?

Don’t Think alone

Make up a story of Token

Activity #1

Craft a component token story for a button

Define the background color, text color, corner radius, width, and height.

Submit by Sun. Apr 20

Project file

Download Button Component Tokens Story

Lesson

Naming Structure

Live Session #3

Complex example of Component tokens

Lesson

Complex example of Component tokens

Activity #2

Create complex example tokens for a Button

Create Option Tokens, Alias tokens, and Component tokens to define the Border Color, Border Width, Padding X, and Padding Y

Submit by Sun. Apr 20

Project file

Download Complex Button Tokens Example

Lesson

Strategy and Implementation

🚩 Tips and Tricks

Challenges you gonna face

Lesson

Case Studies

Case Study #1: Cost Savings from Reduced Design and Development Cycles

Case Study #2: Time Saved on Design Iterations and Development Debugging

Case Study #3: Return on Investment (ROI)

WEEK 2

Apr 14 - Apr 20

8 lessons

2 Live sessions

2 activities

2 project files

LIVE SESSION #2

Live Q&A

Lesson

Challenges and Benefits of Design Tokens

Team Challenges and Benefits

Company Challenges and Benefits

Lesson

Design Tokens Essentials

Transfer values to choices

Systematic naming

Define the design tokens decision

Reuse tokens as a reference

Be Flexible

Lesson

Tokens Levels

Option / Reference Tokens

Alias / Semantic Tokens

Component Specific Tokens

Lesson

What is the best way to name my token?

Don’t Think alone

Make up a story of Token

Activity #1

Craft a component token story for a button

Define the background color, text color, corner radius, width, and height.

Submit by Sun. Apr 20

Project file

Download Button Component Tokens Story

Lesson

Naming Structure

Live Session #3

Complex example of Component tokens

Lesson

Complex example of Component tokens

Activity #2

Create complex example tokens for a Button

Create Option Tokens, Alias tokens, and Component tokens to define the Border Color, Border Width, Padding X, and Padding Y

Submit by Sun. Apr 20

Project file

Download Complex Button Tokens Example

Lesson

Strategy and Implementation

🚩 Tips and Tricks

Challenges you gonna face

Lesson

Case Studies

Case Study #1: Cost Savings from Reduced Design and Development Cycles

Case Study #2: Time Saved on Design Iterations and Development Debugging

Case Study #3: Return on Investment (ROI)

WEEK 2

Apr 14 - Apr 20

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

Apr 21 - Apr 27

10 lessons

1 Live session

1 activity

1 project files

Live Session #4

Live Q&A

Lesson

Design Login Page

Lesson

Create Logo Component

Lesson

Publish your Design System

Lesson

Mastering Typography in Design System

FREE

Lesson

Create Typography Component

Lesson

Create Icons Components

Lesson

Create Input Field Component

Lesson

Create Button Component Part 1

Lesson

Create Button Component Part 2

Lesson

Create Login Form Component

Activity #3

Design Login Page

Design Login Page with Components

Submit by Sun. Apr 27

Project file

Dowonload Full project files

WEEK 3

Apr 21 - Apr 27

10 lessons

1 Live session

1 activity

1 project files

Live Session #4

Live Q&A

Lesson

Design Login Page

Lesson

Create Logo Component

Lesson

Publish your Design System

Lesson

Mastering Typography in Design System

FREE

Lesson

Create Typography Component

Lesson

Create Icons Components

Lesson

Create Input Field Component

Lesson

Create Button Component Part 1

Lesson

Create Button Component Part 2

Lesson

Create Login Form Component

Activity #3

Design Login Page

Design Login Page with Components

Submit by Sun. Apr 27

Project file

Dowonload Full project files

WEEK 3

Apr 21 - Apr 27

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

Apr 28 - May 04

12 lessons

1 Live session

1 activity

1 project file

1 resource

Live Session #5

Live Q&A

Lesson

Figma Variables Interface

Resource

Overview of Variables

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 and Bg Image

Lesson

Plan for Alias Tokens

🚩 Tips and Tricks

Lesson

Create Alias Tokens

Lesson

Setting Variables Scope

Activity #4

Create Option and Alias Tokens

Create and group your Option and Alias Tokens Colors, Sizing, Spacing, Borders, Fonts. Opacities, Logos, and Images

Submit by Sun. May 04

Project file

Download Activity 4 Files

WEEK 4

Apr 28 - May 04

12 lessons

1 Live session

1 activity

1 project file

1 resource

Live Session #5

Live Q&A

Lesson

Figma Variables Interface

Resource

Overview of Variables

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 and Bg Image

Lesson

Plan for Alias Tokens

🚩 Tips and Tricks

Lesson

Create Alias Tokens

Lesson

Setting Variables Scope

Activity #4

Create Option and Alias Tokens

Create and group your Option and Alias Tokens Colors, Sizing, Spacing, Borders, Fonts. Opacities, Logos, and Images

Submit by Sun. May 04

Project file

Download Activity 4 Files

WEEK 4

Apr 28 - May 04

12 lessons

1 Live session

1 activity

1 project file

1 resource

Live Session #5

Live Q&A

WEEK 5

May 05 - May 11

7 lessons

2 Live sessions

1 activity

1 project file

Live Session #6

Live Q&A

Lesson

Plan & Create Logo Component Specific Tokens

Lesson

Plan & Create Bg Image Component Specific Tokens

Lesson

Plan Typography Component Specific Tokens

Lesson

Create Typography Component Specific Tokens

Lesson

Plan Input Field Component Specific Tokens

Lesson

Create Input Field Component Specific Tokens

Activity #5

Plan, Create, and Apply Component Specific Tokens for the below components

Plan, Create, and Apply Component Specific Tokens for "Logo, Bg Image, Typography, and InputFields"

Submit by Sun. May 11

Project file

Download Activity 5 Files

Lesson

Understand the Button

Live Session #7

Plan Button Component Specific Tokens

WEEK 5

May 05 - May 11

7 lessons

2 Live sessions

1 activity

1 project file

Live Session #6