Una introducción sencilla a los Design Tokens

Si alguna vez has actualizado un color de marca y has pasado la hora siguiente buscando cada #3B82F6 hardcodeado disperso por tu hoja de estilos, ya entiendes el problema que resuelven los design tokens. Este artículo explica qué son los design tokens, en qué se diferencian de las variables CSS comunes y cómo empezar a utilizarlos en tu flujo de trabajo de estilado frontend.

¿Qué son los Design Tokens?

Los design tokens son valores nombrados y reutilizables que representan tus decisiones de diseño: cosas como colores, espaciado, tipografía, radios de borde y sombras. En lugar de escribir padding: 16px directamente en un componente, referencias un token como space-4 que contiene ese valor.

En esencia, cada design token es simplemente un nombre emparejado con un valor. Pero como metodología, van más allá. El Design Tokens Community Group (DTCG), un W3C Community Group que trabaja en una especificación compartida, los describe como una manera de expresar decisiones de diseño en un formato agnóstico de plataforma, de modo que puedan compartirse entre distintas disciplinas, herramientas y tecnologías.

Esa parte de “agnóstico de plataforma” es importante. Las mismas definiciones de tokens pueden transformarse en custom properties de CSS para la web, constantes Swift para iOS o valores XML para Android, todo desde una única fuente de verdad.

Categorías comunes de Design Tokens

La mayoría de los sistemas de diseño organizan los tokens en estas categorías:

• Color — paleta de marca, colores de texto, fondos, bordes
• Espaciado — valores de padding, margin y gap
• Tipografía — familia de fuente, tamaño, peso, altura de línea
• Border radius — redondeo de esquinas para componentes
• Sombras — efectos de elevación y profundidad

Tokens primitivos vs. tokens semánticos

Esta distinción es uno de los conceptos más útiles al trabajar con tokens de un sistema de diseño.

Los tokens primitivos (también llamados base o globales) son valores en bruto sin uso implícito:

{
  "color-blue-500": { "$value": "#3B82F6", "$type": "color" },
  "space-4": { "$value": "16px", "$type": "dimension" }
}

Los tokens semánticos referencian a los primitivos y añaden intención. Te indican dónde usar un valor, no solo qué es:

{
  "color-action-primary": { "$value": "{color-blue-500}", "$type": "color" },
  "spacing-component-padding": { "$value": "{space-4}", "$type": "dimension" }
}

Cuando cambias color-blue-500, cada token semántico que apunta a él se actualiza automáticamente. Ese es el verdadero poder del sistema.

Design Tokens vs. variables CSS

Las variables CSS y los design tokens están relacionados, pero no son lo mismo.

Los design tokens son la fuente. Las variables CSS son a menudo la salida. Una herramienta como Style Dictionary toma tus definiciones de tokens y las transforma en el formato que cada plataforma necesita.

Un ejemplo práctico sencillo

Aquí tienes un pequeño conjunto de tokens definidos usando la sintaxis estilo DTCG:

{
  "color-blue-500": { "$value": "#3B82F6", "$type": "color" },
  "color-text-primary": { "$value": "{color-blue-500}", "$type": "color" },
  "space-4": { "$value": "16px", "$type": "dimension" }
}

Después de procesarlos con Style Dictionary, tu salida CSS se ve así:

:root {
  --color-blue-500: #3B82F6;
  --color-text-primary: var(--color-blue-500);
  --space-4: 16px;
}

Ahora tus componentes utilizan var(--color-text-primary) en lugar de un valor hexadecimal hardcodeado. Cambia el token una vez y se actualiza en todas partes.

En el lado del diseño, las variables de Figma siguen el mismo patrón primitivo-a-semántico, lo que facilita mantener alineados el diseño y el código.

Empieza en pequeño, escala con intención

No necesitas un sistema completo de tokens desde el primer día. Empieza con primitivos de color y espaciado, añade una capa semántica a medida que emerjan patrones e introduce tooling cuando el proceso manual se convierta en un cuello de botella.

Conclusión

Los design tokens no son solo una manera de organizar el CSS: son un lenguaje compartido entre diseñadores y desarrolladores. Una vez que ese lenguaje está en su sitio, la consistencia en tu producto deja de ser algo que aplicas manualmente y pasa a ser algo que tu sistema gestiona por ti.

Preguntas frecuentes

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..