El valor de los design tokens
El otro día, comentábamos la definición de los design tokens en linkedin. Básicamente, podemos decir que un design token es un valor asociado a un nombre. Ese valor puede ser un color, tipografía, sombra, borde, etc.
Parece sencillo, ¿no?
Referencias como valor
Ese valor puede ser cualquier parte de la interfaz, incluso otro token. Aquí es donde realmente aparece su potencial.
Este concepto de tokens referenciando a otros tokens es el que nos ayudará a controlar la interfaz de forma sencilla.
Desde valores simples podemos generar tokens más específicos que apliquen a puntos de la interfaz muy concretos. Vamos a entenderlo con ejemplos:
En una feria, montarte en el carrusel te costará una ficha que vale 5€.
Esos 5€ y la ficha tienen el mismo valor, que es entrar al carrusel. Para la organización es mucho más sencillo usar estas fichas que compras en la caseta, en vez de pagar justo cuando entras en la atracción. Además, esa ficha puede tener otros beneficios, como usarse también para otras atracciones.
Volviendo a los design tokens, la idea es similar.
Un color negro cálido, podemos llamarlo black.
Para los textos de nuestra interfaz, podemos referenciar a ese token black llamándolo color-text.
Para un botón, podríamos referenciar aún más este color-text y llamarlo color-button-outline-text.
Un valor pasa de ser algo abstracto (un color hexadecimal) a una información muy concreta: un token específico para el texto de un botón contorneado.
Arquitectura en niveles
Estos niveles de tokens nos permitirán hacer cambios de forma mucho más específica.
Por ejemplo, si queremos que ese color negro en el Nivel 1 pase a un tono más frío, cambiaremos el valor hexadecimal del token black, haciendo que cambie en todos los niveles:
Si queremos cambiar el color de los textos, podremos cambiar la referencia en el token de nivel 2. Si en este nivel mapeamos todos los colores de nuestra interfaz, esto nos permitirá hacer cambios globales como el modo oscuro:
El tercer nivel nos ayudará a tener un control al detalle de los elementos, que puede ser útil en sistemas o interfaces muy complejas.
Crear una arquitectura de design tokens será clave para controlar tu interfaz
Referencias
Artículos de cómo algunas empresas ponen estos conceptos en la práctica:
How we built our multi-platform design system at Booking.com
Booking nos cuenta cómo desarrolla su sistema de diseño multi plataforma, con los design tokens como uno de sus pilares. Lo podéis ver desarrollado en su charla de booking en la Config.
Creating a flexible design token taxonomy for Intuit’s Design System
El bueno de Nate Baldwin hace un gran análisis de los retos de crear una arquitectura de tokens multimarca para el sistema de diseño de Intuit.
Can I get an Encore? Spotify’s Design System, Three Years On
El equipo de Spotify hace un wrapped de sus 3 años de uso del sistema de diseño, con algunos aprendizajes sobre sus design tokens.
¡Ya somos más de 100 suscriptores!
Wow, en tan sólo una semana hemos llegado a más de 100 suscriptores. Ni de lejos nos esperábamos tanto interés!!
Sólo os queríamos dar las gracias por todo el apoyo, nos motiva un montón para seguir compartiendo más por aquí 💙
Nos vemos el próximo lunes a las 8 AM, mantente suscrito para recibirlo en tu bandeja de correo.
¡Gracias por leernos!