Los tokens de diseño son valores que definen los atributos visuales de los elementos de la interfaz de usuario, como colores, tipografías, espaciados, etc. Organizar y definir tokens de manera efectiva es crucial para mantener la consistencia y escalabilidad de un sistema de diseño.
Los tokens se definen con valores concretos, que pueden ser valores de color (hexadecimal, RGB, etc.), tamaños de fuente, espaciados en píxeles o unidades relativas (em, rem), etc. Es importante utilizar unidades consistentes y valores semánticos que reflejen el significado del token.
Qué son los Tokens en un Design System
Los tokens son como «variables» que almacenan los valores de diseño. En lugar de usar valores fijos (como un código de color hexadecimal), se usan tokens con nombres descriptivos (como «color-primario»). Esto hace que un sistema de diseño sea más flexible, escalable y fácil de mantener.
Los tokens de diseño son representaciones abstractas de valores de diseño, como colores, tipografías, espaciados, sombras y otros atributos visuales. Estos tokens actúan como variables que almacenan y gestionan estos valores, permitiendo una fácil modificación y consistencia en toda la interfaz de usuario.
Beneficios técnicos de los Tokens:
- Abstracción: Los tokens separan los valores de diseño de su implementación, lo que permite cambiar los valores sin afectar el código o las herramientas de diseño.
- Consistencia: Los tokens garantizan que se utilicen los mismos valores en toda la interfaz, lo que crea una experiencia de usuario coherente.
- Escalabilidad: Los tokens facilitan la actualización y modificación de los estilos visuales, ya que solo es necesario cambiar el valor del token en lugar de múltiples instancias.
- Flexibilidad: Los tokens se pueden adaptar a diferentes plataformas y dispositivos, ya que se pueden transformar a diferentes formatos (por ejemplo, de píxeles a unidades relativas).
- Colaboración: Los tokens sirven como un lenguaje común entre diseñadores y desarrolladores, lo que facilita la colaboración y el intercambio de información. Se consigue hablar el mismo “idioma”.
Tipos de Tokens y estructura de nombres por niveles en un sistema de diseño
Existen tokens primitivos y semánticos. Cada uno de estos tipos de tokens tiene funciones muy importantes y únicas en la creación y el mantenimiento de sistemas de diseño. El tipo de token al que más prestamos atención suele ser el de tipo semántico.
La estructura de nombres por niveles de los tokens es una estrategia que permite organizar y gestionar los tokens de diseño de manera eficiente. Esta estructura se basa en la creación de diferentes niveles de tokens, cada uno con un propósito específico.
Tokens primitivos o de valores brutos
En un sistema de diseño, un token primitivo es la unidad más básica e indivisible de un valor de diseño. Estos tokens representan los valores fundamentales que definen un aspecto visual específico, como un color, una tipografía, un tamaño o un espaciado.
Sirven como base para la creación de otros tokens más complejos. Su correcta definición y gestión son esenciales para garantizar la consistencia, flexibilidad y escalabilidad de la interfaz de usuario. Se caracterizan por tener nombres genéricos y abstractos
Convenciones de nomenclatura de Tokens primitivos:
- Valores atómicos: Son los valores más elementales que no se pueden descomponer en unidades más pequeñas. Por ejemplo, un código de color hexadecimal (#007AFF), un nombre de familia de fuentes (Arial), un tamaño de fuente en píxeles (16px) o un valor de espaciado en puntos (8pt).
- Nombres descriptivos: Los nombres de los tokens de nivel 1 deben ser descriptivos y reflejar el valor que representan. Es importante evitar nombres ambiguos o genéricos que no proporcionan suficiente información.
- Formato consistente: Utilizar un formato consistente para nombrar los tokens de nivel 1. Por ejemplo, se puede utilizar un prefijo para indicar el tipo de valor (por ejemplo, «color-«, «tipografia-«, «espaciado-«) seguido de un nombre descriptivo del valor (por ejemplo, «color-azul-500», «tipografia-cuerpo», «espaciado-mediano»).
- Unidades de medida: Incluir la unidad de medida en el nombre del token cuando sea relevante (por ejemplo, «espaciado-16px», «tamaño-24px»).
- Escala de valores: Utilizar una escala de valores para un determinado atributo (por ejemplo, diferentes tonos de un color), incluyéndola en el nombre del token (por ejemplo, «color-azul-100», «color-azul-200», «color-azul-300»).
El nivel 1 de la estructura de nombres por niveles de tokens se centra en las convenciones de nomenclatura para los valores brutos. Estos tokens son la base del sistema de diseño y su correcta nomenclatura es esencial para garantizar la claridad, la consistencia y la escalabilidad del sistema.
Tokens semánticos
En un sistema de diseño, un token semántico es un valor de diseño que tiene un significado específico y un contexto de uso definido. Estos tokens se basan en tokens primitivos (los valores más básicos de diseño) y les añaden información sobre cómo y dónde deben utilizarse.
Los tokens semánticos son una capa más de abstracción en un sistema de diseño. Añaden significado y contexto a los tokens primitivos, lo que facilita la comprensión, el mantenimiento y la evolución del sistema de diseño. Tienen nombres que indican su función y propósito en la interfaz de usuario.
Características de los tokens semánticos:
- Significado contextual: A diferencia de los tokens primitivos, que sólo representan un valor (como un color o un tamaño), los tokens semánticos tienen un nombre que indica su función y propósito. Son claros, descriptivos e indican dónde y cómo se utilizan. Por ejemplo, en lugar de «color-azul-500», un token semántico podría ser «color-fondo-principal» o «color-texto-destacado».
- Relación con tokens primitivos: Los tokens semánticos se definen en función de tokens primitivos. Por ejemplo, «color-fondo-principal» podría tener el valor del token primitivo «color-azul-500».
- Uso específico: Los tokens semánticos se utilizan en contextos específicos de la interfaz de usuario. Por ejemplo, «color-fondo-principal» se utilizará para el fondo de la sección principal de la página, mientras que «color-texto-destacado» se utilizará para resaltar ciertas palabras o frases.
- Categorización: Es importante considerar agrupar los tokens semánticos en categorías lógicas para facilitar su gestión. Por ejemplo, tener categorías como «color-fondo», «color-texto», etc.
El nivel 2 de la estructura de nombres por niveles de tokens se centra en las convenciones de nombres semánticos. Estos tokens añaden contexto y significado a los valores brutos, facilitando la comprensión, el mantenimiento y la evolución del sistema de diseño.
Tokens específicos de componentes y casos especiales
Los tokens de nivel 3, también conocidos como tokens de componentes o tokens de contexto, se centran en casos especiales y específicos de componentes. Estos tokens son los más cercanos a la implementación y se utilizan para definir estilos particulares dentro de componentes específicos.
Características de los tokens específicos de componentes y casos especiales:
- Contexto del componente: Los nombres de los tokens de nivel 3 deben incluir el nombre del componente al que pertenecen. Esto ayuda a evitar conflictos de nombres y facilita la comprensión del contexto de uso del token.
- Estado o variante: Si el token se utiliza para un estado o variante específica del componente, es importante incluirlo en el nombre. Por ejemplo, «boton-primario-hover» o «tarjeta-destacada-sombra».
- Propiedad específica: Si el token se utiliza para una propiedad específica del componente, se requiere incluirla en el nombre. Por ejemplo, «boton-primario-fondo» o «tarjeta-destacada-borde».
- Jerarquía: Considerar utilizar una jerarquía en los nombres de los tokens para indicar la relación entre diferentes tokens del mismo componente. Por ejemplo, «boton-primario-texto-color» o «boton-primario-icono-tamaño».
Recomendaciones adicionales para los 3 niveles
Es importante seguir las siguientes recomendaciones para la correcta implementación y mantenimiento de los tokens en un sistema de diseño.
- Documentar la taxonomía: Asegurarse de que la convención de nomenclatura esté documentada y sea accesible para todos los miembros del equipo.
- Revisar y actualizar: Revisar y actualizar la taxonomía de nombres a medida que evolucionan las necesidades del sistema de diseño.
- Involucrar al equipo: Involucrar a diseñadores y desarrolladores en la creación y revisión de la taxonomía de nombres para asegurar que sea comprensible y útil para todos.
Créditos
Qué son los Design Tokens en los Design System
Carbon Design System
Material Design 3
Spectrum Adobe
Pijamas Design System