Stop 06 · Design Collaboration & UXTopics · 5/10

Design Systems

In short

Ever seen five slightly different blue buttons in one app? A design system stops that, and it lets teams ship new screens much faster.

A shared library of reusable components, patterns and rules (buttons, spacing, color) that keeps a product visually and behaviorally consistent as it grows across teams.

The purple blob builds a small house from colourful snap-together blocks taken from sorted trays.

Think of it like this

Snap-together building blocks

With a box of standard building blocks, you can build a house, a car or a bridge, and every piece fits. Nobody carves a new brick each time. A design system is that box for screens: buttons, inputs and cards that always fit.

Watch it happen

Layers of a design system

Design system

1/5Tokens are named basics like color-primary or space-4. Change one token and every screen updates.

The big ideas

What you need to know

Faster building

Teams assemble screens from ready parts instead of designing every button from scratch.

Consistency for free

Users learn a pattern once and it works the same across the product.

Lives in design and code

A real system has matching Figma components and coded components. One without the other drifts.

Needs owners

Someone must maintain it, review new pieces and say no to one-off variants.

Save yourself the pain

Common mistakes

Oops

Asking for a custom component every sprint because "this case is special".

Do this instead

First check if an existing component works. If not, propose adding it to the system properly.

Oops

Treating the design system as a one-time project.

Do this instead

Plan ongoing time to maintain it, like any product with users.

Your mission

Audit an app's building blocks

~30 min

Quick check

The brand colour changes. In a well-built design system, what's the main thing that has to change?

Go deeper

1Explore a public design system (e.g. Material Design, or a well-known company's).
2Notice how a design system speeds up both design and engineering work.
3Learn why 'just add one more button style' requests are a design-system red flag.