What you’ll learn
- Define colour, type and spacing tokens with Figma variables
- Build flexible components using auto layout and variants
- Document components so designers and developers use them correctly
- Plan versioning and handoff so design and code stay in sync
Course content
3 sections · 9 lessons · 41 min
Foundations: tokens3 lessons · 11 min
- What a design system is (and isn't)Video · 9 min
- Design tokensReading · 1 min
- Variables and modes in FigmaReading · 1 min
Components3 lessons · 18 min
- Auto layout in depthVideo · 16 min
- Variants and propertiesReading · 1 min
- Composition over configurationReading · 1 min
Documentation and rollout3 lessons · 12 min
- Writing component documentationVideo · 10 min
- Keeping design and code in syncReading · 1 min
- Rolling it outReading · 1 min
Requirements
- Comfortable with Figma basics (frames, layers, text)
- Some experience designing interfaces
Description
A design system turns one-off screens into a shared language between design and engineering. In this course you'll build a small but complete system in Figma: tokens for colour and spacing, components with variants, and documentation your team will actually read. You'll also learn how to roll a system out, keep it in sync with code and decide what belongs in it and what doesn't.
Instructor
Product designer · Design systems lead
- 4.6 instructor rating
- 35 reviews
- 96 learners
- 2 courses
I design interfaces and the systems behind them. I've built and maintained design systems used by dozens of product teams. My courses focus on principles you can apply on Monday morning, with plenty of before-and-after examples.
4.7 course rating · 9 reviews
- Yusuf Mensah5.0 · Oct 22, 2026
The instructor explains things really clearly.
- Chloe Brown5.0 · Oct 22, 2026
Loved the reading notes, easy to come back to later.
- Mei Rossi4.0 · Oct 22, 2026
Helpful content. Would love a follow-up course.
- Jonas Chopra5.0 · Oct 22, 2026
Practical from the very first lesson.
- Sofia Chen4.0 · Oct 22, 2026
Useful and to the point. I'd recommend it to colleagues.
- Rohan Menon5.0 · Oct 22, 2026
Composition over configuration is now our team motto.
- Pablo Murphy4.0 · Oct 22, 2026
Great content; a bit fast in the auto layout video, so I watched it twice.
- Wei Dubois5.0 · Oct 22, 2026
Practical rollout advice you don't get from Figma tutorials.
- Zara Reddy5.0 · Oct 22, 2026
The tokens section is the clearest explanation I've seen. We restructured our library after this.