COHORT #1
4.6
(33 RATINGS)
9 WEEKS
COHORT-BASED COURSE
9 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
📺
62 Video lessons
🔴
13 Live Sessions
✏️
27 Interactive Activities
🔗
10 Resource Links
📥
12 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 offers a comprehensive exploration of design tokens, starting with the fundamentals and progressing to advanced techniques.
In the first module, you'll learn the basics of creating and managing design tokens.
The second module focuses on advanced topics using Figma Variables, where you'll work with option, alias, and component-specific tokens.
Finally, the third module delves into the Tokens Studio Plugin, teaching you how to convert tokens to CSS, apply them to design systems, and integrate your work with GitHub.
By the end of the course, you'll be skilled in building and managing sophisticated, scalable design systems.
Course syllabus
In this foundational 3-week module, participants will immerse themselves in the essential concepts and practices of design systems and design tokens.
Through 17 lessons, 4 live sessions, 5 activities, and access to 4 project files and 5 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.
In this module, you’ll advance your skills in creating and managing design tokens using Figma Variables.
Spanning 25 lessons, 5 live sessions, 12 activities, 13 project files, and 1 resource file, you'll dive deep into the intricacies of option tokens, alias tokens, and component-specific tokens.
Starting with the Figma Variables interface, you'll learn to create and group option tokens for colors, typography, and other design elements.
The module will guide you through the process of creating alias tokens and component-specific tokens, and how to apply them within your design system.
Additionally, you'll explore the handoff process to developers, including exporting tokens to JSON, converting them to CSS, and implementing both light and dark modes in your projects.
By the end of this module, you’ll have a comprehensive understanding of how to leverage Figma Variables to maintain a cohesive and scalable design system.
This module, focused on the Tokens Studio Plugin, will elevate your expertise in managing and applying design tokens within your projects.
Throughout 22 lessons, 4 live sessions, 10 activities, 9 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.