Subatomic: The Complete Guide To Design Tokens

13h 27m 4s
English
Paid

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 Subatomic: The Complete Guide To Design Tokens

Join premium to watch
Go to premium
# Title Duration
1 Welcome! 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

Read Book Subatomic: The Complete Guide To Design Tokens

#Title
1Chapter 0 - Intro
2Chapter 1 - Core Concepts
3Chapter 2 - Foundations
4Chapter 3 - Naming
5Chapter 4 - Building
6Chapter 5 - Publishing
7Chapter 6 - Adopting
8Chapter 7 - Maintaining
9Chapter 8 - Advanced

Similar courses to Subatomic: The Complete Guide To Design Tokens

Solving Product Design Exercises: Questions & Answers (Full package)

Solving Product Design Exercises: Questions & Answers (Full package)Artiom Dashinsky

Category: Preparing for an interview, Other (Graphic)
Duration 2 hours 19 minutes 39 seconds
The Path to Senior Product Designer: A Growth Plan for a UX Design Career

The Path to Senior Product Designer: A Growth Plan for a UX Design CareerArtiom Dashinsky

Category: Other (Graphic)
Duration 6 hours 28 minutes 9 seconds
The UX Portfolio Formula - A UX portfolio course created by Sarah Doody
Photography Masterclass: A Complete Guide to Photography

Photography Masterclass: A Complete Guide to Photographyudemy

Category: Others, Other (Graphic)
Duration 23 hours 10 minutes 9 seconds
The Ultimate Airtable Design System Inventory and Automation (Bundle)

The Ultimate Airtable Design System Inventory and Automation (Bundle)Romina Kavcic

Category: Other (Graphic)
Duration 37 minutes 48 seconds
Kickstart your UI/UX Design Career / DesignCourse UI/UX

Kickstart your UI/UX Design Career / DesignCourse UI/UXGary Simon

Category: Figma, Other (Graphic)
Duration 16 hours 33 minutes 33 seconds
Complete Web & Mobile Designer in 2023: UI/UX, Figma, +more

Complete Web & Mobile Designer in 2023: UI/UX, Figma, +moreudemyzerotomastery.io

Category: Figma, Other (Graphic)
Duration 20 hours 31 minutes 41 seconds
UI Design Foundations

UI Design FoundationsAndrija Prelec

Category: Other (Graphic)
Duration 4 hours 30 seconds
UI Design Demo Videos Vault

UI Design Demo Videos VaultAndrija Prelec

Category: Other (Graphic)
Duration 12 hours 8 minutes 12 seconds
The Ultimate UI Typography Masterclass

The Ultimate UI Typography MasterclassAndrija Prelec

Category: Other (Graphic)
Duration 4 hours 53 minutes 7 seconds