Tokens de diseño: Arquitectura CTI, Nomenclatura, Ejemplos para Desarrolladores

Gestión Eficiente de Estilos: Arquitectura y Nomenclatura de Tokens de Diseño con la Metodología CTI

Los tokens de diseño son un elemento fundamental en los sistemas de diseño modernos, asegurando una colaboración fluida entre diseñadores y desarrolladores. Permiten estandarizar atributos visuales del producto como colores, fuentes y espaciado, transformando valores brutos en variables con nombre. Un sistema de tokens bien diseñado acelera significativamente el desarrollo de nuevas interfaces, simplifica la escalabilidad y personalización, y minimiza la deuda técnica al eliminar la necesidad de cambiar manualmente valores de estilo codificados en componentes dispares. En este artículo, profundizaremos en la arquitectura de los tokens de diseño y las particularidades de las convenciones de nomenclatura utilizando la popular metodología CTI, que sustenta muchos sistemas de diseño avanzados.

Abstracción Multinivel de Tokens de Diseño

Para construir un sistema de diseño flexible y escalable, el enfoque de la abstracción de valores es crucial. Los sistemas modernos utilizan un modelo de tres capas (Primitivo → Semántico → Componente), a menudo complementado con una capa cero —datos brutos— para mayor exhaustividad. Este modelo asegura un flujo de datos estructurado, donde los cambios en los niveles inferiores se propagan automáticamente a los superiores, garantizando la coherencia y simplificando las actualizaciones de estilo globales.

