Skip to content

Blog

Guides on design systems

Plain, practical writing on design systems, UX and the craft behind clear interfaces, in parts you can read one at a time.

Series · 14 of 14 parts out

Becoming a design system designer

A guide in parts: what a design system is, tokens, Figma, components, governance, UX, visual design, accessibility, motion, code and the job itself.

The whole series
  1. Part 013 min readWhat a design system is, and why teams build oneA design system is more than a component library. The five layers, the Atomic Design model, what it saves a team, and the public systems worth studying. Read part 1
  2. Part 024 min readDesign tokens: three tiers, clear names, one source of truthWhat design tokens are, why the semantic tier matters most, how to name them, how to build them in Figma Variables and how they reach code as CSS. Read part 2
  3. Part 034 min readFigma for design systems: Auto Layout, components and librariesThe Figma skills a design system depends on: Auto Layout as Flexbox, components, variants and properties, avoiding variant explosion, and publishing a library. Read part 3
  4. Part 043 min readBuilding a component library, one Button at a timeHow to build a design system component: audit, anatomy, variants and every state, a documentation template, API rules shared by Figma and code, and Storybook. Read part 4
  5. Part 054 min readGoverning a design system at scaleWho runs a design system and how it changes: team models, a contribution process, semantic versioning and deprecation, and the signals that show adoption. Read part 5
  6. Part 066 min readUX principles: the reasons behind a design decisionNielsen’s ten heuristics, the Laws of UX, Gestalt grouping, mental models, affordances and signifiers, explained with plain interface examples. Read part 6
  7. Part 074 min readUser flows, wireframes and every state of a screenHow to map a user flow, pick the right wireframe fidelity, organise information and design every state of a screen, from empty and loading to error. Read part 7
  8. Part 085 min readVisual design: hierarchy, type, spacing, colour and layoutVisual design makes an interface easy to read. Hierarchy, type scales, the 4 and 8 point grid, colour palettes, OKLCH and layout grids, explained. Read part 8
  9. Part 095 min readAccessibility: build it into the system onceThe WCAG principles, a designer’s WCAG 2.2 checklist for contrast, focus and target size, and how keyboard and screen reader users move through a UI. Read part 9
  10. Part 105 min readMotion, transitions and micro-interactionsMotion is communication, not decoration. What it is for, the four parts of a micro-interaction, duration and easing tokens, reduced motion and performance. Read part 10
  11. Part 116 min readHow much HTML, CSS and JavaScript a designer needsEnough code to work with engineers: semantic HTML, Flexbox and Grid, custom properties, container queries, :has(), and the UI states JavaScript reveals. Read part 11
  12. Part 125 min readVisual QA, and turning user behaviour into design decisionsA self-review checklist, how to QA a build against the design, how to write issues engineers can act on, and how to turn research and analytics into insight. Read part 12
  13. Part 137 min readWorking as a design system designer: collaboration, portfolio and interviewsHow to work with product and engineering, write clearly, structure a design system case study, prepare for interviews, and a 30-day plan to practise it all. Read part 13
  14. Part 145 min readA glossary of design system termsPlain definitions of the terms used across this series: tokens, modes, variants, governance, semver, easing, container queries, design QA, HEART and STAR. Read part 14