Stop 08 · Design SystemsTopics · 3/9

Component Libraries

In short

Designers drag a button from the library. Developers import the same button from code. When both sides use one shared library, a new screen takes hours instead of days.

The actual reusable UI building blocks (buttons, inputs, cards) built from design tokens — the visible layer of a design system that designers actually drag onto a canvas.

The jaadu, as a mechanic, picks a part from a neatly organised shelf of spare parts in a garage.

Think of it like this

The mechanic's spare parts rack

A good garage doesn't build a new nut for every scooter. Parts sit on labelled shelves in standard sizes, ready to fit. A component library is that rack: tested buttons, inputs and cards, ready to drop into any screen.

Watch it happen

One Button component, many variants

Button

Type

Size

State

Primary

Secondary

Small / Large

Hover, Disabled

1/4One main component called Button. Designers never draw a button from scratch again.

The big ideas

What you need to know

Main and instances

Edit the main component and every copy (instance) updates. Instances can still swap text or icons.

Properties, not copies

Use variant properties for type, size and state, instead of 30 separate button components.

Design and code match

The best libraries have the same component names and properties in Figma and in code.

All states included

A component isn't done until hover, focus, disabled, error and loading states are designed.

Save yourself the pain

Common mistakes

Oops

Detaching instances to make quick one-off changes.

Do this instead

Detached copies stop getting updates. Add a proper property or variant to the main component instead.

Oops

Making a component for everything, even things used once.

Do this instead

Componentise what repeats. A one-time hero banner doesn't need to live in the library.

Your mission

Build a button set

~35 min

Quick check

You need a slightly different button on one screen. What's the best approach?

Go deeper

1Build a small component library (5-8 components) with consistent variants for a practice project.
2Learn to organize a component library file so it's easy to navigate and reuse.
3Practice building one component fully (all states, responsive behavior) rather than many half-finished ones.