Decisiones

Los tokens de Nivel 2 (Decisiones) ayudan a comunicar el uso previsto del valor.

Los tokens de nivel 2

Describimos la interfaz con arreglo a un patrón predecible, por ejemplo la combinación de colores y tipografías para los estados disabled de los componentes es consistente y estable.

Los valores “Design Tokens” con los que describimos toda la interfaz presente y futura es un número acotado de ellos, con una lógica predecible de comportamiento visual y de estados en los componentes.

Con esta predictibilidad ganamos consistencia en la construcción de nuevos componentes. Todos los nuevos componentes estarán dentro de un mismo patrón visual y de interacción.

En desarrollo no existe dependencia de nuevos valores con los nuevos diseños de componentes ya que el patrón y sus valores son siempre son los mismos.

En este nivel podemos intercambiar patrones automáticamente, por ejemplo el cambio de Light a Dark Mode se haría automáticamente sin la intervención de desarrollo. Podemos themificar la interfaz.

⁠

En diseño

Librerías Sketch y Figma abstractas con valores semánticos.

En desarrollo

Con un número limitado de valores podemos describir todos los componentes presentes y futuros.

Beneficio

Ganamos consistencia en el sistema. Liberamos a desarrollo de actualizaciones y cambios de Look & Feel. Si existe un cambio en el mismo, los tokens implementados no varían, simplemente recibirán nuevos valores. Esto supone liberar a desarrollo de tareas de mantenimiento o rediseño.

Esta implementación nos permite hacer componentes que puedan soportar diferentes visualizaciones “Light Mode” y “Dark Mode” con poco o nada de desarrollo. Otra opción es que los componentes sean multi-marca al soportar diferentes visualizaciones.

Contrapartida

Lo valioso es la semántica, ya no miramos color, nos fijamos en su función. Un mismo color puede vivir en Tokens diferentes, esto puede representar un reto para diseño al tener un nivel alto de abstracción.

La implementación de tokens de Nivel 2 (Decisiones) supone una liberación de trabajo muy importante para desarrollo.

Diseño tiene que asumir el reto de trabajar en un nivel superior de abstracción.

⁠

Imagen mostrando los pasos entre niveles de token, transformador en output css y su implementación en desarrollo.

⁠

Plural DS y las decisiones

Plural DS se basa complemente en integraciones de decisiones intercambiables sobre unos mismos componentes. Para más información de nuestro modelo visita

Theming⁠

Los tokens de nivel 2

Plural DS y las decisiones

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.