Descripción general de los tokens de diseño
¿Qué son los tokens de diseño?
Los tokens de diseño son simplemente decisiones de diseño que se expresan como pares de nombres y valores.
Son todos los valores necesarios para construir y mantener un sistema de diseño (espaciado, color, tipografía, animación, etc.) representados como datos. Se utilizan en lugar de valores codificados de forma rígida para garantizar la flexibilidad y la unidad en todas las experiencias de producto.
Por ejemplo, un botón que usa el token de color jds.color.background.brand será coherente con todos los demás elementos que lo usen o con un token relacionado. Si cambia el tema para usar un color de marca diferente, todos esos elementos se actualizarán automáticamente.
Los tokens de diseño son un lenguaje compartido y una única fuente de información para la tematización, dentro de un sistema de diseño, para diseñadores y desarrolladores.
¿Qué son los temas?
Los tokens de diseño proporcionan una forma flexible de tematizar nuestro sistema de diseño. Un tema es un conjunto de tokens combinados para lograr un aspecto o estilo específicos, a menudo con el propósito de crear una marca.
Se puede crear un nuevo tema o nuevos estilos cambiando solo los valores de un puñado de tokens (de 5 a 10).
¿Por qué son valiosos los tokens de diseño?
Colaboración. Los tokens de diseño permiten a los diseñadores, desarrolladores y equipos multidisciplinarios colaborar, hablar el mismo idioma y mantenerse sincronizados en todas las herramientas e idiomas.
Control. Los tokens de diseño facilitan el cambio de elementos específicos de la interfaz de usuario, como los botones, sin afectar al resto del trabajo de diseño. Con los tokens de diseño, puede cambiar el valor de un token y la actualización se propagará a todas las instancias del sistema.
Uniformidad. Los tokens de diseño ayudan a lograr la paridad entre las fases de diseño y desarrollo. Los diseñadores no tienen que preocuparse por diseñar dos veces. Los desarrolladores no tienen que preocuparse de implementar dos veces.
Cómo leer los nombres de los tokens de diseño
Los nombres de los tokens constan de descriptores que juntos describen cómo usar el token.
- Sistema: Abreviatura de Jutro Design System. Distingue nuestros tokens para evitar conflictos con los tokens existentes de los clientes.
- Categoría: El tipo de atributo de diseño visual, como color, tamaño o elevación.
- Propiedad: Parte de la interfaz de usuario a la que se aplicará el token, como el fondo, el borde o el texto.
- Modificador: Detalles adicionales sobre cómo se utilizará el token, como su función, prominencia o estado de interacción. Algunos tokens no requieren modificador.
Puede haber variaciones en el formato de los nombres de los tokens, según la herramienta y el entorno. Sin embargo, los descriptores de token siempre son los mismos.
En la mayoría de las situaciones, las partes de un nombre de token están separadas por notación de puntos. La notación de puntos nos permite organizar los nombres de los tokens de diseño para facilitar su uso dentro de una estructura de árbol. Esto incluye cuándo se utilizan herramientas de creación, como Tokens Studio para Figma.
Los guiones se utilizan para nombres propios de varias palabras, como componentes, y en las hojas de los árboles cuando no tiene sentido agregar un nuevo nivel de anidación. El proceso de transformación reemplaza todos los puntos por guiones.
Del diseño al código
Los tokens de diseño se crean utilizando notación de puntos (por ejemplo, jds.color.background.brand). Durante el proceso de transformación, estas se convierten en variables CSS (por ejemplo, --JDS-COLOR-BACKGROUND-BRAND) que la aplicación utiliza para renderizar estilos.
Si bien la mayoría de las variables CSS que comienzan con --JDS- se transforman directamente a partir de tokens de diseño, algunas pueden existir en la base del código como variables de “cobertura” o “internas” para fines de desarrollo. Debido a que la presencia de una variable en el inspector del navegador no garantiza un token de diseño coincidente en los archivos de origen, siempre consulte la lista de tokens de diseño como fuente fidedigna para las propiedades que se pueden tematizar.
Cómo encontrar y usar tokens de diseño
Busque un subconjunto de tokens y sus descripciones de uso en la lista de tokens.
Prácticas recomendadas
Elija tokens en función del significado, el contexto y la intención, en lugar de valores específicos.
