• A hands-on, 72-module, 10+ hour course that gets you started on everything you need to know to get a design system’s design and code up and running.
• Design systems are essential for organizations of all sizes, from Fortune 500 companies to design-forward brands. Many organizations now have dedicated teams to build and maintain design systems because they save time and resources while improving product quality. As a designer building your career, knowing how to work with design systems gives you a competitive edge in today’s job market.

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

• Use an Existing, Public Design System

02 - Processes, Workflows, and Frameworks

• Processes, Workflows, and Frameworks

• Waterfall

• Agile

• Front-End Engineering is More Important than Visual Design

• Front-End Engineering is More Important than Back-End Engineering

• Front-End Engineering: The Missing Skillset

• The Best Type of Agile for Design Systems

• Working in Public

• Hot Potato

• Create a Webpage Using the Hot Potato Process

03 - Design System Tools: Designing & Coding Components

• Design System Tools: Designing & Coding Components

• What’s So Difficult about Creating Design Systems?

• The Virtuous Cycle for Digital Organizations

• The Broken Business of Buy-In

• Pilots: The Best Way to Start and Scale a Design System

• Case Study: Piloting Unity, a Design System for ExxonMobil

• The Most Exciting Design Systems are Boring

• Don’t Create. Collect.

• Design Systems are an Emergent Strategy

• The Measuring Spoon Cycle for Design Systems

• How Do You Know if a Component Should Be Added to the Design System?

• Designing Components

• Yak Shaving

• How the Internet Works

• Creating and Publishing a Design System with React and NPM

• Keeping Design and Code in Sync

• 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

• The Ecosystem of Design Systems

• Don’t Document. Chronicle.

• Reference Sites are Marketing Sites Too

• Reference Site Tools Roundup

• Let’s Chronicle a Design System

• Create a Reference Site for Your Design System

05 - Creativity & Deviating from the System

• Creativity & Deviating from the System

• If Everything’s Special, Nothing’s Special

• If Nothing’s Special, Nothing’s Special

• 80/20 Rule for Design Systems

• Design Systems Aren’t All or Nothing

• The Virtuous Cycle, Revisited

• 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!