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 😉

Has 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 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é es un “Design Token”?

Los Design Tokens son las características de los elementos de la interfaz, como el color, la tipografía, el espaciado, las sombras… que se utilizan en todo un producto y que pueden convertirse a cualquier formato necesario, ya sea web, móvil o aplicaciones. Son los bloques de construcción que permiten construir átomos, la unidad más pequeña que se explica en Atomic Design (puedes pensar en ellos como «subátomos» que permite diseñar el resto de elementos).

Tomando como ejemplo un botón, este elemento suele tener varias partes, y cada una de ellas es un tokens.

Un átomo y sus design tokens

El botón es el átomo. El margen, la tipografía (peso, família…), colores, radio, borde, padding… son las decisiones que definen este elemento.

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 emplearse 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:

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), varias 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 (u horas) decidiendo la paleta de colores y las tipografías, definiendo los 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, 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 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 😉



Esto también te interesa 👇

Buenas prácticas UX: Selectores de idioma, ubicación y moneda

Cómo diseñar un selector de idioma, ubicación y moneda: ejemplos y buenas prácticas

Qué es Crazy 8's y cómo generar ideas

Guía completa de Crazy 8’s: qué es y cómo hacer el ejercicio

7 trucos y atajos de Figma que debes conocer

7 trucos y atajos de Figma que me gustaría haber conocido antes


Deja tu opinión

  1. River

    Charla súper enriquecedora! Juan Carlos brillante, se nota la experiencia. Estaremos atentos para la siguiente:)

  2. Diego

    Me gustaría tener la ptt, podría ser?

    1. Cris Busquets

      Están enlazadas en la descripción del vídeo en YouTube 🙂
      https://www.youtube.com/watch?v=WXoeJlmCXQY&feature=emb_title

  3. Excelente charla, estoy aprendiendo muchisiimo con todas tus articulos!

  4. Carolina

    Wow, muy útil.

Deja tu comentario

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