What is a design system: a beginner's explanation and your first mini system in Figma

Step 1

Understand what a design system is made of

Nielsen Norman Group defines a design system as a complete set of standards intended to manage design at scale using reusable components and patterns. It has two important parts: the design repository and the people who manage it. The repository usually holds three things:

• •a style guide: design principles, visual references and usage rules for color, typography and tone of voice;
• •a component library: individual UI elements such as buttons, fields and checkboxes, each with a name, description, states and code;
• •a pattern library: larger groups of elements and typical layouts, such as a sign-in form, a product card or navigation.

💡 The same authors are honest about the downsides: a system takes a long time to build, needs constant maintenance, and people have to be taught to use it. A big system for a single landing page is wasted effort.

Step 2

Study someone else's system before building yours

The quickest way to understand how a design system works is to open a well-known public system and look at how it describes one component. Good examples are Google's Material Design, IBM's Carbon, the Atlassian design system and the U.S. Web Design System. Pick one and take its button apart:

• •which types and sizes exist and when to use each;
• •which states are described: default, hover, pressed, disabled, focus;
• •what the rules are for button text and what not to do;
• •how accessibility is covered: contrast, target size, keyboard focus.

💡 In Figma you can add ready-made UI kits, such as Google's Material 3 Design Kit or Figma's Simple Design System: Assets tab → Libraries → UI kits → Add to file. Look at how they name components and build variants.

Step 3

Lay the foundation: color, text, spacing

Every system starts with basic decisions that are then repeated in every component. Figma has styles and variables for this. A style stores several properties together: a text style, for example, holds the font, size and line height at once. A variable stores a single value (a color, a number, a string or true/false) and can have several modes, such as light and dark themes (modes are available on paid and Education plans). For a learning system, create:

• •a palette: a primary color, an accent, colors for errors and success, and neutral shades for text and backgrounds;
• •a type scale: two or three heading levels, body text and a small caption, as text styles;
• •a spacing scale, for example 4, 8, 16, 24 and 32 px, as number variables;
• •two levels of color names: raw values (blue-500) and role-based values (text-primary, button-bg) that reference them.

💡 In Figma, one variable referencing another is called aliasing. Change the raw blue and every button and link that references it updates at once. That's how design tokens usually work.

Step 4

Build three to five basic components

Now build components that use your foundation: a button, an input field, a checkbox, a card and a top bar. Build each one with auto layout so it adapts to its text, and use only your own styles and variables, with no hand-picked colors. Make different states variants and small toggles component properties: for example, showing or hiding an icon in a button.

• •name components clearly and consistently, such as Button, Input, Checkbox;
• •create every state you need for each component, including disabled and error;
• •check that the text in your components is readable: Figma has a built-in contrast check in the color picker.

Step 5

Write the rules and test the system on screens

Components without rules aren't a system yet. In Figma you can add a description and a documentation link to each component: write briefly when to use it and when not to. Then build two or three screens of a learning app using only elements from your system. Anything missing is a signal: either add a component or simplify the screen.

• •if you keep detaching a component to change something, the component is too rigid;
• •if two components are nearly identical, they may be one component with variants;
• •write down the decisions you made and why: that's ready-made text for a portfolio case study.

💡 Share the file in the community and ask people to look at something specific: component names, button variants or the spacing scale. A specific question gets a useful answer.