As a product grows, keeping every screen consistent gets harder. A design system solves this: it is a shared set of reusable components, design tokens (named values for colour, type and spacing) and guidelines that designers and developers both build from. It becomes a single source of truth, so teams spend less time redrawing buttons and more time solving real problems.
You'll learn what a design system is, how components and variants are structured, how tokens and variables work, and how to build a first system in Figma. You'll also see why documentation and adoption matter as much as the components themselves.
Treat the videos as a reference and come back to them when you start building your own library. When you're done, continue on to Usability Testing.
Brad Frost explains what a UX design system is, how it fits into UX design, and the benefits it brings to teams.
How to build reusable components that resize and adapt using auto layout, the foundation of any component library.
What design tokens are and how to structure them as primitive, semantic and component tokens in a design system.
A beginner-friendly build of the base of a design system in Figma, showing how approachable the process can be.
A zeroheight panel on getting teams to actually use a design system, and how documentation supports adoption.