Design Tokens: qué son, ventajas y cómo diseñarlos e implementarlos

Escrito por Cris Busquets. Publicado en Diseño UI

Design Tokens: qué son, ventajas y cómo empezar

Imagina poder diseñar interfaces y nuevas características para un producto digital de forma eficiente.

Imagina también que puedes hacerlo en plena sintonía con el equipo de desarrollo y a la vez, reduciendo la cantidad de decisiones que debes tomar, diseñando así más rápido.

No está tan lejos de lo que parece: solo debes considerar los Design Tokens.
Te explico para qué sirven, qué son y sus ventajas. Y al final, algo muy pro 😉

He escuchado “Design Tokens” mil veces…

Si observas la página web que acabas de diseñar o alguna de las aplicaciones que utilizas a diario verás rápidamente que algunas partes tienen cierta consistencia: el color de fondo, los tamaños de la tipografía, espaciados entre elementos, los botones, la paleta cromática…

Todo esto son decisiones que se han tomado en un momento dado.

Y son decisiones que pueden cambiar: ya sea porque el diseño ha evolucionado entre diseño y producción, porque hay un rebranding, se lanza una campaña publicitaria o, algo rarísimo en diseño, alguien cambia de opinión de repente (seguro que estoy último no te ha pasado…).

Adaptar estos cambios de nuevo y sincronizar diseño y desarrollo puede ser un un caos absoluto. Es justo aquí donde entran los Design Tokens (por si tienes curiosidad, el concepto surgió en Salesforce de la mano de Jina Anne).

¿Qué sería un “Design Token”?

Pues en corto y sin pretender hacer una lista exhaustiva: tamaños de tipografías, estilos, altos de línea, estilos de bordes, sombras, radios de bordes, colores planos, degradados, opacidades, media queries, iconos… todo esto son Design Tokens.

Ejemplo de Design Tokens

Los Design Tokens están muy muy (muy) ligados a Atomic Design (escribí sobre ello aquí, por si quieres leerlo).

No lo tomes como un conjunto de elementos que se convierten en variables de código.

Utilizar Design Tokens forma parte de una metodología que es completamente agnóstica: no importa con qué lenguaje se programe. Se almacenan en un JSON o YAML y puede utilizarse en cualquier proyecto.

Ventajas de utilizar Design Tokens

Hasta aquí te podría parecer que las ventajas son solo para desarrollo (por lo que te decía antes de que es una metodología agnóstica), pero nada más alejado de la realidad.

No son todas las ventajas, pero estas son las principales que estamos viendo en Holaluz.

Consistencia

Si diseñas un producto digital y solo estás tú de diseñador/a en el equipo es fácil ser consistente.

El tema es que habitualmente hay un histórico de diseño (Design Debt), vari@s personas diseñando (algunas de ellas quizás ya no están en el equipo) y varios proyectos que en producción tienen versiones distintas. Creo que te sonará.

Si el equipo utiliza Design Tokens evitará, por ejemplo, el clásico momento de tener “tres tonos de azul que se parecen pero en realidad no son el mismo… pero casi sí”.

Velocidad… y menos decisiones

Con unos Design Tokens (y el Sistema de Diseño, claro) implementados y consensuados en toda la empresa se incrementará la velocidad de entrega y también te evitará tomar decisiones, optimizando así tu tiempo.

Se acabará invertir minutos (o horas) decidiendo la paleta de colores, tipografías, definiendo espaciados, etc. porque ya estará hecho.

El tiempo restante podrás invertirlo en comprender mejor qué se quiere resolver, los objetivos, a hacer pruebas de usabilidad, sesiones con stakeholders…. <3

Documentación y mantenimiento

Tanto desde el punto de vista de diseño como el de desarrollo, trabajar con Design Tokens facilita el mantenimiento (una librería en Sketch o Figma o un repositorio) y permite documentar de forma fiable qué hay, por qué y cómo funciona.

Aquí tienes algunos ejemplos: Salesforce (el original), Polaris (Shopify) y Gatsby.

Reduce la curva de aprendizaje

Ligado con el punto anterior: cuando entra una persona nueva en el equipo de diseño hay que hacerle el onboarding a “cómo es el diseño en la empresa”.

Con los Design Tokens comprenderá rápidamente cómo se diseña y qué debe utilizar. La curva de aprendizaje para empezar a trabajar y diseñar con el look&feel, filosofía y principios será menos acusada.

¿Pero como empiezo con los Design Tokens?

Estoy bastante convencida de que ahora estarás pensando que esto suena muy bien, pero que cómo lo implementas.

Te pongo el ejemplo de Holaluz. Hasta hace 5 meses trabajábamos con Sketch y con una integración con desarrollo deficiente, que obligaba a retrabajar en algunas ocasiones para poder hacer “cosas sencillas”.

Desde principios de 2020 hemos cambiado a Figma y hemos empezado a rehacer el Sistema de Diseño, empezando por los Design Tokens, claro.

Es un trabajo titánico, pero tod@s tenemos claro que estas horas nos permitirán conseguir una serie de ventajas y optimizará nuestros procesos de trabajo y el tiempo que invertimos en tareas repetitivas.

Para poder lograrlo es esencial que desarrollo, principalmente front-end, vea necesario hacer esta transición. También entra en juego haber cambiado a Figma, que tiene una API que permite hacer magia.

Te dejo con el vídeo de Juan Carlos Ruiz, que explicó en #zapatillasFromMars todo este proceso. Y si puedes, compártelo con tu equipo de front-end 😉


¿Te ha parecido útil? ¡Compártelo! :)


Esto también te interesa 👇

Entrevista a Mina Bach, UX/UI en IBM

Figma Community: el GitHub para l@s diseñador@es

Jerarquía tipográfica: qué es y cómo puedes mejorarla

Deja tu comentario

Tu email no será publicado. Los campos con asterisco son obligatorios.

Únete a 3.225 diseñador@s y recibe los mejores contenidos para crecer.


No te enviaré spam. Recibirás un correo semanal y descuentos promocionales. Podrás darte de baja cuando quieras.