# Estrategia de Aliasing y Herencia de Tokens

> Aprenda a implementar una estrategia de aliasing y herencia de tokens de diseño para crear sistemas altamente flexibles, mantenibles y preparados para múltiples temas.

*Tags: ux, tecnica, diseño-ui, product-design, desarrollo*

---


> [!info] Definición Rápida
> El **Aliasing** de tokens consiste en definir un token que hace referencia a otro token en lugar de a un valor bruto (como un hexadecimal o píxeles). La **Herencia** es la estructura lógica que permite que las decisiones de diseño fluyan de lo más general a lo más específico, garantizando coherencia y flexibilidad total en el sistema.


## ¿Qué es el Aliasing de Tokens?

Imagina que quieres comprar un coche de "Color Deportivo". 
1.  **Valor Bruto:** `Rojo #FF0000`
2.  **Token Primitivo (Global):** `brand-red` -> `#FF0000`
3.  **Token Semántico (Alias):** `color-background-cta` -> `brand-red`

En este ejemplo, `color-background-cta` es un alias de `brand-red`. Si mañana decides que el color deportivo de tu marca es el Naranja, solo tienes que cambiar la referencia del alias a `brand-orange` y automáticamente todos los botones de llamada a la acción (CTA) de tu producto se actualizarán. Sin aliasing, habrías tenido que buscar manualmente cada instancia del color rojo y cambiarlo.

## La Escalera de Abstracción: Capas de Herencia

Una estrategia robusta de herencia se basa típicamente en tres niveles, donde cada nivel "hereda" del anterior:

### Nivel 1: Tokens Primitivos (Core)
Son la base de la pirámide. Contienen los valores literales (hexadecimal, rem, ms).
- **Nombre:** Descriptivo del valor (ej. `grey-100`, `blue-500`, `space-16`).
- **Uso:** El 99% de las veces **no deben usarse directamente** en los componentes. Su función es alimentar a la siguiente capa.

### Nivel 2: Tokens Semánticos (Theme)
Esta capa añade **significado y propósito**. Es aquí donde reside la verdadera potencia de los sistemas de diseño.
- **Nombre:** Descriptivo de su función (ej. `bg-surface-primary`, `text-color-error`, `action-bg-hover`).
- **Uso:** Estos son los tokens que los diseñadores y desarrolladores deben usar el 90% del tiempo. Permiten cambiar temas (Modo Claro/Oscuro) con un solo clic.

### Nivel 3: Tokens de Componente (Specific)
Es el nivel más granular, reservado para ajustes muy específicos que no deben afectar al resto del sistema.
- **Nombre:** Basado en el componente (ej. `button-primary-bg`, `tab-active-indicator-color`).
- **Uso:** Se usan para casos de borde donde un componente necesita un valor que no encaja con ningún token semántico general.

## Ventajas para el Ciclo de Vida del Producto

- **Mantenimiento Simplificado:** Cambiar la identidad visual de un producto complejo toma minutos o segundos, no semanas de refactorización de código y diseño.
- **Soporte de Temas (Theming):** Facilita enormemente la creación de Modo Oscuro, Modos de Alto Contraste o versiones de Marca Blanca de una misma aplicación.
- **Consistencia Garantizada:** Al centralizar las decisiones en alias, evitas que diferentes partes de la app usen "tonos de rojo" ligeramente distintos por error.
- **Escalabilidad:** Añadir nuevas plataformas o productos a la marca es mucho más sencillo si ya tienes una estructura lógica de tokens.

## Conflictos y Errores Comunes

- **Demasiados Alias:** Crear un alias para cada pixel de la interfaz puede hacer que el sistema sea inmanejable. Busca el equilibrio entre flexibilidad y simplicidad.
- **Aliasing Circular:** Evita que el `token A` apunte al `token B`, que a su vez apunta al `token A`. Esto romperá cualquier motor de transformación de tokens.
- **Nombres No Agnósticos:** No nombres tus alias semánticos por su color actual (ej. `color-action-red`). Si cambias el color, el nombre será confuso. Usa nombres basados en la función (ej. `color-action-danger`).

## Consejos de Mentor

- **Dibuja tu esquema primero:** Antes de empezar a crear tokens en Figma o en código, dibuja en un papel o pizarra blanca cómo se van a relacionar tus capas de alias.
- **Documenta la intención:** En tu manual del sistema de diseño, explica por qué un token apunta a otro. "¿Por qué el background del modal usa `bg-surface-secondary` y no `bg-surface-primary`?".
- **Utiliza herramientas de inspección:** Plugins como *Token Studio* en Figma te permiten ver visualmente la herencia de cada token, lo que facilita enormemente el debugeo del sistema.

## Recursos y Herramientas Útiles

- **Style Dictionary (Amazon):** La herramienta clave para gestionar la herencia de tokens y exportarlos a múltiples plataformas.
- **Plugin Token Studio para Figma:** Permite crear y gestionar alias de forma nativa en tu lienzo de diseño.
- **W3C Design Tokens Community Group:** Para entender hacia dónde se dirige el estándar oficial de tokens y aliasing.
- **Libros:** *Design Systems* de Alla Kholmatova (excelente para entender la semántica del lenguaje visual).


---

Source: https://www.fernandoux.com/es/wiki/tecnicas/aliasing-herencia-tokens/