Design Tokens en Práctica

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.