Design system tokens

mayo 5, 2021

Como ex-developer y como diseñador que le gusta trabajar rápido: el tema de los tokens y las convenciones de nombre es algo que me interesa un montóns.

Y creo que no exagero cuando digo que los Tokens son la piedra angular de occidente….bueno igual exagero, pero sí son la piedra angular de los design systems.

¿Qué es un token?

El concepto de tokens está basado en las variables, en programación una variable es una forma de almacenar un valor y relacionarlo con un nombre, por lo que los Tokens están también formados por un nombre y un valor.

$primay: yellow;
Un ejemplo de una variable de SCSS donde $primary almacena el valor de color amarillo: yellow

Los tokens o variables pueden ser usados para determinar valores como color, tamaño, nombre de la tipografía y un largo etcétera.

¿Para qué sirven los Tokens?

Cuando trabajas con productos complejos es super recomendable tener una manera de poder modificar muchos componentes al mismo tiempo y establecer patrones que te permita mantener la consistencia entre estos componentes.

Con los Tokens tienes la posibilidad de cambiar rápidamente muchos componentes y mantener su consistencia.

Por ejemplo: Si tienes definidos los border-radius de tus componentes (las esquinas redondeadas) en un solo Token, será super fácil cambiar todos los border radius y mantener la consistencia en tus componentes.

$bradius: 6px;
---------------------------------------------- input { border-radius: $bradius; }
button { border-radius: $bradius; }
textarea { border-radius: $bradius; }
Sustituyendo la variable $bradius cambiaríamos todos los border radius fácilmente

¿Qué nombre le ponemos a los Tokens?

Esta es una pregunta ancestral y millonaria entre los círculos de programadores, y esta es mi opinión por lo que pueden estar en desacuerdo en la sección de comentarios.

La regla de oro es nombrar los Tokens con un nombre que no sea su valor

Lo sé, suena un poco contra-intuitivo pero, si por ejemplo: el color del branding es azul, te recomiendo usar como nombre del token: $branding, porque el color del branding puede cambiar en un futuro y podrás tener un montón de variables que se llamen $azul y ahora representen un color verde.

Por ejemplo si usas un token para medida de 15px no lo llames 15px….ni otro número. Estas cifras suelen cambiar, confía en mí.

Ejemplos de nombre para los Tokens de color

Mi recomendación es separar los colores en tres grandes grupos:

1. Branding colors

Los colores de la marca, la marca puede tener varios colores y gradientes de este color, por lo que podemos tener muchos tokens de branding (Por ejemplo master card, tiene el color naranja y el color azul, puedes tener $brandingPrimary para el naranja y $brandingSecondary para el azul)

2. Base colors

Los colores que generalmente se usa para tipografías, backgrounds, líneas: Negros, grises y blanco.

Usando 10 tonalidades de negro es suficiente (en mi opinión). Empezando por 0 que es poca luz (que sería el color para las fuentes por ejemplo) hasta 10 que es la mayor cantidad de luz (que sería el color para el background por ejemplo).

3. Feedback colors

Los colores para elementos auxiliares como mensajes de error, mensajes de éxito, etc.

Ejemplo

La web de Iberia donde el primary es rojo y todos son felices

Llega el equipo de marketing y nos dice que ahora usaremos negro para la campaña de halloween….no hay problema. Solo tendremos que cambiar el color del Token $primary

Ejemplos de nombre para los Tokens de medidas

La convención son los nombres de tallas. Por ejemplo: XXL, XL, L, M, S, XS, XXS.

Los márgenes entre los distintos elementos deben estar estandarizados en Tokens… es la ley…o te arrestará la policía del UX.

Ejemplo

Ejemplo solo destacando los margin top, la idea es hacer lo mismo con los margin left right, paddings, etc.

Ejemplos de nombre para los Tokens de tipografías

Si estas haciendo una página responsive recomendaría usar las mismas tags que usamos en HTML para nombrar las tipografías h1, h2, h3, p, etc. Esto te permitirá definir diferentes tamaños dependiendo de los breakpoints de tu producto.

Aunque hay personas que usan las tallas para marcar los tamaños de letra, esto te permitirá más flexibilidad al cambiar nombres.

Ejemplo

La versión para desktop
La versión para teléfonos móviles

Este es un artículo más avanzado sobre design systems, pero, también escribí una introducción a los design systems.

Bibliografía:

Foto de portada: Jase Bloor

Etiquetas: , ,

2 comentarios

  • […] Estoy en proceso de crear un artículo más completo centrado en Tokens y cómo nombrarlos. […]

  • […] En este post ahondo más sobre los tokens en el design system y cómo nombrarlos. […]