Design Tokens: La Capa Atómica del Sistema

Los design tokens son los valores más básicos y fundamentales de tu sistema de diseño. Son como variables que almacenan decisiones de diseño (colores, tamaños, espaciados) y se pueden compartir entre Figma y código para garantizar consistencia perfecta entre diseño y desarrollo.

Tipos de tokens

Tokens globales (primitivos): valores crudos como Color.Blue.500 = #3B82F6, Font.Size.16 = 16px
Tokens semánticos (alias): significado contextual como Color.Primary = Color.Blue.500, Color.Error = Color.Red.500
Tokens de componente: específicos por componente como Button.Primary.Background = Color.Primary
La cadena: primitivo → semántico → componente permite cambiar un solo valor y afectar todo el sistema
Ejemplo: cambias Color.Blue.500 a #6366F1 y todos los botones primarios se vuelven púrpura automáticamente

Tokens en Figma con Variables

Figma Variables (2024+) es la herramienta nativa para tokens — reemplaza a los estilos para colores y números
Crea colecciones: 'Primitivos' (todos los colores base), 'Semánticos' (significados), 'Componentes' (específicos)
Usa modes para temas: crea un mode 'Light' y otro 'Dark' en la misma colección — cambias con un clic
Las variables se pueden referenciar entre sí: Color.Primary → Color.Blue.500 (alias)
Exporta tokens con plugins como Tokens Studio para sincronizar con el código del equipo de desarrollo

Ejemplo de estructura de tokens

Color: primitivos (slate, blue, red, green × 50-950), semánticos (background, foreground, primary, muted, border, error)
Tipografía: font-family, font-size (xs a 4xl), font-weight (regular, medium, semibold, bold), line-height
Espaciado: scale de 0.5 a 16 en múltiplos de 4px (2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64)
Border radius: none (0), sm (4px), md (8px), lg (12px), xl (16px), full (9999px)
Sombras: sm (cards sutiles), md (cards elevadas), lg (modales y dropdowns), xl (elementos flotantes)

Ejemplo práctico

// Ejemplo de tokens en CSS Custom Properties
:root {
  /* Primitivos */
  --color-blue-500: #3B82F6;
  --color-slate-900: #0F172A;
  --color-slate-50: #F8FAFC;

  /* Semánticos */
  --color-primary: var(--color-blue-500);
  --color-foreground: var(--color-slate-900);
  --color-background: var(--color-slate-50);

  /* Espaciado */
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
}

Consejo: Nombra tus tokens sin incluir el valor visual: usa 'color-primary' en lugar de 'color-blue'. Así puedes cambiar el color primario a púrpura sin renombrar nada.

Práctica: convertir decisiones visuales en tokens

Tomá una interfaz existente y reemplazá valores sueltos por tokens reutilizables. El objetivo no es crear cientos de variables, sino ordenar las decisiones que más se repiten.

Color: primary, surface, text, border, success, warning y danger.
Tipografía: heading, body, caption y button.
Espaciado: 4, 8, 12, 16, 24, 32 y 48.
Radio y sombra: reglas consistentes para cards, botones y modales.

Checklist de tokens

Cada token tiene nombre, valor y uso recomendado.
Los nombres no dependen del color literal cuando cumplen una función.
Hay ejemplos de uso correcto e incorrecto.
El archivo puede traducirse a Figma variables o CSS custom properties.

Design Tokens en Práctica