0. Valores Brutos: Son datos básicos, sin abstraer, como códigos de color hexadecimales (#0055FF), valores de tamaño en píxeles (16px) o nombres de fuentes específicos ('Inter', sans-serif). Sirven como punto de partida, pero no deben usarse directamente en código o diseños para evitar la deuda técnica.

1. Tokens Primitivos: Este es el primer nivel de abstracción. Los tokens primitivos digitalizan los datos brutos, dándoles nombres significativos pero aún abstractos. Por ejemplo, #0055FF podría convertirse en blue-500. Si una marca decide cambiar el tono de su azul corporativo, basta con actualizar el valor de blue-500 en un solo lugar, y este cambio se aplicará automáticamente a todos los tokens dependientes. Los tokens primitivos suelen describir paletas de colores, escalas de espaciado o tamaños de fuente.

2. Tokens Semánticos: Estos tokens describen el rol o propósito de un recurso dentro de la interfaz, respondiendo a la pregunta '¿Por qué?'. Vinculan los tokens primitivos a contextos de uso específicos. Por ejemplo, blue-500 podría usarse para crear color-bg-primary (el color de fondo principal). Los tokens semánticos desempeñan un papel crucial en la implementación de temas (claro/oscuro) y la adaptación a diferentes modos, ya que el mismo token semántico puede referenciar diferentes primitivos según el tema activo.

3. Tokens de Componente: Este nivel describe la aplicación específica de un estilo dentro de un elemento o componente individual, respondiendo a la pregunta '¿Dónde?'. Los tokens de componente permiten ajustes de estilo granulares para componentes específicos sin afectar a otros elementos que podrían usar los mismos tokens semánticos. Sirven para gestionar excepciones y requisitos específicos de componentes, asegurando al mismo tiempo la herencia de la semántica general. Por ejemplo, color-button-bg-primary-hover podría ser único para un botón, incluso si su token semántico base se utiliza en otro lugar.

La Metodología CTI: Arquitectura de Nomenclatura

CTI (Categoría → Tipo → Ítem) es uno de los modelos de nomenclatura más populares para tokens de diseño, particularmente muy utilizado en conjunto con la herramienta Style Dictionary, que popularizó este enfoque. La idea central detrás de CTI es que el nombre de un token prioriza su propiedad física o categoría en lugar del componente al que pertenece. Esto hace que el sistema sea fácilmente interpretable para compiladores y scripts.

La fórmula de nomenclatura en CTI suele ser así: Categoría-Tipo-Ítem-Subítem-Estado.

Desglosemos cada elemento:

• Categoría: Define la naturaleza física básica del token. Siempre es la primera palabra en el nombre del token e indica el tipo de dato. Ejemplos: color, size, font, spacing, radius.
• Tipo: Describe a qué propiedad de la interfaz de usuario se aplica esta categoría. Ejemplos: background, text, border, icon.
• Ítem: Especifica el elemento de interfaz o componente particular al que se refiere el token. Ejemplos: button, dropdown, container.
• Subítem (Modificador): Añade una aclaración al ítem, indicando su variante o rol. Ejemplos: primary, secondary, success, warning, danger.
• Estado: Describe el estado interactivo de un elemento. Ejemplos: hover, active, disabled, focus.

Por ejemplo, un token para el color de fondo de un botón primario en estado activo se vería así: color-background-button-primary-active.

Ventajas y Desventajas del Enfoque CTI

Como cualquier metodología, CTI tiene sus fortalezas y debilidades, las cuales son importantes considerar al diseñar un sistema de diseño.

Ventajas de CTI:

• Optimización para Compiladores: Dado que la primera palabra de un token siempre indica su categoría (color, size, font), es extremadamente fácil para los scripts de compilación (por ejemplo, Style Dictionary) entender con qué datos están trabajando. Esto simplifica la generación automática de variables CSS, mixins SCSS, archivos Swift y otros formatos a partir de definiciones de tokens JSON, minimizando la necesidad de configuraciones personalizadas.
• Auditoría Eficiente y Cambios Globales: Para un desarrollador frontend que quiera verificar o modificar todo el espaciado en una aplicación, simplemente buscar el prefijo $spacing- o --spacing- es suficiente. Esto proporciona rápidamente una lista completa de todas las variables de espaciado, lo cual es conveniente para auditorías globales o cambios masivos.
• Estandarización: CTI es la arquitectura predeterminada para herramientas como Style Dictionary, lo que la hace bien documentada y comprensible para muchos desarrolladores que han trabajado con sistemas de diseño.

Desventajas de CTI:

• Dispersión de Estilos por Componente: En los frameworks modernos orientados a componentes (React, Vue), un componente, como un botón, es una entidad aislada. Con el enfoque CTI, los estilos para este botón están dispersos por todo el sistema de diseño: el color podría residir en colors.json, el espaciado en spacings.json y los radios en radii.json. Para ensamblar o eliminar un componente, un desarrollador tiene que "saltar" entre diferentes archivos, lo que rompe el contexto y complica el flujo de trabajo.
• Dificultad de Búsqueda y Autocompletado: Para un desarrollador que estiliza un botón, a menudo es más importante encontrar rápidamente todo lo relacionado con button y primary, en lugar de los prefijos color o background. En tokens CTI largos, estas palabras clave aparecen en el medio. El autocompletado en un IDE sugiere inicialmente muchos colores, lo que requiere que el desarrollador escriba una parte significativa del token para llegar al componente deseado.
• Esfuerzo de Refactorización de Componentes: Si la empresa decide renombrar un componente (por ejemplo, de modal a dialog), con el enfoque CTI, un desarrollador frontend tendría que buscar y renombrar tokens en numerosas categorías (colores, sombras, z-index, espaciado). Si el componente tuviera prioridad (dialog-bg-color), bastaría con renombrar una sola carpeta o grupo de tokens.

Tokens Semánticos vs. de Componente: Delimitando Roles

Comprender las distinciones entre tokens semánticos y de componente es clave para construir un sistema de diseño flexible. Aunque sus fórmulas de nomenclatura son similares, sus propósitos difieren fundamentalmente.

Los tokens semánticos responden a la pregunta '¿Por qué?'. Definen el rol o la intención de un estilo. Por ejemplo, color-bg-primary significa "color de fondo principal", independientemente de dónde se utilice. Estos tokens son altamente reutilizables y sirven para asegurar la coherencia general y el soporte de temas. Su fórmula de nomenclatura es: [categoría]-[propiedad]-[rol]-[prominencia]-[estado].

Los tokens de componente responden a la pregunta '¿Dónde?'. Describen estilos específicos de un componente particular. Se utilizan cuando es necesario desviarse de la semántica general o aplicar un estilo único a un elemento específico sin afectar otras partes del sistema. Esencialmente, son excepciones gestionadas. Su fórmula de nomenclatura es: [categoría]-[componente]-[propiedad]-[rol]-[prominencia]-[estado]. Como se puede ver, [componente] simplemente se añade a la cadena.

Regla de Oro: Si un token se reutiliza en diferentes lugares y define un propósito general, es un token semántico. Si un estilo necesita cambiarse solo para un elemento o componente específico, es un token de componente.

Detallando los Elementos de Nomenclatura CTI

Para una comprensión más profunda de la nomenclatura CTI, examinemos cada uno de sus elementos con más detalle y ejemplos:

• Categoría: La carpeta principal o tipo de dato. Esto forma la base para organizar los tokens.

* color – para todos los valores de color.

* spacing – para el espaciado interno y externo.

* radius – para los radios de esquina.

* shadow – para los parámetros de sombra.

* typography – para los estilos de texto (tamaño, peso, altura de línea).

* size – para el ancho/alto del elemento.

* z-index – para gestionar el orden de las capas de los elementos.

* opacity – para los valores de opacidad.

* duration – para las duraciones de animación.

• Propiedad: Aclara a qué parte de la interfaz de usuario se relaciona el token dentro de su categoría.

* bg / surface – para el color de fondo.

* text – para el color del texto.

* border – para el color del borde.

* icon – para el color del icono.

* outline / ring – para los contornos de enfoque.

* overlay – para el color de fondo de los modales.

• Rol (Significado / Propósito): Define la importancia funcional o emocional del token.

* primary / secondary / tertiary – para la indicación de jerarquía.

* brand / accent – para los colores de marca.

* success – para mensajes de éxito (verde).

* warning – para advertencias (amarillo).

* danger / error – para errores (rojo).

* neutral – para elementos neutros (gris).

* inverse – para elementos que invierten el color en fondos oscuros.

* static – para colores que no cambian con los temas (blanco/negro).

• Prominencia (Jerarquía / Intensidad): Describe la intensidad o visibilidad de un elemento.

* default / main / base – un punto de referencia, estado base (a menudo omitido en el nombre).

* muted – menos prominente.

* subtle – muy sutil.

* intense – más pronunciado.

* on-brand – para contenido contrastante sobre un fondo de marca.

• Estado / Modificador / Tamaño: Refinamientos adicionales.

* Estados: hover, active, focus, disabled – para estados interactivos.

* Tamaños: sm, md, lg, xl – para varios tamaños de componentes o elementos.

Regla Importante para el Estado default: Si un token está en su estado base, inactivo, el sufijo -default suele omitirse. Por ejemplo, color-text-primary se refiere implícitamente al estado predeterminado. Otros estados se añaden después del rol, como color-text-primary-hover.

Ejemplos Prácticos de Estructura de Tokens CTI

Para consolidar la comprensión, veamos algunos ejemplos prácticos de construcción de tokens para botones, demostrando la transición de valores brutos a tokens de componente específicos.

Ejemplo 1: Botón accent en Estado default

Supongamos que tenemos un botón primario con un color de acento.

• 0. Valor Bruto: #0055FF (color azul bruto)
• 1. Token Primitivo: blue-500 (abstracción del valor bruto)
• 2. Token Semántico: color-bg-accent (color de fondo de acento primario, referencia a blue-500)
• 3. Token de Componente: color-button-accent-bg (color de fondo del botón de acento, referencia a color-bg-accent)

Aquí, vemos cómo pasamos de un valor general (blue-500) a uno más específico (color-button-accent-bg). Es importante que en el token de componente no escribamos -default, ya que está implícito.

Ejemplo 2: Botón accent en Estado hover

Ahora, consideremos cómo cambia la nomenclatura para el mismo botón al pasar el ratón por encima (hover).

• 0. Valor Bruto: #0044DD (azul más oscuro)
• 1. Token Primitivo: blue-600 (abstracción del azul más oscuro)
• 2. Token Semántico: color-bg-accent-hover (color de fondo de acento al pasar el ratón, referencia a blue-600)
• 3. Token de Componente: color-button-accent-bg-hover (color de fondo del botón de acento al pasar el ratón, referencia a color-bg-accent-hover)

Aquí, el sufijo -hover se añade explícitamente, indicando un estado interactivo. Cada nivel de abstracción hace que el sistema de diseño sea más flexible, permitiendo cambios de tono a nivel primitivo sin renombrar miles de tokens.

Ejemplo 3: Botón secondary en Estado default

Para un botón secundario, se podría usar una paleta diferente, por ejemplo, con transparencia.

• 0. Valor Bruto: #0055FF con 10% de transparencia o rgba(0, 85, 255, 0.1)
• 1. Token Primitivo: blue-transparent-100
• 2. Token Semántico: color-bg-secondary (referencia a blue-transparent-100)
• 3. Token de Componente: color-button-secondary-bg (referencia a color-bg-secondary)

Este enfoque permite un fácil cambio de paleta para diferentes tipos de botones, utilizando una estructura de tokens común.

Ejemplo 4: Texto del Botón secondary en Estado default

Consideremos un token para el texto dentro de un botón secundario.

• 0. Valor Bruto: #0055FF
• 1. Token Primitivo: blue-500
• 2. Token Semántico: color-text-on-brand (color de texto sobre un fondo de marca, referencia a blue-500). Aquí, aparece el modificador on-brand, indicando el contexto de uso.
• 3. Token de Componente: color-button-secondary-text-on-brand (color de texto del botón secundario, referencia a color-text-on-brand)

Como se puede observar, la categoría (color, spacing, typography) siempre va primero, seguida de la propiedad o componente, y luego los modificadores y estados. Este principio de "general a específico" asegura la previsibilidad y la facilidad de navegación dentro del sistema de diseño.

Puntos Clave

• Los tokens de diseño son un elemento clave para crear sistemas de diseño escalables, consistentes y fácilmente mantenibles, previniendo la deuda técnica asociada a la codificación de estilos.
• El modelo de abstracción multinivel (Valores Brutos → Tokens Primitivos → Semánticos → de Componente) proporciona flexibilidad y capacidad de gestión, permitiendo cambios globales desde un único punto.
• La metodología CTI (Categoría → Tipo → Ítem) es un enfoque de nomenclatura popular que es conveniente para el procesamiento automatizado por compiladores, pero puede complicar la búsqueda contextual y la refactorización de estilos de componentes.
• Los tokens semánticos definen el rol y propósito de un estilo, asegurando la reutilización y el soporte de temas, mientras que los tokens de componente sirven para ajustes granulares y la gestión de excepciones dentro de componentes específicos.
• Las reglas claras de nomenclatura que utilizan categorías, propiedades, roles, jerarquías y estados son de vital importancia para mantener el orden y la previsibilidad dentro de un sistema de diseño.

— Editorial Team