Stop 08 · Design SystemsTopics · 5/9

Building a Design System in Figma

In short

You know the theory. Now let's build it: variables for tokens, components with variants, auto layout everywhere. Done right, a whole team can design with your file without breaking it.

Applying components, variants, auto layout, and tokens together to build a functional, reusable design system file that a real team could actually use day to day.

The jaadu, as a sweet maker, presses sweets out of a mould onto a tray in a tidy kitchen.

Think of it like this

Setting up a mithai shop kitchen

Before the Diwali rush, the halwai fixes the recipes, labels the containers and makes moulds for each sweet. Then any helper can make perfect kaju katli. Your Figma system is the labelled kitchen and the moulds.

Watch it happen

Building the system, in order

Variables

Text styles

Components

Auto layout

Publish

1/5Create variable collections for colour, spacing and radius. Add light and dark modes if you need them.

The big ideas

What you need to know

Variables first

Components built on variables can switch themes and update in one click. Build that base before any button.

Auto layout everywhere

It makes components resize like real code would. Fixed-size frames break as soon as text changes.

Clear property names

Name properties the way developers would, like 'size' and 'disabled'. Handoff gets much easier.

Tidy pages

Keep separate pages for foundations, components and a sandbox for testing. People should find things fast.

Save yourself the pain

Common mistakes

Oops

Building 50 components before checking the base variables work.

Do this instead

Start with tokens and two or three components. Test a theme switch, then grow.

Oops

Using fixed widths and absolute positions inside components.

Do this instead

Use auto layout with padding and gap variables, so components behave like flexible code.

Your mission

A mini system in one evening

~45 min

Quick check

Why build variables before components?

Go deeper

1Build a small but complete design system: tokens, 8-10 components, and clear documentation.
2Test your system by designing a new screen entirely from its existing components.
3Learn to resist adding a one-off component when an existing one could be extended instead.