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 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
Apr 07 - Apr 13
6 lessons
1 Live session
3 resources
Live Session #1
Live Session about the course
Lesson
Introduction
soon
Lesson
What is the Design System?
Categorise components within a design system
Design System Contains
Design System Benefits
Who can use the design system?
FREE
Lesson
Variables Vs Design Tokens
Variables perspectives from the Experts
Design Tokens perspectives from the Experts
Design Tokens are not just a Variables
FREE
Lesson
Why do we have to use Design Tokens in our Design Tools?
Examples, Colors, Typography, Spacing Corner Radius
Tokens Types
FREE
Lesson
Best tools for design tokens
The difference between Figma Variables and Tokens Studio Plugin
Lesson
Design Tokens Process
One source of truth
Resource
Design System Course - By Figma
FREE
Resource
Intro to Variables - By Figma
FREE
Resource
Guide to Variable - By Figma
FREE
WEEK 1
Apr 07 - Apr 13
6 lessons
1 Live session
3 resources
Live Session #1
Live Session about the course
Lesson
Introduction
soon
Lesson
What is the Design System?
Categorise components within a design system
Design System Contains
Design System Benefits
Who can use the design system?
FREE
Lesson
Variables Vs Design Tokens
Variables perspectives from the Experts
Design Tokens perspectives from the Experts
Design Tokens are not just a Variables
FREE
Lesson
Why do we have to use Design Tokens in our Design Tools?
Examples, Colors, Typography, Spacing Corner Radius
Tokens Types
FREE
Lesson
Best tools for design tokens
The difference between Figma Variables and Tokens Studio Plugin
Lesson
Design Tokens Process
One source of truth
Resource
Design System Course - By Figma
FREE
Resource
Intro to Variables - By Figma
FREE
Resource
Guide to Variable - By Figma
FREE
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 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
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
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
Live Q&A
Live Session #7
Plan Button Component Specific Tokens
WEEK 6
May 12 - May 18
7 lessons
1 Live session1
1 activity
1 project file
Live Session #8
Live Q&A
Lesson
Plan & Create Button Component Specific Tokens, Part #1
Lesson
Plan & Create Button Component Specific Tokens, Part #2
Lesson
Plan & Create Button Component Specific Tokens, Part #3
Lesson
Plan & Create Button Component Specific Tokens, Part #4
Lesson
Plan & Create Button Component Specific Tokens, Part #5
Lesson
Plan & Create Login Form Component Specific Tokens
Lesson
Publish Our Tokens
Activity #6
Plan, Create, and Apply Component Specific Tokens for the below components
Plan, Create, and Apply Component Specific Tokens for "Button, and Login Form"
Submit by Sun. May 18
Project file
Download Activity 6 Files
WEEK 6
May 12 - May 18
7 lessons
1 Live session1
1 activity
1 project file
Live Session #8
Live Q&A
Lesson
Plan & Create Button Component Specific Tokens, Part #1
Lesson
Plan & Create Button Component Specific Tokens, Part #2
Lesson
Plan & Create Button Component Specific Tokens, Part #3
Lesson
Plan & Create Button Component Specific Tokens, Part #4
Lesson
Plan & Create Button Component Specific Tokens, Part #5
Lesson
Plan & Create Login Form Component Specific Tokens
Lesson
Publish Our Tokens
Activity #6
Plan, Create, and Apply Component Specific Tokens for the below components
Plan, Create, and Apply Component Specific Tokens for "Button, and Login Form"
Submit by Sun. May 18
Project file
Download Activity 6 Files
WEEK 6
May 12 - May 18
7 lessons
1 Live session1
1 activity
1 project file
Live Session #8
Live Q&A
WEEK 7
May 19 - May 25
9 lessons
2 Live sessions
2 activities
2 project files
3 resources
Live Session #9
Live Q&A
Lesson
Dev Mode Interface
Lesson
Figma Update: Dev Mode Gets Variable Upgrades!
Lesson
Introduction about Project File
Project file
Download Project Files
Lesson
Export Figma Variables to JSON Code
🚩 Tips and Tricks
Lesson
Preview JSON Code
Lesson
Introduction of Style Dictionary Configurator
Live Session #10
Convert JSON to CSS code
Lesson
Convert JSON code to CSS
Lesson
Link Variables CSS file to the Project
Lesson
Logo & Page Tokens - Docs & CSS Guide
Activity #7
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 by Sun. May 25
Project file
Download Activity 7 Files
Resource
Style Dictionary Documentation
Resource
Configurator Tutorial Video
Resource
Configurator Documentation Guide
WEEK 7
May 19 - May 25
9 lessons
2 Live sessions
2 activities
2 project files
3 resources
Live Session #9
Live Q&A
Lesson
Dev Mode Interface
Lesson
Figma Update: Dev Mode Gets Variable Upgrades!
Lesson
Introduction about Project File
Project file
Download Project Files
Lesson
Export Figma Variables to JSON Code
🚩 Tips and Tricks
Lesson
Preview JSON Code
Lesson
Introduction of Style Dictionary Configurator
Live Session #10
Convert JSON to CSS code
Lesson
Convert JSON code to CSS
Lesson
Link Variables CSS file to the Project
Lesson
Logo & Page Tokens - Docs & CSS Guide
Activity #7
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 by Sun. May 25
Project file
Download Activity 7 Files
Resource
Style Dictionary Documentation
Resource
Configurator Tutorial Video
Resource
Configurator Documentation Guide
WEEK 7
May 19 - May 25
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
May 26 - Jun 01
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. Jun 01
Project file
Download Activity 8 Files
WEEK 8
May 26 - Jun 01
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. Jun 01
Project file
Download Activity 8 Files
WEEK 8
May 26 - Jun 01
9 lessons
1 Live session
1 activities
1 project files
Live Session #11
Live Q&A
WEEK 9
Jun 02 - Jun 08
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. Jun 08
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. Jun 08
Project file
Download Activity 10 Files
WEEK 9
Jun 02 - Jun 08
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. Jun 08
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. Jun 08
Project file
Download Activity 10 Files
WEEK 9
Jun 02 - Jun 08
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
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
Jun 09 - Jun 15
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. Jun 15
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
Jun 09 - Jun 15
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. Jun 15
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
Jun 09 - Jun 15
10 lessons
1 Live session
1 activity
1 project file
3 resources
Live Session #13
Live Q&A
WEEK 11
Jun 16 - Jun 22
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. Jun 22
Project file
Download Activity 12 Files
WEEK 11
Jun 16 - Jun 22
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. Jun 22
Project file
Download Activity 12 Files
WEEK 11
Jun 16 - Jun 22
8 lessons
1 Live session
1 activities
1 project files
Live Session #14
Live Q&A
WEEK 12
Jun 23 - Jun 29
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. Jun 29
Project file
Download Activity 13 Files
WEEK 12
Jun 23 - Jun 29
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. Jun 29
Project file
Download Activity 13 Files
WEEK 12
Jun 23 - Jun 29
12 lessons
1 Live session
1 activity
1 project file
Live Session #15
Live Q&A
WEEK 13
Jun 30 - Jul 06
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. Jul 06
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. Jul 06
Project file
Download Activity 15 Files
Live Session #17
Congratulations and Good Bye
WEEK 13
Jun 30 - Jul 06
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. Jul 06
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. Jul 06
Project file
Download Activity 15 Files
Live Session #17
Congratulations and Good Bye
WEEK 13
Jun 30 - Jul 06
12 lessons
2 Live sessions
2 activities
2 project files
Live Session #16
Live Q&A
Live Session #17
Congratulations and Good Bye
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
What students are saying
Ashraf Omran 🇸🇦
Design Lead
Osama was my first destination when I started working on major design systems. I can't doubt for a second that he has a lot of valuable knowledge and experience he can share, if you are planning to dive in design systems i totally recommend it to you.
Amr Sharif 🇪🇬
Product Designer
I feel proud that an Egyptian like us has created a world-class course. This course literally competes with the strongest Western courses, which didn’t even cover something this important. It makes me extremely proud of our country's talents. The educational content in it is worth thousands of dollars—truly a masterpiece.
Hagar Shams Eldin 🇪🇬
UI/UX Designer
I almost won't get tired of sharing Osama El-Dereiny's Design Tokens course. The content is very well-crafted. Thank you so much.
Eslam Tarek 🇪🇬
UX/UI Designer
I attended a session for one of the kings of the field of UX and design tokens, Osama El Drieny. The session was incredibly informative about design tokens and variables. The session was structured to include both a theoretical component and a practical component, and the benefit was great, especially since the design tokens and variables will save a lot of time For the designer and developer while they are building the system or making any modifications to this system. it will save on cost and time. and We also learned about tools that can accelerate the development process, especially for handling variables. Finally, I would like to thank UXSalon for organizing this great session, and I hope for many great sessions in the future.
Rania Jibreel 🇪🇬
Product Designer
I enjoyed attending the design token workshop led by Osama El Drieny The session was incredibly insightful, providing valuable knowledge on Figma variables, exporting JSON files, and using Design Token Studio Thanks to Osama for sharing his expertise, and to UXSalon for hosting this informative workshop
Yousef Rashad 🇪🇬
UX/UI Designer
The most exciting part of the day was the activities we participated in. The workshop was truly enjoyable and delightful, and I gained a lot from it. I'm confident it will make a significant difference in my professional journey. I would like to express my gratitude to Osama Eldrieny for his efforts and valuable insights. He never hesitated to help or share knowledge with us. Thank you!
Anonymous 🇪🇬
UX/UI Designer
I don't know what to say, but honestly, the entire course is truly amazing. I finished this incredible playlist, and I genuinely learned so much. Thank you very much!
Asmaa Dosuky 🇪🇬
UX/UI Designer
The organization is really impressive. Your effort is truly commendable, as you understand and address the issues people face with Design Tokens and genuinely care about them.
Mostafa Azzouz 🇪🇬
UX/UI Designer
I really love the videos and techniques you discuss. Truly, keep going—great job!
Yousef Rashad 🇪🇬
UX/UI Designer
Imagine finding Arabic content that explains the most important tools and features that make you stand out and in high demand at major companies. Osama Eldrieny has truly excelled and provides content that’s hard to find these days.
Ahmed Faris 🇪🇬
Product Designer
Must to learn to every Ul Designer you'll not only learn Design Tokens, you'll definitely upgrade your skills and career with Osama El Drieny 😍🚀. I learned a lot and improved my skills through his free videos, Imagine a professional course like this ❤️. Highly Recommended
Mohammed Hammouda 🇵🇸
UX Designer
Today, I gained tremendous technical insights during the Design Tokens workshop with Osama Eldrieny
Mahmoud Elgml 🇪🇬
UI/UX Designer
It's one of the great opportunities to attend the latest event, 'Design Tokens: From Design to Code.' I learned new things, and the most impressive part was how I could hand off my design pixel to pixel to the developer, ensuring it comes out exactly as designed.🔥 I also learned many other things that I will start applying in my future work, which will save me a lot of time during the iteration stages, as I'll be able to easily make changes with just a click of a button. 💪 Thanks to my friend Osama Eldrieny for this great session and your amazing effort."
Asmaa Dosuky 🇪🇬
Product Designer
I Had a fantastic session about design tokens & Figma variables with design expert Osama Eldrieny So many valuable insights gained! 🤩👩💻🎩
Abdulrahman 🇪🇬
UX Designer
🌟I had a fantastic time at the Design Tokens Workshop led by Osama El Drieny!🌟 During this practical session, we delved into Figma variables and design tokens, applying everything we learned for maximum benefit. It was an amazing learning experience, and I'm thankful to UXSalon Salon for organizing this wonderful event
Hashem Hany 🇪🇬
Product Designer
This is probably the first time I've seen the code match the design exactly, thanks to Design Tokens, which were brilliantly explained by Osama Eldrieny yesterday in a workshop that was simply outstanding. Special thanks to UX Salon, the place that constantly renews my passion.
Aliaa Farouk 🇪🇬
Product Designer
Thank you for your videos and for the effort you put into sharing knowledge and spreading the benefits. Great effort, keep going!
Ahmed Ashraf 🇪🇬
UX/UI Designer
Osama Eldrieny has created a fantastic playlist covering Design Tokens. He explains the topic in an easy and straightforward manner.
Osama Abdelnasr 🇪🇬
UX/UI Designer
Thank you for the great explanation and content. It’s incredibly valuable and has saved me years of work. Best of luck!
Anas Rafaat 🇪🇬
UX Lead, Content Creator
Osama is one of the best people who explain things from whom you can learn. He provides unique and well-crafted content.
Osama Dawood 🇪🇬
Product Design Expert
Osama speaks with knowledge and understanding, and this course will help many people.
Fady Samir 🇪🇬
UI/UX Designer
🌟Just attended an amazing workshop at UXSalon Titled "Design Tokens: From Design to Code" 🌟
It was an insightful session led by Osama El Drieny. We explored perspectives from industry experts, and tackled activities that brought our knowledge to life. From creating component tokens to implementing it into a css component, the hands-on experience was invaluable.
UI/UX designer 🇪🇬
UI/UX Designer
🚀Just wrapped up an amazing Design Tokens workshop at KnowledgeNet in Nasr City with the incredible Osama El Drieny and the talented team from UXSalon ! 🌟
We dived deep into design principles, collaborated on hands-on activities, and shared invaluable insights. Feeling inspired and ready to bring these new skills to my projects! 💡🎨 Swipe through the photos to see the creativity and teamwork in action. Excited for what's next! 🙌
Salsabil Fathelbab 🇪🇬
UX/UI Designer
I enjoyed and benefited a lot from attending this workshop Thank you, Osama El Drieny for sharing your experience with us and making the design token so easy like that
Mohamed Shalaby 🇪🇬
UX/UI Designer
Yesterday, I attended a workshop, and honestly, it was one of the best experiences I've had, and I learned a lot from it. I want to thank Osama Eldrieny for his excellent explanations and for clarifying so many things. For the first time, we saw the design come to life in the same way a developer envisions it.
Yousef Rashad 🇪🇬
UX/UI Designer
Honestly, Osama El-Dereiny excelled in presenting content that is hard to find for free in the first place.
Osama Naji 🇪🇬
UX/UI Designer
One of the most enjoyable sessions I’ve attended in the UX field. The content was incredibly strong, and I learned a lot. I will definitely start applying Design Tokens in all my upcoming projects
Ahmed Khatab 🇪🇬
UX/UI Designer
Very useful, Osama. No one else talks about Design Tokens like you do. Keep up the great work and best of luck!
Anonymous 🇪🇬
UX/UI Designer
I swear, I've been looking for something like this for a long time. Thank you so much for the effort!
View 19 More Testimonials
Ashraf Omran 🇸🇦
Design Lead
Osama was my first destination when I started working on major design systems. I can't doubt for a second that he has a lot of valuable knowledge and experience he can share, if you are planning to dive in design systems i totally recommend it to you.
Amr Sharif 🇪🇬
Product Designer
I feel proud that an Egyptian like us has created a world-class course. This course literally competes with the strongest Western courses, which didn’t even cover something this important. It makes me extremely proud of our country's talents. The educational content in it is worth thousands of dollars—truly a masterpiece.
Hagar Shams Eldin 🇪🇬
UI/UX Designer
I almost won't get tired of sharing Osama El-Dereiny's Design Tokens course. The content is very well-crafted. Thank you so much.
Eslam Tarek 🇪🇬
UX/UI Designer
I attended a session for one of the kings of the field of UX and design tokens, Osama El Drieny. The session was incredibly informative about design tokens and variables. The session was structured to include both a theoretical component and a practical component, and the benefit was great, especially since the design tokens and variables will save a lot of time For the designer and developer while they are building the system or making any modifications to this system. it will save on cost and time. and We also learned about tools that can accelerate the development process, especially for handling variables. Finally, I would like to thank UXSalon for organizing this great session, and I hope for many great sessions in the future.
Rania Jibreel 🇪🇬
Product Designer
I enjoyed attending the design token workshop led by Osama El Drieny The session was incredibly insightful, providing valuable knowledge on Figma variables, exporting JSON files, and using Design Token Studio Thanks to Osama for sharing his expertise, and to UXSalon for hosting this informative workshop
Yousef Rashad 🇪🇬
UX/UI Designer
The most exciting part of the day was the activities we participated in. The workshop was truly enjoyable and delightful, and I gained a lot from it. I'm confident it will make a significant difference in my professional journey. I would like to express my gratitude to Osama Eldrieny for his efforts and valuable insights. He never hesitated to help or share knowledge with us. Thank you!
Anonymous 🇪🇬
UX/UI Designer
I don't know what to say, but honestly, the entire course is truly amazing. I finished this incredible playlist, and I genuinely learned so much. Thank you very much!
Asmaa Dosuky 🇪🇬
UX/UI Designer
The organization is really impressive. Your effort is truly commendable, as you understand and address the issues people face with Design Tokens and genuinely care about them.
Mostafa Azzouz 🇪🇬
UX/UI Designer
I really love the videos and techniques you discuss. Truly, keep going—great job!
Yousef Rashad 🇪🇬
UX/UI Designer
Imagine finding Arabic content that explains the most important tools and features that make you stand out and in high demand at major companies. Osama Eldrieny has truly excelled and provides content that’s hard to find these days.
Fady Samir 🇪🇬
UI/UX Designer
🌟Just attended an amazing workshop at UXSalon Titled "Design Tokens: From Design to Code" 🌟
It was an insightful session led by Osama El Drieny. We explored perspectives from industry experts, and tackled activities that brought our knowledge to life. From creating component tokens to implementing it into a css component, the hands-on experience was invaluable.
UI/UX designer 🇪🇬
UI/UX Designer
🚀Just wrapped up an amazing Design Tokens workshop at KnowledgeNet in Nasr City with the incredible Osama El Drieny and the talented team from UXSalon ! 🌟
We dived deep into design principles, collaborated on hands-on activities, and shared invaluable insights. Feeling inspired and ready to bring these new skills to my projects! 💡🎨 Swipe through the photos to see the creativity and teamwork in action. Excited for what's next! 🙌
Yousef Rashad 🇪🇬
UX/UI Designer
Honestly, Osama El-Dereiny excelled in presenting content that is hard to find for free in the first place.
Ahmed Faris 🇪🇬
Product Designer
Must to learn to every Ul Designer you'll not only learn Design Tokens, you'll definitely upgrade your skills and career with Osama El Drieny 😍🚀. I learned a lot and improved my skills through his free videos, Imagine a professional course like this ❤️. Highly Recommended
Mohammed Hammouda 🇵🇸
UX Designer
Today, I gained tremendous technical insights during the Design Tokens workshop with Osama Eldrieny
Mahmoud Elgml 🇪🇬
UI/UX Designer
It's one of the great opportunities to attend the latest event, 'Design Tokens: From Design to Code.' I learned new things, and the most impressive part was how I could hand off my design pixel to pixel to the developer, ensuring it comes out exactly as designed.🔥 I also learned many other things that I will start applying in my future work, which will save me a lot of time during the iteration stages, as I'll be able to easily make changes with just a click of a button. 💪 Thanks to my friend Osama Eldrieny for this great session and your amazing effort."
Asmaa Dosuky 🇪🇬
Product Designer
I Had a fantastic session about design tokens & Figma variables with design expert Osama Eldrieny So many valuable insights gained! 🤩👩💻🎩
Abdulrahman 🇪🇬
UX Designer
🌟I had a fantastic time at the Design Tokens Workshop led by Osama El Drieny!🌟 During this practical session, we delved into Figma variables and design tokens, applying everything we learned for maximum benefit. It was an amazing learning experience, and I'm thankful to UXSalon Salon for organizing this wonderful event
Hashem Hany 🇪🇬
Product Designer
This is probably the first time I've seen the code match the design exactly, thanks to Design Tokens, which were brilliantly explained by Osama Eldrieny yesterday in a workshop that was simply outstanding. Special thanks to UX Salon, the place that constantly renews my passion.
Aliaa Farouk 🇪🇬
Product Designer
Thank you for your videos and for the effort you put into sharing knowledge and spreading the benefits. Great effort, keep going!
Ahmed Ashraf 🇪🇬
UX/UI Designer
Osama Eldrieny has created a fantastic playlist covering Design Tokens. He explains the topic in an easy and straightforward manner.
Osama Abdelnasr 🇪🇬
UX/UI Designer
Thank you for the great explanation and content. It’s incredibly valuable and has saved me years of work. Best of luck!
Anas Rafaat 🇪🇬
UX Lead, Content Creator
Osama is one of the best people who explain things from whom you can learn. He provides unique and well-crafted content.
Salsabil Fathelbab 🇪🇬
UX/UI Designer
I enjoyed and benefited a lot from attending this workshop Thank you, Osama El Drieny for sharing your experience with us and making the design token so easy like that
Mohamed Shalaby 🇪🇬
UX/UI Designer
Yesterday, I attended a workshop, and honestly, it was one of the best experiences I've had, and I learned a lot from it. I want to thank Osama Eldrieny for his excellent explanations and for clarifying so many things. For the first time, we saw the design come to life in the same way a developer envisions it.
Ahmed Khatab 🇪🇬
UX/UI Designer
Very useful, Osama. No one else talks about Design Tokens like you do. Keep up the great work and best of luck!
Osama Naji 🇪🇬
UX/UI Designer
One of the most enjoyable sessions I’ve attended in the UX field. The content was incredibly strong, and I learned a lot. I will definitely start applying Design Tokens in all my upcoming projects
Osama Dawood 🇪🇬
Product Design Expert
Osama speaks with knowledge and understanding, and this course will help many people.
View 19 More Testimonials
Ashraf Omran 🇸🇦
Design Lead
Osama was my first destination when I started working on major design systems. I can't doubt for a second that he has a lot of valuable knowledge and experience he can share, if you are planning to dive in design systems i totally recommend it to you.
Amr Sharif 🇪🇬
Product Designer
I feel proud that an Egyptian like us has created a world-class course. This course literally competes with the strongest Western courses, which didn’t even cover something this important. It makes me extremely proud of our country's talents. The educational content in it is worth thousands of dollars—truly a masterpiece.
Hagar Shams Eldin 🇪🇬
UI/UX Designer
I almost won't get tired of sharing Osama El-Dereiny's Design Tokens course. The content is very well-crafted. Thank you so much.
Eslam Tarek 🇪🇬
UX/UI Designer
I attended a session for one of the kings of the field of UX and design tokens, Osama El Drieny. The session was incredibly informative about design tokens and variables. The session was structured to include both a theoretical component and a practical component, and the benefit was great, especially since the design tokens and variables will save a lot of time For the designer and developer while they are building the system or making any modifications to this system. it will save on cost and time. and We also learned about tools that can accelerate the development process, especially for handling variables. Finally, I would like to thank UXSalon for organizing this great session, and I hope for many great sessions in the future.
Rania Jibreel 🇪🇬
Product Designer
I enjoyed attending the design token workshop led by Osama El Drieny The session was incredibly insightful, providing valuable knowledge on Figma variables, exporting JSON files, and using Design Token Studio Thanks to Osama for sharing his expertise, and to UXSalon for hosting this informative workshop
Yousef Rashad 🇪🇬
UX/UI Designer
The most exciting part of the day was the activities we participated in. The workshop was truly enjoyable and delightful, and I gained a lot from it. I'm confident it will make a significant difference in my professional journey. I would like to express my gratitude to Osama Eldrieny for his efforts and valuable insights. He never hesitated to help or share knowledge with us. Thank you!
Anonymous 🇪🇬
UX/UI Designer
I don't know what to say, but honestly, the entire course is truly amazing. I finished this incredible playlist, and I genuinely learned so much. Thank you very much!
Asmaa Dosuky 🇪🇬
UX/UI Designer
The organization is really impressive. Your effort is truly commendable, as you understand and address the issues people face with Design Tokens and genuinely care about them.
Mostafa Azzouz 🇪🇬
UX/UI Designer
I really love the videos and techniques you discuss. Truly, keep going—great job!
Yousef Rashad 🇪🇬
UX/UI Designer
Imagine finding Arabic content that explains the most important tools and features that make you stand out and in high demand at major companies. Osama Eldrieny has truly excelled and provides content that’s hard to find these days.
Fady Samir 🇪🇬
UI/UX Designer
🌟Just attended an amazing workshop at UXSalon Titled "Design Tokens: From Design to Code" 🌟
It was an insightful session led by Osama El Drieny. We explored perspectives from industry experts, and tackled activities that brought our knowledge to life. From creating component tokens to implementing it into a css component, the hands-on experience was invaluable.
UI/UX designer 🇪🇬
UI/UX Designer
🚀Just wrapped up an amazing Design Tokens workshop at KnowledgeNet in Nasr City with the incredible Osama El Drieny and the talented team from UXSalon ! 🌟
We dived deep into design principles, collaborated on hands-on activities, and shared invaluable insights. Feeling inspired and ready to bring these new skills to my projects! 💡🎨 Swipe through the photos to see the creativity and teamwork in action. Excited for what's next! 🙌
Yousef Rashad 🇪🇬
UX/UI Designer
Honestly, Osama El-Dereiny excelled in presenting content that is hard to find for free in the first place.
Ahmed Faris 🇪🇬
Product Designer
Must to learn to every Ul Designer you'll not only learn Design Tokens, you'll definitely upgrade your skills and career with Osama El Drieny 😍🚀. I learned a lot and improved my skills through his free videos, Imagine a professional course like this ❤️. Highly Recommended
Osama Dawood 🇪🇬
Product Design Expert
Osama speaks with knowledge and understanding, and this course will help many people.
Mohammed Hammouda 🇵🇸
UX Designer
Today, I gained tremendous technical insights during the Design Tokens workshop with Osama Eldrieny
Mahmoud Elgml 🇪🇬
UI/UX Designer
It's one of the great opportunities to attend the latest event, 'Design Tokens: From Design to Code.' I learned new things, and the most impressive part was how I could hand off my design pixel to pixel to the developer, ensuring it comes out exactly as designed.🔥 I also learned many other things that I will start applying in my future work, which will save me a lot of time during the iteration stages, as I'll be able to easily make changes with just a click of a button. 💪 Thanks to my friend Osama Eldrieny for this great session and your amazing effort."
Asmaa Dosuky 🇪🇬
Product Designer
I Had a fantastic session about design tokens & Figma variables with design expert Osama Eldrieny So many valuable insights gained! 🤩👩💻🎩
Abdulrahman 🇪🇬
UX Designer
🌟I had a fantastic time at the Design Tokens Workshop led by Osama El Drieny!🌟 During this practical session, we delved into Figma variables and design tokens, applying everything we learned for maximum benefit. It was an amazing learning experience, and I'm thankful to UXSalon Salon for organizing this wonderful event
Hashem Hany 🇪🇬
Product Designer
This is probably the first time I've seen the code match the design exactly, thanks to Design Tokens, which were brilliantly explained by Osama Eldrieny yesterday in a workshop that was simply outstanding. Special thanks to UX Salon, the place that constantly renews my passion.
Aliaa Farouk 🇪🇬
Product Designer
Thank you for your videos and for the effort you put into sharing knowledge and spreading the benefits. Great effort, keep going!
Ahmed Ashraf 🇪🇬
UX/UI Designer
Osama Eldrieny has created a fantastic playlist covering Design Tokens. He explains the topic in an easy and straightforward manner.
Osama Abdelnasr 🇪🇬
UX/UI Designer
Thank you for the great explanation and content. It’s incredibly valuable and has saved me years of work. Best of luck!
Anas Rafaat 🇪🇬
UX Lead, Content Creator
Osama is one of the best people who explain things from whom you can learn. He provides unique and well-crafted content.
Salsabil Fathelbab 🇪🇬
UX/UI Designer
I enjoyed and benefited a lot from attending this workshop Thank you, Osama El Drieny for sharing your experience with us and making the design token so easy like that
Mohamed Shalaby 🇪🇬
UX/UI Designer
Yesterday, I attended a workshop, and honestly, it was one of the best experiences I've had, and I learned a lot from it. I want to thank Osama Eldrieny for his excellent explanations and for clarifying so many things. For the first time, we saw the design come to life in the same way a developer envisions it.
Ahmed Khatab 🇪🇬
UX/UI Designer
Very useful, Osama. No one else talks about Design Tokens like you do. Keep up the great work and best of luck!
Osama Naji 🇪🇬
UX/UI Designer
One of the most enjoyable sessions I’ve attended in the UX field. The content was incredibly strong, and I learned a lot. I will definitely start applying Design Tokens in all my upcoming projects
View More