Design tokens para sistemas sin marca
Vemos el papel de los tokens en los nuevos modelos de reutilización como headless systems y multi-dimensional themes
En estas semanas, se ha comentado la iniciativa del bueno de Brad Frost sobre el planteamiento de un sistema de diseño global. Unas bases de buenas prácticas en componentes y accesibilidad bajo un sistema de diseño.
¿Cuántas horas han podido dedicar diseñadores de todo el mundo a crear un botón similar para sus productos? Seguramente más de las que nos gustaría, para en muchos casos llegar a conclusiones similares.
Hoy comentamos el papel que juegan los design tokens en esta visión de reutilización de elementos de la interfaz.
Sistemas “sin cabeza”
Quizás lo hayáis escuchado como headless design systems en inglés, que es un término que viene rondando en el mundo de los sistemas de diseño desde hace un tiempo.
Se basan en separar el sistema de diseño de la interfaz del producto, crear un conjunto de componentes, design tokens y reglas que no sólo apliquen a una marca, sino a cualquiera.
Raúl Marín tiene un video en su canal de youtube donde lo explica genial , muy recomendable.
Beneficios del sistema “sin cabeza”
Los beneficios de plantear un sistema con este modelo vienen cuando es usado por varias marcas, ya que simplemente cambiando los estilos como colores, tipografías, etc. podremos crear una interfaz para cualquiera.
Por ejemplo un componente como un botón, podremos reutilizar su código y sus reglas y cambiar sus estilos con tokens para que se adecue a los de otra interfaz:
La base de esto es la tokenización de los estilos de la interfaz, que nos permitirán hacer el cambio de temas cambiando los valores.
Al igual que comentábamos en otro post, cambiando las referencias de los tokens podemos conseguir un modo oscuro, pero también podremos usar esto para cambiar la interfaz a otra marca.
En esto se basan las librerías de componentes como Tailwind, Radix, Chakra, etc. que nos dan un sistema “sin cabeza” ya construido, en el que luego podremos cambiar los estilos. Son muy buena opción para escalar productos rápidos en primeras etapas de una startup, ya que el ahorro de desarrollo de la interfaz, incluso de diseño, será muy grande.
De hecho, el equipo detrás de Tailwind tiene una librería llamada headless UI que básicamente pone en práctica este concepto y le da ese nombre.
Temas multi-dimensionales
Para una empresa con varios productos puede ser muy interesante este concepto. Reutilizar las soluciones de la interfaz en diferentes marcas a través de un único sistema de diseño, que simplemente cambia de estilos, puede suponer un ahorro de tiempo y dinero diferencial.
Aquí el equipo de Token Studio plantea el término de los temas multi-dimensionales.
Básicamente hacen referencia a cómo nuestro sistema no sólo tendrá que estar preparado para cambiar entre diferentes estilos de marcas, sino que cada marca puede tener un abanico de modos como el oscuro, de alto contraste, idiomas…
Imagen de la documentación de token studio sobre temas
Para conseguir esto, la arquitectura de nuestro sistema debe ser lo suficientemente agnóstica para que pueda amoldarse a todos estos cambios. Un sistema de diseño “sin cabeza” debe solucionar todos los problemas de la interfaz, pero su principal benefico es que esas soluciones tienen que ser extrapolables a otros productos.
Si añadimos soluciones específicas y creamos un sistema que sólo es válido para una interfaz, será difícil adaptarlo para otras marcas.
En siguientes posts desarrollaremos en detalle cómo plantear este modelo y la arquitectura de tokens que necesitaremos.
¡Suscríbete para no perderte nada!
súper! Me gustaría ver un ejemplo de cómo hacer un sistema headless para un DS multimarca, desde como gestionar las librerías de componentes, variables y marcas. Gracias!