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
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.
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.
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.