Embark on a detailed journey into design tokens with our comprehensive course. Discover everything from foundational concepts to advanced code applications, processes, best practices, and beyond.
Meet Your Instructors
Learn from the experts, Brad Frost, the creator of the Atomic Design methodology, and Ian Frost. Both are acknowledged leaders in design systems and will guide you in establishing a robust design token system tailored for scaling design and development in your organization.
What the Course Offers
More than 10 hours of in-depth video content
Architecture examples in Figma and code
Effective work processes for naming and management
Comprehensive PDF resources and practical examples
The Challenge of Uniformity and Flexibility
"Design systems make everything the same," a common challenge in organizations supporting diverse products, platforms, brands, and modes. The solution lies in design tokens.
We've assisted numerous organizations, including several Fortune 500 companies, in creating design token systems that balance consistency and individuality. This course compiles all our expertise to help you build a robust, scalable token system without repeating our past mistakes.
Course Structure: An 8-Chapter Journey
1. Basics of Design Tokens
Understand why design tokens are essential, their usage, structure, and role in modern design systems and tools.
2. Token Architecture
Dive into a three-level token system, covering color, typography, spacing, borders, animations, and more.
3. Naming and Structures
Learn naming principles, structuring recommendations, and ensure synchronization between design and code.
4. Building a Token System
Explore variables in Figma, Style Dictionary, automation, and synchronization processes to build effective token systems.
5. Publishing Tokens
Discover strategies for distributing tokens via Figma libraries, npm packages, and internal release protocols.
6. Adapting Tokens in Practice
Gain insights into how designers and developers apply tokens in real-world scenarios for maximum effect.
7. Support and Development
Manage your token system's evolution through branching, versioning, and systematic expansions.
8. Advanced Topics
Explore complex themes such as dark mode, white-label solutions, multi-product/platform strategies, and future trends involving AI.
Additional Resources
The course is enriched with architectural templates in Figma and code, FigJam process diagrams, and comprehensive slides offering a wealth of additional materials.
Brad Frost is a US web designer and the author of Atomic Design — one of the most influential books on design-system construction and the methodology that anchored a generation of design-system thinking. He runs Big Medium, a design-systems consultancy, and is one of the most cited independent voices on the design-system discipline.
His CourseFlix listing carries two Brad Frost courses: Subatomic — The Complete Guide to Design Tokens (the canonical paid resource on design tokens) and AI & Design Systems (the emerging intersection of AI tooling with design-system construction).
Material is paid and aimed at product designers and design-system maintainers responsible for the architectural decisions in their organisation's design system. For broader content, see CourseFlix's UI/UX Design category page.
Ian Frost is a UK-based product designer focused on design systems and design tokens — the architectural primitives underneath modern multi-platform design systems. He has been one of the more visible independent voices on the design-tokens-as-source-of-truth approach to scaled design.
His CourseFlix listing carries two Ian Frost courses: Subatomic — The Complete Guide to Design Tokens (the canonical paid resource on design tokens) and AI & Design Systems (the emerging intersection of AI tooling with design-system construction).
Material is paid and aimed at product designers and design-system maintainers responsible for the architectural decisions in their organisation's design system. For broader content, see CourseFlix's UI/UX Design category page.
Watch Online 359 lessons
This is a demo lesson (10:00 remaining)
You can watch up to 10 minutes for free. Subscribe to unlock all 359 lessons in this course and access 10,000+ hours of premium content across all courses.
Master the skills that help designers get promoted. Knowing all the tricks in Figma does not guarantee a promotion. Learn 12 skills.
6h 28m
Frequently asked questions
What are the prerequisites for enrolling in this course?
The course is designed for individuals with a foundational understanding of design systems and UI/UX design. Familiarity with design tools and basic coding concepts will be beneficial, as the course involves architecture examples in Figma and code. While no specific prior courses are required, experience in design or development roles will help participants grasp the advanced concepts discussed.
What projects or systems will I be able to build after completing this course?
Upon completing the course, you will be equipped to build a scalable, robust design token system tailored for your organization's needs. The course covers the creation of an MVP token system using a three-tiered architecture, which includes color, typography, spacing, and other tokens. These skills will enable you to address the challenges of uniformity and flexibility in design systems across diverse products and brands.
Who is the target audience for this course?
This course is ideal for designers, developers, and design system managers involved in the creation and maintenance of design systems within their organizations. It is particularly beneficial for those looking to implement or optimize a design token strategy to support diverse products, platforms, and brands while maintaining consistency.
What specific tools or platforms are covered in the course?
The course provides architecture examples in Figma and code, offering practical insights into how design tokens integrate with modern design tools. While the course does not focus on any specific coding platform, it covers the application of tokens in both design tools and code environments, emphasizing their role in design system ecosystems.
How does this course compare in depth and scope to other design systems courses?
This course offers over 10 hours of video content, structured into an 8-chapter journey covering both foundational and advanced topics in design tokens. Unlike general design systems courses, it delves deeply into the specifics of token systems, including naming conventions, token architecture, and practical examples. It also addresses complex challenges like balancing uniformity and flexibility in design systems.
What topics are not covered in this course?
The course does not cover basic design principles or introductory coding skills, as it assumes participants already have a foundational understanding of these areas. It also does not provide instruction on specific programming languages or frameworks beyond the general application of tokens in code.
How much time should I expect to commit to this course?
The course contains more than 10 hours of video content, which, combined with practical exercises and reading materials, suggests a time commitment of approximately 15-20 hours to complete. This estimation allows for thorough engagement with the material and practical application of concepts in exercises.
