Subatomic: The Complete Guide To Design Tokens
13h 27m 4s
English
Paid
Course description
A deep and comprehensive course on design tokens: from concepts and variables in Figma to code, processes, best practices, and much more.
Instructors: Brad Frost (creator of the Atomic Design methodology) and Ian Frost - recognized experts in the field of design systems. They share everything you need to know to create an effective design token system that will help your organization scale design and development.
Read more about the course
What the course includes:
- More than 10 hours of detailed video lessons
- Architecture samples in Figma and code
- Work processes for naming and management
- PDF with examples and useful materials
"Design systems make everything the same." Sound familiar?
If your organization supports a multitude of products, platforms, brands, and modes, you know how challenging it is to find a balance between uniformity and flexibility.
The answer is design tokens.
For more than ten years, we have helped dozens of organizations - including many from the Fortune 500 list - build design token systems that enable consistency while maintaining individuality. It is complex. That's why we have compiled all our knowledge into this course, so you can avoid our mistakes and build a reliable, scalable token system.
Course Structure (8 Chapters):
- Basics of Design Tokens
- Why they are needed, where they are used, how they are structured, and how they are connected with modern design systems and tools.
- Token Architecture
- Three-level token system, color and typography systems, spacing, borders, animations, and more.
- Naming and Structures
- Naming principles and patterns, recommendations for structure and synchronization between design and code.
- Building a Token System
- Variables in Figma, Style Dictionary, automation, and synchronization processes.
- Publishing Tokens
- Distribution via Figma libraries, npm packages, and internal release processes.
- Adapting Tokens in Practice
- How designers and developers use tokens in real practice.
- Support and Development
- Branching, versioning, expansion, management, and long-term evolution of systems.
- Advanced Topics
- Dark themes, sub-brands, white-label, multi-product and multi-platform solutions, the future of tokens, and AI.
The course is accompanied by architectural templates in Figma and code, process diagrams in FigJam, and rich slides with a multitude of additional resources.
Watch Online
Watch Online Subatomic: The Complete Guide To Design Tokens
0:00
/ #1: Welcome!
All Course Lessons (359)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Welcome! Demo | 01:58 | |
| 2 | About your teachers | 02:34 | |
| 3 | Who This Course Is For | 01:18 | |
| 4 | Course Structure | 03:03 | |
| 5 | What's Included | 01:07 | |
| 6 | Chapter 1 Introduction | 00:45 | |
| 7 | The Problems Design Tokens Solve | 01:23 | |
| 8 | The Multi-All-The-Things Organization | 10:54 | |
| 9 | The Business Case For Design Tokens | 10:32 | |
| 10 | The New Separation of Concerns | 05:55 | |
| 11 | The ROI of Design Tokens | 03:54 | |
| 12 | The History of Themeable User Interfaces | 04:38 | |
| 13 | Design Tokens Origin Story | 02:03 | |
| 14 | What Are Design Tokens? | 04:09 | |
| 15 | Tokens in Design Tools | 01:07 | |
| 16 | Tokens in Code | 03:21 | |
| 17 | The Role of Design Tokens in a Design System Ecosystem | 06:10 | |
| 18 | Chapter 1 Summary | 01:34 | |
| 19 | Chapter 2 Introduction | 00:52 | |
| 20 | Brand Style Guide Vs Product Reality | 02:22 | |
| 21 | Creating an MVP Token System | 08:16 | |
| 22 | The Three-Tiered Token Architecture | 11:36 | |
| 23 | Themes | 05:44 | |
| 24 | Color Systems - Introduction | 02:28 | |
| 25 | Color Systems - Brand Considerations | 02:52 | |
| 26 | Color Systems - Visual Considerations | 01:15 | |
| 27 | Color Systems - UX Considerations | 02:27 | |
| 28 | Color Systems - Accessibility Considerations | 02:28 | |
| 29 | Color Systems - Three-Tiered color tokens | 07:53 | |
| 30 | Typography Systems- Introduction | 00:43 | |
| 31 | Typography Systems- Brand Considerations | 00:39 | |
| 32 | Typography Systems- Visual Considerations | 01:13 | |
| 33 | Typography Systems- UX Considerations | 01:06 | |
| 34 | Typography Systems- Accessibility Considerations | 01:13 | |
| 35 | Composite Tokens Definition | 00:56 | |
| 36 | Typography Systems- Tier 1 Tokens | 01:45 | |
| 37 | Typography Systems- Tier 2 Tokens | 02:16 | |
| 38 | Typography Systems- Tier 3 Tokens | 01:39 | |
| 39 | Spacing - Use an 8pt or 4pt grid | 00:18 | |
| 40 | Spacing - Three-tiered Tokens | 02:11 | |
| 41 | Spacing - Summary | 00:22 | |
| 42 | Border Tokens | 01:52 | |
| 43 | Shadow Tokens | 01:23 | |
| 44 | Animation Tokens | 02:32 | |
| 45 | Chapter 2 Summary | 02:30 | |
| 46 | Chapter 3 Introduction | 01:28 | |
| 47 | Why Naming Matters - Humanity's Superpower | 02:00 | |
| 48 | Why Naming Matters - Shared Understanding | 01:08 | |
| 49 | Why Naming Matters - Collaboration | 01:00 | |
| 50 | Why Naming Matters - Contract | 01:03 | |
| 51 | Why Naming Matters - Infrastructure | 02:24 | |
| 52 | Why Naming Matters - Traceability & Measurement | 01:51 | |
| 53 | Why Naming Matters - User Experience | 00:54 | |
| 54 | Why Naming Matters - Maintainability | 01:05 | |
| 55 | Why Naming Matters - Synchronization & Automation | 00:41 | |
| 56 | Why Naming Matters - Summary | 01:54 | |
| 57 | Why Naming Is Hard - Two Hard Things In Computer Science | 00:35 | |
| 58 | Why Naming Is Hard - Invented Language | 01:01 | |
| 59 | Why Naming Is Hard - Subjectivity | 02:50 | |
| 60 | Why Naming Is Hard - What Actually Matters? It Depends! | 00:35 | |
| 61 | Why Naming Is Hard - Rigor & Organization | 01:13 | |
| 62 | Why Naming Is Hard - Consistency | 00:52 | |
| 63 | Why Naming Is Hard - Designer/Developer Divide | 00:57 | |
| 64 | Why Naming Is Hard - Environments & Contexts Differ | 02:17 | |
| 65 | Why Naming Is Hard - Summary | 02:29 | |
| 66 | Naming Principles - Introduction | 02:49 | |
| 67 | Naming Principles - Clarity Over Cleverness | 00:37 | |
| 68 | Naming Principles - Legibility Over Succinctness | 01:04 | |
| 69 | Naming Principles - Consistency Is Key | 00:38 | |
| 70 | Naming Principles - Use Existing Conventions | 00:31 | |
| 71 | Naming Principles - Communicate Hierarchy | 00:37 | |
| 72 | Naming Principles - Pragmatism Over Pedantry | 00:49 | |
| 73 | Naming Principles - Environment Agnostic | 00:37 | |
| 74 | Naming Principles - Summary | 00:54 | |
| 75 | The Importance of Cross-disciplinary Collaboration | 01:15 | |
| 76 | Cross-disciplinary Roles for Naming | 01:55 | |
| 77 | Naming Parity - Critical but Impossible! | 00:35 | |
| 78 | Naming Parity Differences - Global Namespace | 00:50 | |
| 79 | Naming Parity Differences - Viewport | 01:37 | |
| 80 | Naming Parity Differences - Animation | 00:38 | |
| 81 | Naming Parity Differences - z-index | 00:45 | |
| 82 | Naming Parity Differences - Named and Unnamed Defaults | 01:18 | |
| 83 | Naming Systems and Preferences | 01:50 | |
| 84 | Synonyms | 01:17 | |
| 85 | The Naming Algorithm | 03:24 | |
| 86 | Naming Algorithm Figjam Intro | 00:24 | |
| 87 | Naming Algorithm Figjam Tour | 05:13 | |
| 88 | Naming Algorithm Process | 03:13 | |
| 89 | Naming Tokens By Category | 00:40 | |
| 90 | Global Prefix | 01:37 | |
| 91 | Tier Identifier | 00:53 | |
| 92 | Token Category | 00:18 | |
| 93 | Color Token Names - Tier 1 | 03:04 | |
| 94 | Color Token Names - Tier 2 | 03:33 | |
| 95 | Color Token Names - Tier 3 | 01:15 | |
| 96 | Color Token Names - Summary | 01:15 | |
| 97 | Typography Token Names - Tier 1 | 03:41 | |
| 98 | Typography Token Names - Tier 2 | 03:21 | |
| 99 | Typography Token Names - Tier 3 | 00:48 | |
| 100 | Typography Token Names - Summary | 00:29 | |
| 101 | Spacing Token Names | 01:42 | |
| 102 | Border Token Names | 00:50 | |
| 103 | Shadow Token Names | 01:00 | |
| 104 | Animation Token Names | 01:05 | |
| 105 | Breakpoint Token Names | 00:21 | |
| 106 | z-index Token Names | 00:25 | |
| 107 | Chapter 3 Summary | 02:12 | |
| 108 | Chapter 4 Introduction | 01:23 | |
| 109 | Introducing...Frost'd Tokens! | 00:59 | |
| 110 | Demo Tour in Figma and Code | 06:28 | |
| 111 | Token Build Process Overview; Cross-disciplinary Approach | 02:07 | |
| 112 | 1. Choosing Tools for Figma | 01:31 | |
| 113 | 1. Choosing Tools for Code | 01:14 | |
| 114 | 2. Environment Setup for Figma | 01:10 | |
| 115 | 2. Environment Setup for Code - Prerequisites & Config | 05:12 | |
| 116 | 3. MVP Tier 1 Tokens in Figma | 01:37 | |
| 117 | 3. MVP Tier 1 Tokens in Code | 00:45 | |
| 118 | 3. MVP Tier 2 Token in Figma | 00:30 | |
| 119 | 3. MVP Tier 2 Token in Code | 00:45 | |
| 120 | 3. MVP Tier 3 Token in Figma | 00:54 | |
| 121 | 3. MVP Tier 3 Token in Code | 00:45 | |
| 122 | 3. Add Global Prefix to Code Config | 00:45 | |
| 123 | 3. Add Theme Prefix to Code Config | 01:59 | |
| 124 | 3. Expanding MVP Tier 1 Color Tokens in Figma | 00:40 | |
| 125 | 3. Expanding MVP Tier 1 Color Tokens in Code | 00:13 | |
| 126 | 3. Expanding MVP Tier 2 Color Tokens in Figma | 00:51 | |
| 127 | 3. Expanding MVP Tier 2 Color Tokens in Code | 00:20 | |
| 128 | 3. Expanding MVP Tier 3 Color Tokens in Figma | 00:33 | |
| 129 | 3. Expanding MVP Tier 3 Color Tokens in Code | 00:38 | |
| 130 | 3. Wiring Up MVP Tokens in Figma | 01:32 | |
| 131 | 3. Wiring Up MVP Tokens in Code | 01:36 | |
| 132 | 3. Scoping Figma Variables | 05:00 | |
| 133 | 4. Building a Full Theme Intro | 00:30 | |
| 134 | 4. Theme Tier 1 Colors in Figma | 01:15 | |
| 135 | 4. Theme Tier 1 Colors in Code | 00:46 | |
| 136 | 4. Theme Tier 2 Colors in Figma | 01:36 | |
| 137 | 4. Theme Tier 2 Colors in Code | 00:32 | |
| 138 | 4. Theme Tier 3 Colors in Figma | 01:09 | |
| 139 | 4. Theme Tier 3 Colors in Code | 01:21 | |
| 140 | 4. Tier 1 Typography in Figma | 00:50 | |
| 141 | 4. Tier 1 Typography in Code | 00:19 | |
| 142 | 4. Understanding Relative Units and Differences between Figma & Code | 06:19 | |
| 143 | 4. Understanding Unitless Line Height and Differences between Figma & Code | 02:05 | |
| 144 | 4. Tier 2 Typography in Figma | 01:32 | |
| 145 | 4. Tier 2 Typography in Code | 00:34 | |
| 146 | 4. Responsive Typography - Core Concepts | 02:45 | |
| 147 | 4. Responsive Typography - Composite Tokens | 01:49 | |
| 148 | 4. Understanding the Difference Between Viewports & Breakpoints | 02:21 | |
| 149 | 4. Figma Modes and Viewport | 01:10 | |
| 150 | 4. Applying Responsive Typography in Figma | 06:00 | |
| 151 | 4. Responsive Typography in Code - Sass Mixins | 02:05 | |
| 152 | Responsive Typography in Code - applying mixins | 04:04 | |
| 153 | 4. Typography Celebration! | 01:05 | |
| 154 | 4. Tier 1 Spacing in Figma | 00:39 | |
| 155 | 4. Spacing Tier 2 in Code & Sass Size Function | 01:28 | |
| 156 | 4. Tier 2 Spacing in Figma | 00:43 | |
| 157 | 4. Border Tier 1 in Figma | 00:37 | |
| 158 | 4. Border Tier 1 in Code | 00:34 | |
| 159 | 4. Border Tier 2 in Figma | 01:28 | |
| 160 | 4. Border Tier 2 in Code | 01:01 | |
| 161 | 4. Shadow Tier 1 in Figma | 00:42 | |
| 162 | 4. Shadow Tier 1 in Code | 00:21 | |
| 163 | 4. Shadow Tier 2 in Figma | 01:03 | |
| 164 | 4. Shadow Tier 2 in Code | 01:56 | |
| 165 | 4. Animation Tier 1 in Code | 01:15 | |
| 166 | 4. Animation Tier 2 in Code | 00:37 | |
| 167 | 4. Applying Animation Tokens in CSS | 00:44 | |
| 168 | 4. z-index | 01:27 | |
| 169 | 4. We Have A Theme! A Tour of Our Theme's Documentation | 03:09 | |
| 170 | 4. Our Theme Applied to Frost'd Tokens Products | 01:22 | |
| 171 | 5. Let's Add A Chocolate Theme! | 01:06 | |
| 172 | 5. Introducing the Vanilla Theme Concept | 01:05 | |
| 173 | 5. Add An Additional Theme in Figma | 03:02 | |
| 174 | 5. Core Tokens Introduction | 03:04 | |
| 175 | 5. Core Tokens in Figma | 01:46 | |
| 176 | 5. Add An Additional Theme in Code | 01:46 | |
| 177 | 5. Core Tokens in Code | 01:08 | |
| 178 | 5. The Magic Trick of Theme Switching in Figma | 02:15 | |
| 179 | 5. Theme Switching in Code | 00:31 | |
| 180 | 5. Revisiting The Vanilla Theme | 02:46 | |
| 181 | 5. Rounding Out Our Token System | 01:46 | |
| 182 | Synchronization & Automation - Introduction | 04:56 | |
| 183 | Token Czars | 03:54 | |
| 184 | Synchronization & Automation - Fully Manual | 02:22 | |
| 185 | Synchronization & Automation - Design Tokens Manager | 02:58 | |
| 186 | Synchronization & Automation - Tokens Studio | 06:08 | |
| 187 | Synchronization & Automation - Other Tools | 03:12 | |
| 188 | Synchronization & Automation - Full Automation | 01:44 | |
| 189 | Chapter 4 Summary | 01:22 | |
| 190 | Chapter 4 Homework and Next Steps | 03:35 | |
| 191 | Chapter 5 Introduction | 01:03 | |
| 192 | Design Token Systems Are Products | 03:39 | |
| 193 | Difference Between Products and Libraries | 02:48 | |
| 194 | The Arc of Publishing A Token Library | 02:12 | |
| 195 | Design Token System Makers & Users | 01:40 | |
| 196 | User-Centered Design for Token Systems | 03:11 | |
| 197 | Should You Publish Tier 1 Tokens? | 06:18 | |
| 198 | Pre-Publishing Checklist: Proper Mapping | 02:29 | |
| 199 | Pre-Publishing Checklist: Design & Code Alignment | 00:43 | |
| 200 | Pre-Publishing Checklist: Scope Variables | 00:31 | |
| 201 | Pre-Publishing Checklist: Hide From Publishing | 01:50 | |
| 202 | Pre-Publishing Checklist: Check Accessibility | 02:03 | |
| 203 | Pre-Publishing Checklist: Test Build | 00:27 | |
| 204 | Pre-Publishing Checklist: Check Documentation | 00:32 | |
| 205 | Publishing a Tokens Library in Figma | 03:33 | |
| 206 | Quick Intro to Consuming a Tokens Library in Figma | 01:27 | |
| 207 | Publishing a Tokens Library in Code - Intro | 01:52 | |
| 208 | Publishing a Tokens Library in Code - Build Process | 02:16 | |
| 209 | Quick Intro to Consuming a Tokens Library in Code | 01:09 | |
| 210 | Chapter 5 Summary | 03:27 | |
| 211 | Chapter 6 Introduction | 02:35 | |
| 212 | Understanding Design Token Adoption | 01:43 | |
| 213 | Spectrum of Token Integration - Reference | 03:51 | |
| 214 | Spectrum of Token Integration - Importing Token Library | 00:54 | |
| 215 | Spectrum of Token Integration - Importing Component Library | 03:08 | |
| 216 | Design Token Users - You! | 01:03 | |
| 217 | Design Token Users - Other Product Teams | 01:00 | |
| 218 | Design Token Users - Devs Using Multiple Tech Stacks | 01:21 | |
| 219 | Design Token Users - Auxiliary Users | 01:36 | |
| 220 | Design Token Users - Stakeholders | 00:48 | |
| 221 | Users Don't Care About Design Tokens | 01:16 | |
| 222 | Adopting Tokens At Every Layer of the Design System Ecosystem | 03:12 | |
| 223 | Subscribing to the Token Figma Team Library | 01:41 | |
| 224 | Importing the Tokens Code Package | 03:15 | |
| 225 | Wiring Up Tokens To Existing Figma Components | 02:51 | |
| 226 | Wiring Up Tokens To Existing Code Components | 02:51 | |
| 227 | Best Practices for Adopting Design Tokens in Existing Components | 02:29 | |
| 228 | The Importance of Showing the Magic Trick | 01:34 | |
| 229 | Wiring Up Tokens To New Figma Components | 04:00 | |
| 230 | Wiring Up Tokens To New Code Components | 03:02 | |
| 231 | Showing The Magic Trick for New Components | 00:35 | |
| 232 | Best Practices for Adopting Design Tokens in New Components | 01:48 | |
| 233 | Applying Your Token Nomenclature | 01:10 | |
| 234 | Adopting Default Color Tokens In Figma | 01:11 | |
| 235 | Adopting Default Color Tokens In Code | 00:43 | |
| 236 | Adopting Brand Color Tokens In Figma | 00:37 | |
| 237 | Adopting Brand Color Tokens In Code | 00:53 | |
| 238 | Accent Color Tokens | 01:30 | |
| 239 | Adopting Disabled Color Tokens In Figma | 00:47 | |
| 240 | Adopting Disabled Color Tokens In Code | 00:54 | |
| 241 | Adopting Utility Color Tokens In Figma | 01:15 | |
| 242 | Adopting Utility Color Tokens In Code | 01:36 | |
| 243 | Color Token Variants | 00:31 | |
| 244 | Adopting Knockout Variant Color Tokens In Figma | 01:23 | |
| 245 | Adopting Knockout Variant Color Tokens In Code | 00:31 | |
| 246 | Subtle and Strong Color Token Variants | 01:36 | |
| 247 | Adopting Tier 3 Color Tokens In Figma | 01:19 | |
| 248 | Adopting Tier 3 Color Tokens In Code | 02:22 | |
| 249 | Adopting Display Typography Tokens In Figma | 01:32 | |
| 250 | Adopting Display Typography Tokens In Code | 00:31 | |
| 251 | Adopting Headline Typography Tokens In Figma | 00:55 | |
| 252 | Adopting Headline Typography Tokens In Code | 00:21 | |
| 253 | Adopting Title Typography Tokens In Figma | 00:39 | |
| 254 | Adopting Title Typography Tokens In Code | 00:32 | |
| 255 | Responsive Typography In Figma | 01:12 | |
| 256 | Responsive Typography In Code | 00:37 | |
| 257 | Adopting Body Typography Tokens In Figma | 01:42 | |
| 258 | Adopting Body Typography Tokens In Code | 01:40 | |
| 259 | Adopting Label Typography Tokens In Figma | 02:05 | |
| 260 | Adopting Label Typography Tokens In Code | 02:34 | |
| 261 | Adopting Tier 3 Typography Tokens In Figma | 00:53 | |
| 262 | Adopting Tier 3 Typography Tokens In Code | 00:37 | |
| 263 | Adopting Border, Shadow, and Animation Tokens In Code | 01:39 | |
| 264 | Using Token-Powered Components | 02:16 | |
| 265 | Tokens at the Technology-Specific Implementation Layer | 02:23 | |
| 266 | Tokens, CSS, and CSS Frameworks | 03:57 | |
| 267 | Adopting Design Tokens in Native Mobile Apps | 01:30 | |
| 268 | Adopting Design Tokens in iOS Apps | 02:52 | |
| 269 | Adopting Design Tokens in Android App | 02:33 | |
| 270 | Adopting Design Tokens in React Native | 03:12 | |
| 271 | Tokens and Other Technology Environments | 02:05 | |
| 272 | Technology-specific Considerations & Best Practices | 02:48 | |
| 273 | The Power of Recipes | 05:43 | |
| 274 | Recipes In Figma - Architecture | 01:12 | |
| 275 | Recipes In Figma - Publishing A Card Component | 00:51 | |
| 276 | Recipes In Figma - Creating Recipes | 03:48 | |
| 277 | Recipes In Code | 02:39 | |
| 278 | Recipes Best Practices & Considerations | 02:15 | |
| 279 | Smart Components and Design Tokens | 06:19 | |
| 280 | Design Tokens at the Product Layer | 03:13 | |
| 281 | Chapter 6 Summary | 02:58 | |
| 282 | Chapter 7 Introduction | 01:39 | |
| 283 | Chapter 7 Overview | 01:20 | |
| 284 | 4 Phases of a Design Token System Product Lifecycle | 01:33 | |
| 285 | Phase 1 - Goals | 00:33 | |
| 286 | Phase 1 - Team | 03:27 | |
| 287 | Phase 1 - Establishing the Virtuous Cycle | 00:54 | |
| 288 | Atomic Design Connects Systems To Products | 02:21 | |
| 289 | Atomic Design + Design Tokens = love | 01:07 | |
| 290 | Pilot Projects For The (Quick) Win! | 01:46 | |
| 291 | Pilot Project Criteria | 03:04 | |
| 292 | Pilot Project Examples & The Importance of MVP | 03:28 | |
| 293 | Finding Pilot Projects | 03:15 | |
| 294 | Pilot Project Starting Point | 02:44 | |
| 295 | Pilot Project - Maker and User Collaboration | 07:31 | |
| 296 | Phase 1 - Vanilla, Considerations, and Best Practices | 06:58 | |
| 297 | Phase 2 - Semantic Versioning | 04:15 | |
| 298 | Phase 2 - Semantic Version Example and Branching Intro | 04:41 | |
| 299 | Phase 2 - Branching in Code | 03:33 | |
| 300 | Phase 2 - Branching in Figma | 02:05 | |
| 301 | Phase 2 - Branching Example and Changelog | 03:02 | |
| 302 | Phase 2 - Additional Pilots | 03:47 | |
| 303 | Phase 2 - Version 1.0 and Pilot Project Considerations | 04:49 | |
| 304 | Phase 2 - Considerations and Best Practices | 01:51 | |
| 305 | Phase 3 - Picking a Third Pilot Project | 03:41 | |
| 306 | Phase 3 - Shifting Maker and User Roles | 05:08 | |
| 307 | Phase 3 - Governance Workflow Intro | 02:57 | |
| 308 | Phase 3 - Governance Workflow Details | 16:02 | |
| 309 | Phase 3 - Governance Workflow Summary | 01:33 | |
| 310 | Phase 3 - Considerations and Best Practices | 02:09 | |
| 311 | Phase 4 - Self-Service | 04:37 | |
| 312 | Chapter 7 Summary | 03:04 | |
| 313 | Chapter 8 Introduction | 04:12 | |
| 314 | Dark Mode Introduction | 04:29 | |
| 315 | Dark Mode In Practice | 04:53 | |
| 316 | Dark Mode: User-selected | 01:08 | |
| 317 | Dark Mode: System Settings | 01:29 | |
| 318 | Dark Mode Summary | 02:06 | |
| 319 | Subbrands | 03:51 | |
| 320 | Subbrands Summary | 01:13 | |
| 321 | White Labeling and CMS Implementation Introduction | 02:27 | |
| 322 | White Labeling and CMS Implementation Details | 06:00 | |
| 323 | White Labeling and CMS Implementation Summary | 02:15 | |
| 324 | Multiple Product Families | 04:31 | |
| 325 | Multiple Product Families Summary | 01:46 | |
| 326 | Internationalization/Localization | 02:53 | |
| 327 | Internationalization/Localization Summary | 01:41 | |
| 328 | Redesigns, Refreshes, and Rebrands Introduction | 05:10 | |
| 329 | Adopting Redesign/Refresh/Rebrand | 02:33 | |
| 330 | Adopting Redesign/Refresh/Rebrand Scenarios | 04:20 | |
| 331 | Redesign/Refresh/Rebrand Summary | 01:37 | |
| 332 | Campaigns | 03:24 | |
| 333 | Campaigns Summary | 00:52 | |
| 334 | AI and Design Tokens Intro | 05:48 | |
| 335 | AI and Design Token Nomenclature | 04:01 | |
| 336 | AI and Design Token Naming Help | 02:20 | |
| 337 | Figma AI | 01:19 | |
| 338 | AI and Design Tools | 01:12 | |
| 339 | AI and Developer IDEs | 01:38 | |
| 340 | AI and Design-Code Sync Tools | 03:40 | |
| 341 | AI-Infused Design Token Environment Setup | 03:45 | |
| 342 | Using AI to Create an MVP Token System from Brand Guidelines | 02:57 | |
| 343 | Using AI to Create an MVP Token System From an Image | 02:07 | |
| 344 | Using AI to Create an MVP Token System from Existing Product | 08:43 | |
| 345 | Build Out A Theme's Color Tokens with AI | 03:27 | |
| 346 | Testing a Token System with AI | 01:23 | |
| 347 | Creating a New Token-Powered Component with AI | 02:31 | |
| 348 | Using AI to Adopt Tokens in Existing Application | 02:33 | |
| 349 | Translate to Additional Formats With AI | 01:06 | |
| 350 | Using AI to Help Create Dark Mode Theme | 01:42 | |
| 351 | AI and Design Systems Is A Potent Combination | 02:13 | |
| 352 | Principles for AI and Design Systems | 03:34 | |
| 353 | Our Role In This New, Weird AI-Infused World | 05:01 | |
| 354 | Chapter 8 Summary | 02:57 | |
| 355 | Course Recap | 10:28 | |
| 356 | Closing Thoughts | 01:28 | |
| 357 | Certificate, LinkedIn, & Survey | 01:32 | |
| 358 | Acknowledgements & Thank Yous | 02:29 | |
| 359 | Follow Us, Thanks, and See Ya Soon! | 01:24 |
Unlock unlimited learning
Get instant access to all 358 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionBooks
Read Book Subatomic: The Complete Guide To Design Tokens
| # | Title |
|---|---|
| 1 | Chapter 0 - Intro |
| 2 | Chapter 1 - Core Concepts |
| 3 | Chapter 2 - Foundations |
| 4 | Chapter 3 - Naming |
| 5 | Chapter 4 - Building |
| 6 | Chapter 5 - Publishing |
| 7 | Chapter 6 - Adopting |
| 8 | Chapter 7 - Maintaining |
| 9 | Chapter 8 - Advanced |
Comments
0 commentsSimilar courses
UI Design Foundations
Sources: Andrija Prelec
Lay the foundation for your skills in UI design and equip yourself with the necessary knowledge and abilities to create captivating digital interfaces. Study...
4 hours 30 seconds
The Ultimate UI Grids & Layouts Masterclass
Sources: Andrija Prelec
The course is filled with practical tips and tricks from a senior product designer with a decade of experience in design. In addition to learning...
7 hours 6 minutes 36 seconds
The Ultimate UI Typography Masterclass
Sources: Andrija Prelec
The course is filled with real advice and tricks from a senior product designer with ten years of experience in design. Besides learning...
4 hours 53 minutes 7 seconds
UI Design Demo Videos Vault
Sources: Andrija Prelec
Unveil the secrets of senior UI designers. Ever wondered how professionals create impressive interfaces? The video library of UI design demonstrations...
12 hours 8 minutes 12 seconds
Complete Web & Mobile Designer in 2023: UI/UX, Figma, +more
Sources: udemy, zerotomastery.io
Using the latest best practices in Web Design and Mobile Design as well as User Interface and User Experience Design (UI/UX), this course focuses on efficiently
20 hours 31 minutes 41 seconds
Want to join the conversation?
Sign in to comment