Design system tokens
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;
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;
}
¿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.
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
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
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
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
Tags: Design system, UI, UX