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.
Hello! My name is Brad Frost - I am a design systems consultant, frontend developer, teacher, speaker, writer, musician, and artist. I am incredibly passionate about the web, creativity, and how people can come together to create amazing digital products.
Throughout my career, I have helped numerous teams build and develop design systems, combining solid architecture with more open processes and a collaborative culture. I am the author of the Atomic Design methodology and the book of the same name, in which I explain how to create and maintain effective design systems. I have been involved in many projects related to design systems: co-author of the Style podcast, creator of Pattern Lab, curator of Styleguides.io, author of Style Guide Guide, and more.
I love creating, and equally enjoy sharing knowledge. Conference talks, workshops, trainings, seminars, my blog, and my book have helped hundreds of thousands of designers and developers around the world learn best practices for working with design systems.
I live in beautiful Pittsburgh, Pennsylvania, with my wife, my daughter Ella, and our French bulldog named Butzi. When I'm not immersed in the world of design tokens, you can find me with musical instruments or engaged in any creative activity - I strive to take every opportunity to create something.
Hello! My name is Ian Frost, and I am Brad's younger brother. I am a frontend architect, tech lead, and consultant with a passion for helping developers grow and evolve.
Since 2015, I've been working on design systems alongside Brad. During this time, I've had the opportunity to build design systems using a variety of technologies: Web Components, React, Angular, Vue, and more. I've collaborated with tech leads, developers, and designers from multiple organizations, assisting them in creating, implementing, and maintaining a robust architecture for design systems and tokens. This work is both a science and an art, and I'm eager to share the lessons we've learned to make your life easier.
Before I became a web developer, I worked as a professional meteorologist. And when I'm not writing code or forecasting snow, you can find me playing musical instruments, on a sports field, or spending time with my family – my wife and son.
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.
