MASTER DESIGN TOKENS

Welcome!

About your teachers

Who This Course Is For

Course Structure

What's Included

Join the community

Chapter 1 Introduction

The Problems Design Tokens Solve

The Multi-All-The-Things Organization

The Business Case For Design Tokens

The New Separation of Concerns

The ROI of Design Tokens

The History of Themeable User Interfaces

Design Tokens Origin Story

What Are Design Tokens?

Tokens in Design Tools

Tokens in Code

The Role of Design Tokens in a Design System Ecosystem

Chapter 1 Summary

Chapter 2 Introduction

Brand Style Guide Vs Product Reality

Creating an MVP Token System

The Three-Tiered Token Architecture

Themes

Color Systems - Introduction

Color Systems - Brand Considerations

Color Systems - Visual Considerations

Color Systems - UX Considerations

Color Systems - Accessibility Considerations

Color Systems - Three-Tiered color tokens

Typography Systems- Introduction

Typography Systems- Brand Considerations

Typography Systems- Visual Considerations

Typography Systems- UX Considerations

Typography Systems- Accessibility Considerations

Composite Tokens Definition

Typography Systems- Tier 1 Tokens

Typography Systems- Tier 2 Tokens

Typography Systems- Tier 3 Tokens

Spacing - Use an 8pt or 4pt grid

Spacing - Three-tiered Tokens

Spacing - Summary

Border Tokens

Shadow Tokens

Animation Tokens

A Quick Note About Breakpoints and z-index

Chapter 2 Summary

Chapter 3 Introduction

Why Naming Matters - Humanity's Superpower

Why Naming Matters - Shared Understanding

Why Naming Matters - Collaboration

Why Naming Matters - Contract

Why Naming Matters - Infrastructure

Why Naming Matters - Traceability & Measurement

Why Naming Matters - User Experience

Why Naming Matters - Maintainability

Why Naming Matters - Synchronization & Automation

Why Naming Matters - Summary

Why Naming Is Hard - Two Hard Things In Computer Science

Why Naming Is Hard - Invented Language

Why Naming Is Hard - Subjectivity

Why Naming Is Hard - What Actually Matters? It Depends!

Why Naming Is Hard - Rigor & Organization

Why Naming Is Hard - Consistency

Why Naming Is Hard - Designer/Developer Divide

Why Naming Is Hard - Environments & Contexts Differ

Why Naming Is Hard - Summary

Naming Principles - Introduction

Naming Principles - Clarity Over Cleverness

Naming Principles - Legibility Over Succinctness

Naming Principles - Consistency Is Key

Naming Principles - Use Existing Conventions

Naming Principles - Communicate Hierarchy

Naming Principles - Pragmatism Over Pedantry

Naming Principles - Environment Agnostic

Naming Principles - Summary

The Importance of Cross-disciplinary Collaboration

Cross-disciplinary Roles for Naming

Naming Parity - Critical but Impossible!

Naming Parity Differences - Global Namespace

Naming Parity Differences - Viewport

Naming Parity Differences - Animation

Naming Parity Differences - z-index

Naming Parity Differences - Named and Unnamed Defaults

Naming Systems and Preferences

Synonyms

The Naming Algorithm

Naming Algorithm Figjam Intro

Naming Algorithm Figjam Tour

Naming Algorithm Process

Naming Tokens By Category

Global Prefix

Tier Identifier

Token Category

Color Token Names - Tier 1

Color Token Names - Tier 2

Color Token Names - Tier 3

Color Token Names - Summary

Typography Token Names - Tier 1

Typography Token Names - Tier 2

Typography Token Names - Tier 3

Typography Token Names - Summary

Spacing Token Names

Border Token Names

Shadow Token Names

Animation Token Names

Breakpoint Token Names

z-index Token Names

Chapter 3 Summary

Chapter 4 Introduction

Introducing...Frost'd Tokens!

Demo Tour in Figma and Code

🗄️ Accessing the Project Demo Files

🗄️ Accessing the Project Demo Figma Files

🗄️ Accessing the Project Demo Code Files and Storybook

Token Build Process Overview; Cross-disciplinary Approach

1. Choosing Tools for Figma

1. Choosing Tools for Code

2. Environment Setup for Figma

2. Environment Setup for Code - Prerequisites & Config

3. MVP Tier 1 Tokens in Figma

3. MVP Tier 1 Tokens in Code

3. MVP Tier 2 Token in Figma

3. MVP Tier 2 Token in Code

3. MVP Tier 3 Token in Figma

3. MVP Tier 3 Token in Code

3. Add Global Prefix to Code Config

3. Add Theme Prefix to Code Config

3. Expanding MVP Tier 1 Color Tokens in Figma

3. Expanding MVP Tier 1 Color Tokens in Code

3. Expanding MVP Tier 2 Color Tokens in Figma

3. Expanding MVP Tier 2 Color Tokens in Code

3. Expanding MVP Tier 3 Color Tokens in Figma

