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. Al tener tanto peso en nuestro modelo hemos decidido incorporar alguna explicación sobre qué son los Design Tokens, sus modelos de aplicación y nuestra visión sobre los mismos.
¿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 en 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.
¿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.
Organización, niveles y tokens
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.
Última actualización
