Design tokens

Los design tokens son decisiones de diseño con nombre, como colores, espaciados y tipografía, guardadas como datos para que todas las plataformas y aplicaciones usen los mismos valores.

Un design token le pone nombre a una decisión visual. El nombre color.action.primary dice para qué sirve el valor. El valor, un código hexadecimal, se guarda una sola vez en un archivo fuente, normalmente JSON. Un paso de build transforma esa fuente en lo que necesita cada consumidor: CSS custom properties para la web, constantes para plataformas móviles, variables para las herramientas de diseño.

Los tokens se suelen organizar en capas:

• Los tokens base contienen la paleta y las escalas, como blue.600 o space.4.
• Los tokens semánticos describen un propósito y apuntan a un token base, como color.action.primary.
• Los tokens de componente, que algunos sistemas usan, asocian un token semántico con una parte de un componente.

Ejemplo

:root {
  --color-action-primary: #12705f;
  --space-md: 16px;
}

.button-primary {
  background: var(--color-action-primary);
  padding: var(--space-md);
}

Un cambio de marca o un tema oscuro cambia los valores de los tokens. El código de los componentes queda igual.

Confusión frecuente

Se suele equiparar tokens con variables CSS. Una variable CSS es un formato de salida de un token. El token es la decisión con nombre y su lugar en la jerarquía. Un archivo con cientos de variables nombradas según su valor, como --blue-500, usadas directamente en los componentes, entrega poco del beneficio. Un cambio de tema igual obligaría a editar cada componente.

En una plataforma o en una migración, los tokens son la forma más barata de consistencia visual. Las CSS custom properties funcionan en templates AngularJS, en componentes Angular y dentro del Shadow DOM. La aplicación legacy y la nueva pueden verse iguales antes de compartir un solo componente. Más sobre esto en microfrontends.

Términos relacionados

• Sistema de diseño (design system)
• Web components (custom elements)