👋 Welcome

👋 Welcome

Design Tokens From Basic to Mastery

Design Tokens From Basic to Mastery

COHORT #2

4.6

(33 RATINGS)

14 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

📺

134 Video lessons

🔴

20 Live Sessions

✏️

17 Interactive Activities

🔗

10 Resource Links

📥

18 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

nov 11 - nov 17

6 lessons

1 Live session

3 resources

Live Session #1

Live Session about the course

WEEK 2

nov 25 - dec 1

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 2

nov 25 - dec 1

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 2

nov 25 - dec 1

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

dec 2 - dec 8

10 lessons

1 Live session

1 activity

1 project files

Live Session #4

Live Q&A

WEEK 3

dec 2 - dec 8

10 lessons

1 Live session

1 activity

1 project files

Live Session #4

Live Q&A

WEEK 3

dec 2 - dec 8

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

54 lessons

8 Live sessions

7 activities

8 project files

4 resources

54 lessons

8 Live sessions

7 activities

8 project files

4 resources

54 lessons

8 Live sessions

7 activities

8 project files

4 resources

In this module, you’ll advance your skills in creating and managing design tokens using Figma Variables.

Spanning 54 lessons8 live sessions7 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

Dec 9 - Dec 15

12 lessons

1 Live session

1 activity

1 project file

1 resource

Live Session #5

Live Q&A

WEEK 4

Dec 9 - Dec 15

12 lessons

1 Live session

1 activity

1 project file

1 resource

Live Session #5

Live Q&A

WEEK 4

Dec 9 - Dec 15

12 lessons

1 Live session

1 activity

1 project file

1 resource

Live Session #5

Live Q&A

WEEK 5

Dec 16 - Dec 22

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 5

Dec 16 - Dec 22

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 5

Dec 16 - Dec 22

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 6

Dec 23 - Dec 29

7 lessons

1 Live session1

1 activity

1 project file

Live Session #8

Live Q&A

WEEK 6

Dec 23 - Dec 29

7 lessons

1 Live session1

1 activity

1 project file

Live Session #8

Live Q&A

WEEK 6

Dec 23 - Dec 29

7 lessons

1 Live session1

1 activity

1 project file

Live Session #8

Live Q&A

WEEK 7

Dec 30 - Jan 5

9 lessons

2 Live sessions

1 activity

2 project files

3 resources

Live Session #9

Live Q&A

Live Session #10

Convert JSON to CSS code

WEEK 7

Dec 30 - Jan 5

9 lessons

2 Live sessions

1 activity

2 project files

3 resources

Live Session #9

Live Q&A

Live Session #10

Convert JSON to CSS code

WEEK 7

Dec 30 - Jan 5

9 lessons

2 Live sessions

1 activity

2 project files

3 resources

Live Session #9

Live Q&A

Live Session #10

Convert JSON to CSS code

WEEK 8

Jan 6 - Jan 12

8 lessons

1 Live session

1 activities

1 project files

Live Session #11

Live Q&A

WEEK 8

Jan 6 - Jan 12

8 lessons

1 Live session

1 activities

1 project files

Live Session #11

Live Q&A

WEEK 8

Jan 6 - Jan 12

8 lessons

1 Live session

1 activities

1 project files

Live Session #11

Live Q&A

WEEK 9

Jan 13 - Jan 19

11 lessons

1 Live session

2 activities

2 project files

Live Session #12

Live Q&A

WEEK 9

Jan 13 - Jan 19

11 lessons

1 Live session

2 activities

2 project files

Live Session #12

Live Q&A

WEEK 9

Jan 13 - Jan 19

11 lessons

1 Live session

2 activities

2 project files

Live Session #12

Live Q&A

Module 3

Module 3

Module 3

Advanced Design Tokens with Tokens Studio Plugin

Advanced Design Tokens with Tokens Studio Plugin

56 lessons

8 Live sessions

7 activities

7 project files

3 resources

56 lessons

8 Live sessions

7 activities

7 project files

3 resources

56 lessons

8 Live sessions

7 activities

7 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 56 lessons8 live sessions7 activities, 7 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

Jan 27 - Feb 2

12 lessons

1 Live session

1 activity

1 project file

1 resource

Coming Soon

WEEK 10

Jan 27 - Feb 2

12 lessons

1 Live session

1 activity

1 project file

1 resource

Coming Soon

WEEK 10

Jan 27 - Feb 2

12 lessons

1 Live session

1 activity

1 project file

1 resource

Coming Soon

WEEK 11

Feb 3 - Feb 9

7 lessons

2 Live sessions

1 activities

1 project files

Coming Soon

WEEK 11

Feb 3 - Feb 9

7 lessons

2 Live sessions

1 activities

1 project files

Coming Soon

WEEK 11

Feb 3 - Feb 9

7 lessons

2 Live sessions

1 activities

1 project files

Coming Soon

WEEK 12

Feb 10 - Feb 16

7 lessons

1 Live session

1 activity

1 project file

Coming Soon

WEEK 12

Feb 10 - Feb 16

7 lessons

1 Live session

1 activity

1 project file

Coming Soon

WEEK 12

Feb 10 - Feb 16

7 lessons

1 Live session

1 activity

1 project file

Coming Soon

WEEK 13

Feb 17 - Feb 23

9 lessons

2 Live sessions

1 activity

2 project files

3 resources

Coming Soon

WEEK 13

Feb 17 - Feb 23

9 lessons

2 Live sessions

1 activity

2 project files

3 resources

Coming Soon

WEEK 13

Feb 17 - Feb 23

9 lessons

2 Live sessions

1 activity

2 project files

3 resources

Coming Soon

WEEK 14

Feb 24 - Mar 2

8 lessons

1 Live sessions

1 activities

1 project files

Coming Soon

WEEK 14

Feb 24 - Mar 2

8 lessons

1 Live sessions

1 activities

1 project files

Coming Soon

WEEK 14

Feb 24 - Mar 2

8 lessons

1 Live sessions

1 activities

1 project files

Coming Soon

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

COURSE STARTED

Sep, 30, 2024

Nov, 11, 2024

Nov, 11, 2024

COURSE STARTED

Nov, 11, 2024