Cómo implementamos Design Tokens en Bnext

Uno de los temas más comentados sobre Sistemas de Diseño son los famosos Design Tokens pero, ¿para qué sirven exactamente? En el equipo de Bnext estamos trabajando con ellos y los hemos aplicado en nuestros productos y elementos gráficos, os explicamos cómo y qué ventajas estamos teniendo con ellos.

¿Qué son los Design Tokens?

En desarrollo, estos elementos los trasladamos a tokens, que serán variables de desarrollo que se esparcirán en el producto, en nuestro caso las apps de iOS, Android, web, etc. con una estructura fácil de usar y entender.

Para más información, este concepto fue introducido por el equipo de Salesforce en 2014, podéis ver el artículo Living Design System donde lo explican en más detalle.

¿Cómo surge nuestra necesidad de plantearlos?

Esto nos llevó a replantear desde cero toda la estructura de colores, escala tipográfica, componentes y pantallas, entre otros. El momento perfecto para definir un buen planteamiento de estos Design Tokens.

Muestra de colores de texto antes del rediseño🥲

En el momento de auditar los colores, encontramos el conflicto: Cómo no tener una estructura definida podía llevarnos a tener una paleta inmensa… ¡sólo para colores de texto!

Esto nos empezaba a suponer problemas. Por ejemplo, al aplicar una nueva paleta de colores de marca, iba a ser una auténtica búsqueda del tesoro.

Aquí empezamos a darnos cuenta de la importancia de definir bien estos parámetros, a través de los Design Tokens, permitiéndonos estructurar bien elementos como los colores, entre otros. Debían asegurarnos una buena estructura escalable y que cumpliesen nuestras necesidades, a medida que el producto sigue evolucionando.

Arquitectura y nomenclatura de Design Tokens

Para organizar y estructurar estos atributos de una forma consistente, definimos una nomenclatura para las necesidades de Bnext:

Categorías

  • Color
  • Font
  • Spacing
  • Stroke
  • Border-radius
  • Drop-shadow
  • Aspect ratio

Estas categorías podrán aumentar a medida que definamos nuevos valores parametizables como, por ejemplo Time, para recoger todos los valores comunes entre animaciones o microinteracciones.

Definición

Para explicaros esto con ejemplos más concretos, vamos a centrarnos en el color:

Una escala de colores Global la asociamos a todas aquellas opciones que tenemos disponibles, por ejemplo: Primary_100, Primary_200, Primary_300, Primary_400,…

Pero realmente, lo que nos interesa es definir qué colores de esa paleta usamos en los casos Específicos como Backgrounds, Borders, etc.

Contexto

Aquí creamos un abanico de opciones para construir cualquier elemento bajo unas reglas ya pactadas entre todas. Nos permiten ser usados con confianza, ahorrando tiempo en microdecisiones.

Parametrizamos una decisión en base a un Contexto de uso.

De forma colaborativa, serán las Diseñadoras las encargadas de revisar continuamente estos Design Tokens y detectar qué decisiones pueden ser parametrizadas, sin perder de vista la consistencia y escalabilidad.

Variantes

Así, los Design Tokens que generamos, como los de color, serán estos:

Dark Mode

Pruebas de diseño para el nuevo Dashboard de Bnext, con el tema Light y Dark.

Así, podremos implementar esta función para nuestros usuarios, con la posibilidad de cambiar la interfaz a Dark Mode, dependiendo de la configuración del dispositivo, con un intercambio directo de tokens.

Y no sólo el Dark Mode, esta estructura nos permitirá ser usada para cualquier paleta de aplicaciones que queramos incluir para que, en un futuro, podamos añadir otros productos o marcas dentro del mismo Sistema de Diseño de la compañía.

Ventajas entre Diseño y Desarrollo

Los Design Tokens nos permiten tener un lenguaje común, que llevado a la práctica, hace mucho más ágil la forma de construir conjuntamente entre los dos equipos y con menos errores en el proceso.

Antes, podíamos tener varios tipos de colores para lo que realmente necesitábamos que fuese uno único. Además aumentaban a medida que se copiaban y pegaban con la herramienta favorita de las diseñadoras, el cuentagotas.

Ahora, replicamos esa estructura de Design Tokens en nuestra herramienta de diseño Figma, que nos permite plantearlos y consumirlos con una interfaz ya enfocada en su uso.

Creamos unos estilos en las librerías, en nuestro caso las Foundations, que luego podrán ser activadas y usadas en cualquier equipo, proyecto o tarea dentro de Figma.

Ejemplo de cómo construimos los Design Tokens de Color y Font en Figma

Ahora, aplicar estos Design Tokens nos permite entenderlos más allá de desarrollo. Se vuelven especificaciones fáciles de entender para todos.

Ventajas más allá del Producto

El equipo de Gráfico también usa nuestras Foundations, donde recogemos nuestros Design Tokens, para hacer uso de ellos en sus creatividades y mantener la consistencia. De igual forma, ellos generan sus valores específicos que documentan y reutilizan, adaptando esta ventaja a sus necesidades.

Esta estructura no podía haber sido planteada sin la ayuda del equipazo de Mendesaltaren, especialmente a Alvaro Bajo y Miguel, por todo el trabajo que nos ayudaron a desarrollar. A futuro, seguiremos evolucionando nuestros Design Tokens, parametrizando más decisiones de diseño.

Desde el equipo de Bnext Design, esperamos que os haya gustado y que nos contéis qué os parece o cómo los estáis aplicando en vuestros casos.

❤️

@yourbnext product design, copy and graphic design team

@yourbnext product design, copy and graphic design team