Course 3

Design Systems & Components in Figma

Scale design: components, variants, properties, styles, and tokens that keep a product consistent.

Build a reusable system — components with variants and properties, shared styles, and tokens — so a team designs fast without drifting.

Choose your track

Track A (designers/artists): focus on judgment — reading agent output critically and steering it toward your intent.

Beginner

The canvas, the core tools, your first real screen.

Components and variants — design once, reuse everywhere

ABC ~9 min

A beginner designs a button forty times across forty screens, then the brand colour changes and they spend an afternoon fixing forty buttons — and miss six. Copy-paste is a debt you repay with interest.

Intermediate

Layout that adapts, reusable pieces, and interaction basics.

Properties, styles, and tokens

ABC ~9 min

You can end up with sixty variants of one button — every combination of size, icon, and state — and a panel no one can navigate, because you modelled with variants what should have been properties.

Advanced

Robust systems, complex prototypes, motion with intent.

Dev Mode and handoff — designs engineers can build

ABC ~9 min

A pixel-perfect file that an engineer cannot read costs the team more than a rough sketch that they can — handoff is a deliverable in its own right, and most of its quality was decided long before you opened Dev Mode.

Master

Judgment: when to abstract, when to ship, and how to keep a system alive.

Keeping a system alive — abstraction and governance

ABC ~9 min

Most design systems do not fail technically — they rot socially: the components are fine, but people stop using them, make one-off copies under deadline, and within months the library and the real product no longer match.

← All three courses