Tokenización

En el corazón de Plural DS está su modelo de colaboración entre diseño y desarrollo. Técnicamente usamos los Design Tokens como única fuente de la verdad para que esa colaboración sea real.

¿Qué son los Tokens?

Los “Design Tokens” son enunciados que pueden representar todos los atributos individuales de una interfaz, como color, tipografía, espaciado, animación, puntos de corte, etc.

Existe un problema de base en el desarrollo de productos digitales. Diseño no trabaja con el producto real, trabaja con una representación del producto real. Las herramientas de diseño no trabajan con valores ya existentes en producción y esto crea desajustes entre diseño e integración. Para solucionar este problema podemos utilizar “Design Tokens”.

Cada token representa una decisión de diseño única, como el valor de un color o tamaño de fuente. Se utilizan en lugar de valores codificados de forma rígida para hacer que los sistemas sean escalables y coherentes.

Estos “Design Tokens” pueden ser integrados tanto por diseño como desarrollo, por lo que los dos equipos trabajarán con los mismos elementos de construcción. Se trata de construir un lenguaje común compartido entre diseño y desarrollo.

⁠

Imagen de la anatomía de un componente construido con y sin tokens.

⁠

¿Cómo se consumen?

Los valores almacenados en “Design Tokens” son datos estructurados que pueden ser transformados en ficheros consumibles directos para los equipos de diseño y desarrollo.

Mediante un transformador, al que denominamos “Token Engine”, generamos ficheros para múltiples plataformas:

XML

Less

CSS

Sass

Swift

Sketch

Figma

Una vez distribuidos estos ficheros a los equipos, los valores son integrados en los componentes.

Ahora podemos liberar nuevos valores de diseño por razones de accesibilidad, bugs, rediseños, etc. Estas mejoras llegan directamente a los componentes sin la intervención de desarrollo.

Diseño puede generar automáticamente librerías sincronizadas con los mismos valores que existen en producción sin esfuerzo ni errores.

⁠

Imagen mostrando el proceso de transformar tokens a CSS con Style Dictionary.

⁠

Organización

Trabajar con “Design Tokens” nos permite trabajar en diferentes niveles. Estos niveles nos dan flexibilidad y nos podemos ajustar a contextos genéricos o específicos.

⁠

Opciones⁠

(nivel 1): Representan decisiones de diseño básicas como el color, la tipografía, el tamaño y la animación.

No están vinculados a un caso de uso específico. Resulta fácil para los diseñadores entender la relación entre un componente y sus tokens a primera vista.

⁠

Decisiones⁠

(nivel 2): Son específicos de la aplicación y ayudan a comunicar el uso previsto del token.

Por ejemplo, el color-blue no dice mucho sobre cómo o cuándo debe usarse el color. Pero el uso de color-interactive tiene sentido para los enlaces o una llamada a la acción.

⁠

Componentes⁠

(nivel 3): Representan las propiedades asociadas a un componente. Son independientes. Si cambia el valor del token, no afectará a nada fuera de ese componente concreto.

⁠