Brad Frost – Subatomic The Complete Guide To Design Tokens

Here’s What You Get: Over 13 hours of in-depth videos Figma & code sample architecture Naming & governance workflows PDF slides with over 150 resources Certificate of completion Course Content Over 13 hours of in-depth video comprehensively covering core concepts, best practices, resources, insights, real-world stories, and actionable advice. 1. Design Token Core Concepts Why design tokens are critical for orgs supporting Multi-All-The-Things: products, platforms, brands, modes, & more Covered in this section: The problems design tokens solve Use cases The business case for design tokens Separation of concerns The history of themeable user interfaces What are design tokens? Tokens in design and code The role of tokens in a design system ecosystem 2. Token Foundations & Architecture A 3-tiered design token architecture, color systems, typography systems, border, spacing, and more Covered in this section: MVP token system The three-tiered token architecture Themes Color systems Typography systems Spacing systems Other: border, shadow, animation, breakpoints, z-index 3. Naming Conventions Tools, structure, and pragmatic advice to help you conquer the biggest pain in the ass around creating a token system Covered in this section: Why naming matters Why naming is hard Naming principles Cross-disciplinary collaboration Naming parity between design and code The token naming algorithm Token naming conventions by category 4. Building a Token System Figma Variables, Style Dictionary, and other tools. The good, bad, and ugly of synchronization and automation. Covered in this section: A tour of what we’re creating! Choosing tools for Figma and code Environment setup Creating an MVP token system Build out a theme’s color, typography, spacing, border, shadow, animation Creating an additional theme Synchronization & automation between design & code 5. Publishing a Token System Tokens as a product. Figma team libraries, npm and its ilk. What to publish. Coordinating releases. Covered in this section: Design token systems as a product Preparing for publishing Publishing a token library in Figma Publishing a token library in code 6. Adopting Design Tokens The user experience of design tokens; how design system consumers use design tokens Covered in this section: Understanding design token adoption Understanding the many types of design token system users Applying design tokens to the design system ecosystem Using tokens in a design system component library Working with token architecture conventions Applying tokens to native mobile and other non-web environments Using design tokens in design system recipes Using design tokens in smart components and other software contexts Using tokens in product design & development 7. Maintaining & Evolving Token Systems Pilot projects, token czars, branching, versioning, releasing, and governing a token system Covered in this section: The phases of a design token system product lifecycle Atomic design, design tokens, and powering real products Creating pilot projects Semantic versioning Releasing updates & new themes Governance model for a token system Use cases for a self service token system 8. Advanced Design Tokens Dark mode, rebrands, sub-brands, white-labeling, multiple product families, and more Covered in this section: Extending your token system to support advanced use cases Dark mode Subbrands White labeling Internationalization/Localization CMS integration Redesigns & Rebrands AI and design token systems