Qué es un alias

En el módulo 2 creaste los primitivos: los valores que existen en tu sistema. Ahora los vas a relacionar. La herramienta para hacerlo es el alias, un token cuyo valor no es un valor, sino otro token. En esta lección verás cómo se escribe un alias en DTCG, qué reglas sigue y cómo se crea en Figma.

En esta página

• Un token que apunta a otro
• Cómo se escribe en DTCG
• Cadenas y referencias circulares
• Por qué conservar la referencia
• En Figma
• Lo que te llevas

Un token que apunta a otro

El botón principal de DesignToken101 tiene el color de la marca, #33CC99. En la web, ese fondo no se escribe como hex ni como primitivo. Se escribe con un token que dice para qué sirve, color/background/accent/strong/default, y ese token apunta al primitivo color/emerald/500.

La especificación DTCG usa "alias" y "referencia" como sinónimos: un token puede tomar su valor de otro token (Format Module: Aliases / References). Figma también los llama así: aplicar una variable a otra variable es crear un alias, y es lo que permite implementar tokens de diseño (Figma: Overview of variables).

El alias aporta dos cosas:

• Un cambio, un solo lugar. Si varios tokens apuntan a color/emerald/500 y cambias ese primitivo, todos cambian. La ayuda de Figma pone este mismo ejemplo para explicar los alias (Figma: Create and manage variables).
• Una decisión con nombre. color/background/accent/strong/default dice dónde se usa el color. #33CC99 y color/emerald/500 no lo dicen.

Cómo se escribe en DTCG

En un archivo DTCG, un alias es el nombre completo del token de destino entre llaves, con los niveles separados por puntos (Format Module: Curly brace syntax):

{
  "color": {
    "emerald": {
      "500": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.2, 0.8, 0.6],
          "hex": "#33CC99"
        }
      }
    },
    "background": {
      "accent": {
        "strong": {
          "default": {
            "$value": "{color.emerald.500}"
          }
        }
      }
    }
  }
}

Lo que dice la especificación sobre este ejemplo:

• El alias apunta a un token completo. Las llaves llevan al $value de un token, no a un grupo ni a una parte del valor (misma fuente). Para apuntar a una parte, DTCG tiene otra sintaxis, $ref con JSON Pointer (Format Module: JSON Pointer syntax). En este curso no la usamos.
• El alias hereda el tipo. El token semántico no lleva $type: si el valor es una referencia, el tipo es el del token al que apunta (Format Module: Type).
• Los puntos y las llaves están reservados. Un nombre de token o de grupo no puede contener ., { ni }, ni empezar por $, porque son los caracteres de las referencias (Format Module: Character restrictions). Lo retomarás en el módulo Nombrar (Un nombre en Figma, DTCG y CSS).

En Figma, el mismo token se llama color/background/accent/strong/default. Cada / se convierte en un nivel de grupo al exportar, y en la referencia esos niveles se separan con puntos.

Cadenas y referencias circulares

Un alias puede apuntar a otro alias. La herramienta sigue la cadena hasta encontrar un valor explícito (Format Module: Chained references):

token de componente  →  token semántico  →  primitivo  →  #33CC99

Lo que la especificación prohíbe son las referencias circulares: que a apunte a b y b apunte a a, directamente o a través de otros tokens. Una herramienta tiene que detectarlas e informar del error (Format Module: Circular references).

La especificación no pone límite a la longitud de una cadena. Cada salto, en cambio, es un paso más que hay que seguir para saber de dónde sale un valor.

Por qué conservar la referencia

DTCG pide a las herramientas que conserven las referencias y que las resuelvan solo cuando necesiten el valor. Así, un cambio en el token de destino llega a todos los que apuntan a él (Format Module: Reference resolution).

En CSS se ve la ventaja. La web genera cada alias como una variable que apunta a otra:

--t101-color-emerald-500: #3c9;
--t101-color-background-accent-strong-default: var(--t101-color-emerald-500);

Si el primitivo cambia, el semántico lo sigue sin regenerar nada más. Si la referencia se hubiera perdido por el camino, el CSS diría #3c9 en los dos sitios y habría que cambiarlos uno a uno.

En Figma

Un alias de Figma es una variable cuyo valor es otra variable. Para crearlo (Figma: Create and manage variables):

1. Abre la vista de variables.
2. Haz clic derecho sobre el valor de la variable y elige Create alias.
3. Elige la variable de destino. Puedes buscarla por su nombre.

Para quitar el alias, pasa el cursor por el valor y pulsa Detach alias. La variable recupera un valor propio.

Dos reglas que conviene saber:

• Mismo tipo. Una variable puede apuntar únicamente a otra del mismo tipo: un color, a un color; un número, a un número (misma fuente).
• Entre colecciones. La ayuda no lo dice con estas palabras; describe que el destino se elige en la pestaña Libraries del selector. En DesignToken101 todos los semánticos apuntan a variables de otra colección, Primitives, y la exportación lo registra ("targetVariableSetName": "Primitives").

Cuando una colección tiene varios modos, cada modo puede apuntar a una variable distinta. En DesignToken101, el valor Light y el Dark de un mismo semántico apuntan a primitivos distintos. Lo verás en Light y Dark, en el módulo Modos y temas; en este módulo basta con saber que el alias se decide modo a modo.

"default": {
  "$type": "color",
  "$value": { "colorSpace": "srgb", "components": [0.2, 0.8, 0.6], "alpha": 1, "hex": "#33CC99" },
  "$description": "Botón principal",
  "$extensions": {
    "com.figma.aliasData": {
      "targetVariableName": "color/emerald/500",
      "targetVariableSetName": "Primitives"
    }
  }
}

"default": {
  "$type": "color",
  "$value": "{color.emerald.500}",
  "$description": "Botón principal"
}

Fuentes

• Design Tokens Format Module 2025.10: Aliases / References
• Design Tokens Format Module 2025.10: Type
• Design Tokens Format Module 2025.10: Character restrictions
• Figma: Overview of variables, collections, and modes
• Figma: Create and manage variables and collections