Design Systems Intermediate

Building Scalable Design Systems with Tokens & Components

DW
Dana Whitfield · Updated May 2026
4.9 (1,284 ratings) · 8,420 students

Your progress

11 of 26 lessons complete · 42%

Continue learning
26
Lessons
6.5h
Total duration
4
Projects
Cert.
On completion

Course content

26 lessons · 6h 32m
Introduction to Design Systems
45m · 4 lessons Complete
  • Checkmark circle
    What is a design system? 12:30
  • Checkmark circle
    Anatomy: tokens, components, docs 8:45
  • Checkmark circle
    Choosing the right tools 14:20
  • Checkmark circle
    Section overview & resources 10:00
Design Tokens Deep Dive
1h 20m · 7 lessons
  • Checkmark circle
    Naming conventions and tiers 16:00
  • Checkmark circle
    Color tokens: semantic vs primitive 18:00
  • Checkmark circle
    Spacing, radius, and shadow tokens 14:30
  • Play circle
    Typography tokens 12:00
  • Play circle
    Token JSON schema and tooling 10:00
  • Play circle
    Cross-platform distribution 9:00
  • Play circle
    Token versioning strategies 10:00
Building Components
2h 10m · 9 lessons
  • Play circle
    Component API design principles 15:00
  • Play circle
    Variants, states, and sizes 18:00
  • Play circle
    Accessibility baked in 20:00
  • Play circle
    Composition patterns 16:00
  • Play circle
    Testing components 14:00
  • Play circle
    Theming and customisation 17:00
  • Play circle
    Documentation standards 11:00
  • Play circle
    Code review checklist 8:00
  • Play circle
    Publishing to npm 11:00
Documentation & Adoption
1h 15m · 6 lessons
  • Play circle
    Storybook setup and configuration 14:00
  • Play circle
    Writing effective component stories 12:00
  • Play circle
    Automated visual regression testing 10:00
  • Play circle
    Driving adoption in your organisation 16:00
  • Play circle
    Change management and versioning 9:00
  • Play circle
    Course wrap-up and next steps 14:00