3. Expanding MVP Tier 3 Color Tokens in Code

3. Wiring Up MVP Tokens in Figma

3. Wiring Up MVP Tokens in Code

3. Scoping Figma Variables

4. Building a Full Theme Intro

4. Theme Tier 1 Colors in Figma

4. Theme Tier 1 Colors in Code

4. Theme Tier 2 Colors in Figma

4. Theme Tier 2 Colors in Code

4. Theme Tier 3 Colors in Figma

4. Theme Tier 3 Colors in Code

4. Tier 1 Typography in Figma

4. Tier 1 Typography in Code

4. Understanding Relative Units and Differences between Figma & Code

4. Understanding Unitless Line Height and Differences between Figma & Code

4. Tier 2 Typography in Figma

4. Tier 2 Typography in Code

4. Responsive Typography - Core Concepts

4. Responsive Typography - Composite Tokens

4. Understanding the Difference Between Viewports & Breakpoints

4. Figma Modes and Viewport

4. Applying Responsive Typography in Figma

4. Responsive Typography in Code - Sass Mixins

Responsive Typography in Code - applying mixins

4. Typography Celebration!

4. Tier 1 Spacing in Figma

4. Spacing Tier 2 in Code & Sass Size Function

4. Tier 2 Spacing in Figma

4. Border Tier 1 in Figma

4. Border Tier 1 in Code

4. Border Tier 2 in Figma

4. Border Tier 2 in Code

4. Shadow Tier 1 in Figma

4. Shadow Tier 1 in Code

4. Shadow Tier 2 in Figma

4. Shadow Tier 2 in Code

4. Animation Tier 1 in Code

4. Animation Tier 2 in Code

4. Applying Animation Tokens in CSS

4. z-index

4. We Have A Theme! A Tour of Our Theme's Documentation

4. Our Theme Applied to Frost'd Tokens Products

5. Let's Add A Chocolate Theme!

5. Introducing the Vanilla Theme Concept

5. Add An Additional Theme in Figma

5. Core Tokens Introduction

5. Core Tokens in Figma

5. Add An Additional Theme in Code

5. Core Tokens in Code

5. The Magic Trick of Theme Switching in Figma

5. Theme Switching in Code

5. Revisiting The Vanilla Theme

5. Rounding Out Our Token System

Synchronization & Automation - Introduction

Token Czars

Synchronization & Automation - Fully Manual

🗄️ Accessing the Project Demo Code with only Tier 2 and Tier 3 Tokens Being Exported

Synchronization & Automation - Design Tokens Manager

🗄️ Accessing the Project Demo Code with Design Tokens Manager and iOS Platform Tokens

Synchronization & Automation - Tokens Studio

🗄️ Accessing the Project Demo Code with Tokens Studio and iOS Platform Tokens

Synchronization & Automation - Other Tools

Synchronization & Automation - Full Automation

Chapter 4 Summary

Chapter 4 Homework and Next Steps

Chapter 5 Introduction

Design Token Systems Are Products

Difference Between Products and Libraries

The Arc of Publishing A Token Library

Design Token System Makers & Users

User-Centered Design for Token Systems

Should You Publish Tier 1 Tokens?

Pre-Publishing Checklist: Proper Mapping

Pre-Publishing Checklist: Design & Code Alignment

Pre-Publishing Checklist: Scope Variables

Pre-Publishing Checklist: Hide From Publishing

Pre-Publishing Checklist: Check Accessibility

Pre-Publishing Checklist: Test Build

Pre-Publishing Checklist: Check Documentation

Publishing a Tokens Library in Figma

Quick Intro to Consuming a Tokens Library in Figma

Publishing a Tokens Library in Code - Intro

Publishing a Tokens Library in Code - Build Process

Quick Intro to Consuming a Tokens Library in Code

Chapter 5 Summary

Chapter 6 Introduction

Understanding Design Token Adoption

Spectrum of Token Integration - Reference

Spectrum of Token Integration - Importing Token Library

Spectrum of Token Integration - Importing Component Library

Design Token Users - You!

Design Token Users - Other Product Teams

Design Token Users - Devs Using Multiple Tech Stacks

Design Token Users - Auxiliary Users

Design Token Users - Stakeholders

Users Don't Care About Design Tokens

Adopting Tokens At Every Layer of the Design System Ecosystem

Subscribing to the Token Figma Team Library

Importing the Tokens Code Package

Wiring Up Tokens To Existing Figma Components

Wiring Up Tokens To Existing Code Components

Best Practices for Adopting Design Tokens in Existing Components

The Importance of Showing the Magic Trick

Wiring Up Tokens To New Figma Components

Wiring Up Tokens To New Code Components

Showing The Magic Trick for New Components

Best Practices for Adopting Design Tokens in New Components

Applying Your Token Nomenclature

Adopting Default Color Tokens In Figma

Adopting Default Color Tokens In Code

Adopting Brand Color Tokens In Figma

Adopting Brand Color Tokens In Code

