00

Course Prep

• Welcome to the Course!
• Why Design Systems
• The Value of Design Systems
• About the Instructor
• About This Course
• How This Course Works
• About the Capstone Project
• Design or Code?
• Tools & Software
• About Figma
• Sign Up for a CodePen Account

01

Design Systems

• An Overview of Design Systems
• The 7 Types of Design Systems
• Design Systems as Brand Identities and Visual Language
• Design Systems as Projects
• Design Systems as Tools and Templates
• Design Systems as Digital Products
• Design Systems as a Process
• Design Systems as a Service
• Design Systems as a Practice
• Choose Your Own Design System Adventure
• Intro to Design Tools for Design Systems
• Intro to Engineering Tools for Design Systems
• Design System Roundup
• Using a Design System in Figma
• Using a Design System in Figma
• Use an Existing, Public Design System

02

Processes, Workflows, and Frameworks

• Processes, Workflows, and Frameworks 1:26
• Waterfall 2:44
• Agile 5:05
• Front-End Engineering is More Important than Visual Design 2:41
• Front-End Engineering is More Important than Back-End Engineering 1:27
• Front-End Engineering: The Missing Skillset 1:11
• The Best Type of Agile for Design Systems 1:56
• Working in Public 3:16 
• Hot Potato 44:15
• Create a Webpage Using the Hot Potato Process

03

Design System Tools: Designing & Coding Components

• Design System Tools: Designing & Coding Components1:59
• What’s So Difficult about Creating Design Systems?2:38
• The Virtuous Cycle for Digital Organizations0:49
• The Broken Business of Buy-In2:11
• Pilots: The Best Way to Start and Scale a Design System5:00
• Case Study: Piloting Unity, a Design System for ExxonMobil6:08The Most Exciting Design Systems are Boring1:01
• Don’t Create. Collect.2:30
• Design Systems are an Emergent Strategy1:21The Measuring Spoon Cycle for Design Systems2:18
• How Do You Know if a Component Should Be Added to the Design System?1:28
• Designing Components2:49:30
• Yak Shaving4:24How the Internet Works31:51
• Creating and Publishing a Design System with React and NPM55:42Keeping Design and Code in Sync4:45
• An Assignment of 2’s: Make 2 Design Systems with 2 Components Each and 2 Implementations of Them

04

Documentation & Reference Websites

• Documentation & Reference Websites 2:59
• The Ecosystem of Design Systems 14:03
• Don’t Document. Chronicle. 4:46
• Reference Sites are Marketing Sites Too 6:38 
• Reference Site Tools Roundup 16:31
• Let’s Chronicle a Design System 59:35 
• Create a Reference Site for Your Design System

05

Creativity & Deviating from the System

• Creativity & Deviating from the System  2:01  
• If Everything’s Special, Nothing’s Special  4:25  
• If Nothing’s Special, Nothing’s Special  2:50  
• 80/20 Rule for Design Systems  4:25  
• Design Systems Aren’t All or Nothing  3:58  
• The Virtuous Cycle, Revisited  3:36  
• Create a Blended Page of New and Old Components

06

Capstone Project: Part 1

• Create 3 Products, Powered by the Same Design System

07

Capstone Project: Part 2

• Update Your 3 Products to Match the New Rebrand

08

Graduation

• Graduation

Ten things you’ll learn from the course