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.