The Complete Guide to Design Tokens

Design tokens are the named, versioned values that represent every visual decision in a design system. A color, a spacing unit, a border radius, a shadow, a font size: each of these is a decision, and design tokens give those decisions names and structure that can be shared across design tools and codebases.

Why Tokens Matter

The value of design tokens is not just consistency, though that is important. The deeper value is that tokens create a single source of truth for visual decisions that can be consumed by Figma, iOS, Android, and web applications from the same location. When a brand color changes, the change is made in one place and propagates everywhere the token is used, without manual updates in each consuming codebase.

The Three-Layer Model

The most durable token architectures use three layers of abstraction. The first layer is primitive tokens, which are the raw values: specific hex codes, pixel values, and font family names. The second layer is semantic tokens, which assign meaningful names to primitive values: color-primary, spacing-component-padding, typography-heading-size. The third layer is component tokens, which map semantic values to specific component contexts: button-background, card-padding, input-border-radius.

DTCG and Interoperability

The W3C Design Token Community Group has published a specification that defines a standard format for design tokens. Adopting this standard means that tokens can move freely between Figma, Tokens Studio, Style Dictionary, and any other tool that implements the specification. This interoperability was not possible before the specification existed, and it represents the most significant advancement in design token tooling in the past several years.