Qué son los design tokens

Los tokens de diseño son variables con nombre que almacenan decisiones de diseño —colores, espaciado, tipografía y sombras— en un formato independiente de la tecnología. Conectan las herramientas de diseño con el código y garantizan la coherencia entre plataformas.

Sin tokens, los valores se duplican en las bases de código de CSS, iOS y Android. Una única fuente de verdad para los tokens permite que un cambio en el color de marca actualice todas las plataformas simultáneamente.

Categorías habituales: color (de marca, semántico y neutro), tipografía (font-family, tamaño, peso y line-height), espaciado (cuadrícula de 4 px), radio, sombra y animación (duración y easing).

Los tokens se almacenan como JSON, YAML o en el formato de tokens de diseño del W3C. Cada token tiene un nombre, un valor, un tipo y una descripción opcional. Las transformaciones los convierten en salidas específicas para cada plataforma.

Los tokens globales son valores sin procesar: color-blue-500: #3b82f6. Los tokens alias hacen referencia semánticamente a los globales: color-action-primary: {color-blue-500}. Los componentes deben hacer referencia a tokens alias, no a valores sin procesar.

Las propiedades personalizadas de CSS son la salida natural para los tokens web. Un token llamado spacing-4 se convierte en --spacing-4: 1rem y se utiliza en toda la hoja de estilos como margin: var(--spacing-4).

El complemento Figma Tokens y Tokens Studio sincronizan los tokens de diseño entre Figma y los repositorios de código. Diseñadores y desarrolladores comparten el mismo vocabulario de tokens, lo que elimina errores de traducción durante la entrega.

Los tokens evolucionan: retire valores antiguos sin romper a los consumidores proporcionando asignaciones de migración. El versionado semántico de los paquetes de tokens comunica los cambios incompatibles a los equipos consumidores.

El mismo JSON de tokens genera variables CSS para la web, constantes de Swift para iOS y recursos XML para Android. Un único archivo de definición elimina las divergencias entre plataformas en las decisiones de diseño.

Comience con tokens de color y espaciado. Sustituya los valores codificados directamente archivo por archivo. Realice una búsqueda en la base de código de valores hexadecimales sin procesar y literales de píxeles para localizar las decisiones de diseño que aún estén codificadas directamente.

Los tokens alias permiten aplicar temas: cambie el token global al que apunta un alias y cambiará todo el tema sin tocar el código de los componentes. Los temas claro, oscuro y de marca se derivan de la misma capa de alias.

¿Cuál es la diferencia entre un token global y un token alias?

Los tokens de diseño son variables con nombre que codifican decisiones de diseño en un formato independiente de la plataforma. Los tokens globales contienen valores sin procesar; los tokens alias les aportan significado semántico. Juntos permiten crear sistemas de diseño coherentes, fáciles de mantener y multiplataforma.