Figma Design System Setup cheat sheet

The order matters more than the tooling. Each step depends on the one before, and skipping ahead to components is why most libraries get rebuilt.

1

Foundations first. Decide colour, spacing, type, radius and elevation before any component.

2

Raw values as primitive variables. One collection for the palette and the scales. Nothing in a design should point at these directly.

3

Semantic variables that alias them. Name by role: background, text, border, action. These are what designs use.

4

Modes for contexts. Light and dark, density, or brand: each a mode of the semantic collection.

5

Styles for what variables cannot hold. Gradients, effects and type styles that combine properties.

6

Components, smallest first. Build with auto layout and variables so they resize and re-theme.

7

Properties before variants. Use boolean, text and instance-swap properties for options; variants for real differences in state or size.

8

Publish as a library. One file as the source. Libraries need a paid plan.

9

Name for the people using it. Names a newcomer could search for. Match the names in code.

10

Document when to use each. A component nobody knows when to use gets rebuilt.

Senior designer note“A design system is finished when someone new can use it without asking you.”