Building a Design System from Scratch in Figma + React

Why most design systems fail

They're either too abstract (tokens with no components) or too rigid (pre-built components with no flexibility). The sweet spot is a layered system: tokens, primitives, components, patterns.

Layer 1: Design tokens

Colors, spacing, typography, radii, shadows — defined as named variables in Figma and mirrored in code via CSS custom properties.

Layer 2: Primitive components

Headless or minimally styled components: Button, Input, Select, Dialog, Tooltip. We use Radix UI as the interaction foundation.

Layer 3: Composed components

Cards, forms, navigation patterns, data tables — built from primitives and tokens.

Layer 4: Page patterns

Full section patterns teams can assemble pages from. This is where real design velocity comes from.