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