Qué son los tokens de diseño y por qué importan

Los tokens de diseño son las decisiones atómicas de un sistema de diseño expresadas como valores con nombre y reutilizables. En lugar de escribir directamente #3b82f6 en una hoja de estilos, define color-primary-500: #3b82f6 y hace referencia a ese nombre en todas partes. El nombre transmite significado; el valor puede cambiar sin actualizar cada referencia.

Los tokens abarcan todas las propiedades visuales: tokens de color (color-primary-500: #3b82f6), tokens de espaciado (spacing-4: 16px), tokens tipográficos (font-size-lg: 18px, font-weight-bold: 700), tokens de radio de borde (radius-md: 8px), tokens de sombra y tokens de duración de animación. Juntos codifican el lenguaje visual completo.

Los tokens crean una única fuente de verdad compartida entre diseño e ingeniería. Los diseñadores definen los valores en Figma y los ingenieros los consumen en el código. Cuando cambia el color de la marca, basta con actualizar un único valor de token y cada componente que usa ese token refleja automáticamente el cambio; no es necesario buscar y reemplazar en miles de archivos.

Sin tokens, los valores de color y espaciado están escritos directamente en las hojas de estilos, los archivos de componentes y las clases de utilidad. Un color azul puede aparecer como #3b82f6, rgb(59, 130, 246) y blue-500 en distintos archivos. Cambiar el color de marca requiere buscar y reemplazar cada instancia, con un alto riesgo de no detectar alguna.

Los tokens de diseño son la base de los sistemas con múltiples temas. En el modo oscuro, los tokens semánticos como color-background y color-text apuntan a distintos valores primitivos según el tema activo. Se cambia una asignación, no cada componente. Los temas claro y oscuro comparten el código de los componentes y solo se diferencian en los valores de los tokens.

En una plataforma SaaS que presta servicio a varias marcas, los tokens permiten personalizar cada marca sin duplicar código. La marca A usa el azul como color principal y la marca B usa el verde; solo se diferencian sus asignaciones de tokens semánticos. El código del componente de botón es idéntico: lee color-action-primary, que se resuelve en un color diferente para cada marca.

Los tokens se organizan en niveles. Los tokens primitivos son valores sin procesar: color-blue-500: #3b82f6. Los tokens semánticos expresan significado: color-action-primary: {color-blue-500}. Los tokens de componente son los más específicos: button-primary-background: {color-action-primary}. Esta jerarquía separa el «qué» del «dónde se utiliza».

Los tokens semánticos son la clave para admitir múltiples temas. En el tema claro, color-background: {color-white}. En el tema oscuro, color-background: {color-gray-900}. Los componentes hacen referencia a color-background, no a un color específico. Al cambiar el tema, se intercambian las asignaciones de los tokens semánticos y los componentes no necesitan modificaciones.

Figma Variables (presentadas en 2023) son tokens de diseño dentro de Figma. Los diseñadores definen en Figma la misma jerarquía de tokens que los ingenieros implementan en el código. Herramientas como Tokens Studio for Figma o el complemento oficial Figma Tokens exportan las variables de Figma a JSON; después, Style Dictionary las compila en variables CSS u objetos JS.

El W3C Design Tokens Community Group está desarrollando un formato JSON estándar para los tokens de diseño. El objetivo es la interoperabilidad: un archivo de tokens que funcione con cualquier herramienta de diseño (Figma, Sketch) y cualquier herramienta de compilación (Style Dictionary, Theo, Panda CSS). Adoptar el formato de la especificación prepara su sistema de tokens para el futuro.

Los tokens de diseño requieren tomar decisiones de gobernanza: quién puede añadir tokens nuevos (diseño, ingeniería o ambos equipos), cómo se versionan los tokens, cómo se retiran los tokens obsoletos y cómo se comunican los cambios a los equipos que los consumen. Sin gobernanza, los sistemas de tokens se desvían de su propósito: aparecen nuevos valores escritos directamente junto al sistema de tokens.

En la jerarquía de niveles de los tokens de diseño, ¿qué representan los tokens semánticos?

Los tokens de diseño son valores atómicos con nombre (colores, espaciado y tipografía) que forman el vocabulario de un sistema de diseño. Crean una única fuente de verdad entre el diseño y el código. La jerarquía de tres niveles —primitivo (valores sin procesar), semántico (significado) y de componente (uso específico)— permite admitir múltiples temas y marcas. Figma Variables y la especificación W3C Design Tokens impulsan la sincronización entre diseño e ingeniería. La gobernanza de tokens garantiza que el sistema mantenga su coherencia con el tiempo.