Design system
A course about turning a pile of layouts into a system: tokens, scales, components and rules other people can work with. We build a system for a real product — from an audit of the existing screens to documentation and versioning.
What you will be able to do
8 modules, one project
01 Why a system, and when not to have one2 lessons · 1 h 40 minOpen
We look at what problems a design system solves and in which projects it only gets in the way. We define the scale of the future system and its boundaries: what goes in and what stays a one-off decision.
02 Auditing the existing layouts3 lessons · 2 h 04 min
We gather every screen of the product and break them down into repeating elements. We record the divergences in colour, type and spacing and decide what to merge and what to drop.
03 Tokens: the base of the system3 lessons · 2 h 09 min
Three levels of tokens — primitives, semantics and component values. We cover naming, the file structure, and turn spacing, corner radii and shadows into scales you can reason about.
04 The type scale2 lessons · 1 h 35 min
We build a scale of text sizes, line heights and weights. We turn it into a set of Figma text styles and check it on real screens with long text.
05 Colour palette, themes and contrast3 lessons · 2 h 05 min
We build a base palette with tonal steps, tie semantic tokens to it and get a light and a dark theme. We check contrast and fix the problem pairs.
06 The component library and its states3 lessons · 2 h 26 min
We build components on tokens and variants: from buttons and input fields to cards and modals. We work through the full set of states for every element.
07 Composition and grids2 lessons · 1 h 26 min
We set grids and breakpoints for different screen sizes. We cover interface density, vertical rhythm and the rules by which components add up to a layout.
08 Documentation, handover and upkeep3 lessons · 2 h 35 min
We describe components so the system is understood without you: purpose, anatomy, states and prohibitions. We hand the system to the team and set up versioning and a process for accepting changes.
What you get
A ready structure of Figma pages: primitives, semantic tokens, text styles and component stubs — you can start building straight away.
Forty checks on colours, type, spacing and states — it helps you see the divergences in existing screens quickly.
A ready matrix of text-on-background pairs for the light and dark themes, with the ratio calculated and problem combinations flagged.
The structure of a description: purpose, anatomy, states, usage rules and prohibitions — fifteen minutes to fill in per component.
The whole first module is open
Watch the lessons of the first module and the first task. If the format does not suit you, you have lost nothing.