Accent Color Tokens

Adopting Disabled Color Tokens In Figma

Adopting Disabled Color Tokens In Code

Adopting Utility Color Tokens In Figma

Adopting Utility Color Tokens In Code

Color Token Variants

Adopting Knockout Variant Color Tokens In Figma

Adopting Knockout Variant Color Tokens In Code

Subtle and Strong Color Token Variants

Adopting Tier 3 Color Tokens In Figma

Adopting Tier 3 Color Tokens In Code

Adopting Display Typography Tokens In Figma

Adopting Display Typography Tokens In Code

Adopting Headline Typography Tokens In Figma

Adopting Headline Typography Tokens In Code

Adopting Title Typography Tokens In Figma

Adopting Title Typography Tokens In Code

Responsive Typography In Figma

Responsive Typography In Code

Adopting Body Typography Tokens In Figma

Adopting Body Typography Tokens In Code

Adopting Label Typography Tokens In Figma

Adopting Label Typography Tokens In Code

Adopting Tier 3 Typography Tokens In Figma

Adopting Tier 3 Typography Tokens In Code

Adopting Border, Shadow, and Animation Tokens In Code

Using Token-Powered Components

Tokens at the Technology-Specific Implementation Layer

Tokens, CSS, and CSS Frameworks

Adopting Design Tokens in Native Mobile Apps

Adopting Design Tokens in iOS Apps

Adopting Design Tokens in Android App

Adopting Design Tokens in React Native

🗄️ Accessing the Project Demo Code with Design Tokens Manager and React Native Tokens

Tokens and Other Technology Environments

Technology-specific Considerations & Best Practices

The Power of Recipes

Recipes In Figma - Architecture

Recipes In Figma - Publishing A Card Component

Recipes In Figma - Creating Recipes

Recipes In Code

Recipes Best Practices & Considerations

Smart Components and Design Tokens

Design Tokens at the Product Layer

Chapter 6 Summary

Chapter 7 Introduction

Chapter 7 Overview

4 Phases of a Design Token System Product Lifecycle

Phase 1 - Goals

Phase 1 - Team

Phase 1 - Establishing the Virtuous Cycle

Atomic Design Connects Systems To Products

Atomic Design + Design Tokens = ❤️

Pilot Projects For The (Quick) Win!

Pilot Project Criteria

Pilot Project Examples & The Importance of MVP

Finding Pilot Projects

Pilot Project Starting Point

Pilot Project - Maker and User Collaboration

Phase 1 - Vanilla, Considerations, and Best Practices

Phase 2 - Semantic Versioning

Phase 2 - Semantic Version Example and Branching Intro

Phase 2 - Branching in Code

Phase 2 - Branching in Figma

Phase 2 - Branching Example and Changelog

Phase 2 - Additional Pilots

Phase 2 - Version 1.0 and Pilot Project Considerations

Phase 2 - Considerations and Best Practices

Phase 3 - Picking a Third Pilot Project

Phase 3 - Shifting Maker and User Roles

Phase 3 - Governance Workflow Intro

Phase 3 - Governance Workflow Details

Phase 3 - Governance Workflow Summary

Phase 3 - Considerations and Best Practices

Phase 4 - Self-Service

Chapter 7 Summary

Chapter 8 Introduction

Dark Mode Introduction

Dark Mode In Practice

Dark Mode: User-selected

Dark Mode: System Settings

Dark Mode Summary

Subbrands

Subbrands Summary

White Labeling and CMS Implementation Introduction

White Labeling and CMS Implementation Details

White Labeling and CMS Implementation Summary

Multiple Product Families

Multiple Product Families Summary

Internationalization/Localization

Internationalization/Localization Summary

Redesigns, Refreshes, and Rebrands Introduction

Adopting Redesign/Refresh/Rebrand

Adopting Redesign/Refresh/Rebrand Scenarios

Redesign/Refresh/Rebrand Summary

Campaigns

Campaigns Summary

AI and Design Tokens Intro

AI and Design Token Nomenclature

AI and Design Token Naming Help

Figma AI

AI and Design Tools

AI and Developer IDEs

AI and Design-Code Sync Tools

AI-Infused Design Token Environment Setup

Using AI to Create an MVP Token System from Brand Guidelines

Using AI to Create an MVP Token System From an Image

Using AI to Create an MVP Token System from Existing Product

Build Out A Theme's Color Tokens with AI

Testing a Token System with AI

Creating a New Token-Powered Component with AI

Using AI to Adopt Tokens in Existing Application

Translate to Additional Formats With AI

Using AI to Help Create Dark Mode Theme

AI and Design Systems Is A Potent Combination

Principles for AI and Design Systems

Our Role In This New, Weird AI-Infused World

Chapter 8 Summary

Course Recap

Closing Thoughts

Certificate, LinkedIn, & Survey

Acknowledgements & Thank Yous

Follow Us, Thanks, and See Ya Soon!

Course Feedback Survey

Links & Resources