Estandarización y nomenclatura de tokens
La semana pasada hablábamos de los diccionarios de tokens y de cómo utilizábamos un formato estándar (JSON) para representarlos. Además, introdujimos la herramienta Style Dictionary, que actúa como un traductor de formatos.
Sin embargo, aunque usar un formato estándar para guardar nuestros tokens es útil, lo interesante es hacer que esa representación sea lo más homogénea posible.
El problema es que, aunque se ha llegado a un consenso sobre el formato de los archivos de tokens, todavía no tenemos un estándar que defina cómo debemos organizar y almacenar los tokens.
Es por eso que en julio de 2023, se publicó el borrador de un informe generado por un grupo de trabajo en la W3C que pretende definir el formato estándar para representar los tokens de diseño.
Consecuencias de la falta de estándares
En un flujo normal, las diseñadoras generan tokens mediante programas como Figma, que luego son interpretados por traductores como Style Dictionary para generar consumibles específicos de cada plataforma.
Si cada herramienta espera un formato específico para los tokens, surgirán problemas para implementar herramientas universales y reutilizables.
Por ejemplo, la semana pasada mencionábamos CTI, una nomenclatura que Style Dictionary utiliza para organizar nuestros tokens. Sin embargo, si Figma no genera los archivos JSON siguiendo este formato, la transformación de los tokens no será sencilla.
En resumen, sin guías oficiales, se aplica siempre el segundo principio de la termodinámica:
A falta de reglas todo tiende a la entropía
Estándar de Design Tokens
Como mencionábamos antes, en julio del año pasado, 2023, se publicó el borrador de un informe generado por un grupo de trabajo en la W3C. La W3C, o World Wide Web Consortium, es una organización internacional que desarrolla estándares para asegurar el crecimiento y la interoperabilidad de la World Wide Web. Fundada en 1994 por Tim Berners-Lee, trabaja con diversos sectores para desarrollar estándares web abiertos.
Aunque el proceso de aprobación de propuestas es largo, hoy podemos acceder a su contenido y tener una idea de su aspecto futuro.
Qué pasa con las herramientas actuales
Si exploramos esta especificación, notaremos diferencias en cómo se esperan los tokens comparado con herramientas como Style Dictionary.
Style Dictionary usa la nomenclatura CTI para organizar los design tokens, mientras que la especificación de tokens de la W3C emplea una propiedad especial llamada $type para definir de manera más explícita la categoría a la que pertenece un token.
Arriba se destacan las diferencias en la organización de tokens. Esto significa que al intentar integrar Style Dictionary con un archivo de tokens que siga la nueva especificación, surgirán problemas para filtrar y transformar los tokens, dado que está diseñado para trabajar con la nomenclatura CTI.
No obstante y gracias a la flexibilidad de Style Dictionary, es posible adaptarlo.
En las próximas semanas, aprenderemos cómo acomodar las herramientas actuales a la nueva especificación.
Definiendo la taxonomía
Crear una nomenclatura que ordene, categorice, sea fácil de interpretar y escalable para los design tokens de nuestra interfaz no será sencillo.
Tendremos que tener en cuenta temas como las herramientas con las que transformamos estos design tokens y que sean válidos para los distintos consumidores.
Category, Type, Item (CTI), de StyleDictionary
Como comentábamos más arriba, seguir esta estructura será la forma más sencilla de asegurar una correcta transformación de nuestros design tokens.
Naming design tokens, de Nathan Curtis
Nathan hace un análisis más profundo de cómo podríamos crear esta taxonomía con diferentes casos de interfaces. Es el artículo de referencia para la creación de design tokens y en el que nos basamos en su día para crear los design tokens de Bnext.
Naming conventions, de Lightning Design System
Otras empresas definen sus propias taxonomías, muy parecidas a los ejemplos anteriores, pero con ciertas particularidades. Este ejemplo del sistema de diseño de Salesforce explica muy bien cómo lo desarrollan en su caso.