The Future of Design Systems is Semantic | Figma Blog (opens in new tab)

Design systems are moving from static component libraries toward semantic, reusable values that connect design and code. Figma argues that variables extend design tokens by supporting theming, dynamic prototypes, and platform-agnostic reuse. This shift can make large-scale systems more consistent and easier to maintain.

Variables as the Next Step for Design Systems

• Figma variables store reusable values for design properties and prototyping actions.
• They reduce repetitive work and help teams manage complex design systems.
• Unlike static tokens, variables can change based on context, enabling:
  • Design theming
  • Dynamic prototyping logic
  • Closer alignment between design and code
• Figma introduced variables alongside Dev Mode and other features intended to connect designing and building.

The Design Token Foundation

• Design tokens represent repeatable decisions such as:
  • Colors
  • Typography
  • Sizing
  • Border radii
  • Numbers and strings
• Tokens separate design properties from specific components or implementation details.
• A single token can be updated centrally and propagated throughout one or multiple products.
• This platform-agnostic structure reduces redundancy and helps maintain consistency.
• Salesforce is often credited as an early design-token pioneer, using tokens to apply shared principles across platforms.

Google Maps and Palette Governance

• Google Maps discovered its product used more than 700 colors.
• The team reduced the palette to 25 hues by removing subtle tones and transparency effects.
• Tokens helped document and distribute the smaller palette.
• Centralized values make it easier to prevent a carefully designed system from gradually expanding back into uncontrolled variation.

From Tokens to Semantic Systems

• Tokens codify design decisions, but variables add behavior and flexibility.
• Their reusable, changeable values support broader system-level use cases than fixed tokens alone.
• Figma presents this evolution as part of a larger industry shift toward design systems that express meaning and relationships rather than merely storing visual values.

Teams should treat tokens and variables as shared semantic infrastructure: define reusable values centrally, connect them to implementation, and use contextual variation deliberately for themes and interactive experiences.