From Figma to Production

Design Tokens are the smallest particles of a design system (colors, fonts, shadows, animation time), represented as data.

Token Structure Example:

:root {
  /* Core Tokens (brand level) */
  --color-blue-500: #3b82f6;
  
  /* Semantic Tokens (task level) */
  --action-primary-bg: var(--color-blue-500);
  --feedback-error-text: #ef4444;
  
  /* Component Tokens (element level) */
  --button-default-bg: var(--action-primary-bg);
}

Important

This three-level system allows changing main brand color (core token), and this will automatically update all buttons and links on the site, preserving their logic.

Note

Tokens are the bridge between designer and developer. Ideally, they should be named the same in Figma and in CSS.