Cuando un semántico no es alias

En DesignToken101, un semántico apunta siempre a un primitivo. Casi siempre: hay cuatro tokens semánticos con un valor propio. En esta lección verás cuáles son, por qué cada uno es una excepción y cómo se controla una excepción para que no acabe siendo un valor suelto con nombre de token.

En esta página

• La regla
• Las cuatro excepciones
• Sin escala a la que apuntar
• Un alias no cambia la opacidad
• Cómo se controla una excepción
• Lo que te llevas

La regla

La regla es nuestra. DTCG permite que cualquier token tenga un valor propio o una referencia, sin distinguir capas (Format Module: Groups). Figma tampoco obliga a nada: una variable de cualquier colección puede tener un valor o un alias.

Las cuatro excepciones

Sin escala a la que apuntar

Los dos tamaños de maquetación podrían ser alias si existiera una escala size/* de primitivos. No existe porque hay dos valores y ninguno se repite: crear una escala para ellos sería crear primitivos que usaría un único token cada uno.

Un alias no cambia la opacidad

La capa que oscurece la página al abrir el menú en móvil es negra, con un 50 % de opacidad. El primitivo color/black existe, pero es negro opaco.

• En Figma, un alias apunta a otra variable, y la ayuda no describe ninguna forma de modificar el valor de destino (Figma: Create and manage variables). No hay forma de decir "este primitivo, pero al 50 %".
• En DTCG, la sintaxis de llaves tampoco: apunta al valor completo de un token (Format Module: Curly brace syntax).

Así que el token lleva el color completo, con su opacidad, como valor propio. DesignToken101 no tiene tokens de opacidad: la transparencia va dentro del color, en su propiedad alpha (Tipos simples).

Lo probamos con la herramienta que genera el CSS de esta web, Terrazzo 2.7.1. Resuelve $ref: el overlay sale como #00000080, y si color/black cambia, el overlay cambia con él. Pero sus páginas sobre los tokens no mencionan $ref dentro de un valor (Terrazzo: DTCG Tokens, Token Types), y el CSS lleva el valor ya calculado, no una referencia a color/black.

El fondo de la cabecera añade una dificultad: es blanco al 96 % en Light y neutral/950 al 90 % en Dark. Un valor directo distinto por modo, y también con una opacidad distinta: la de Light se subió al 96 % para que el anillo de foco contraste lo suficiente sobre la cabecera (Contraste de lo que no es texto). En Figma es una variable de la colección Semantic color con un valor propio en cada columna, Light y Dark. Cómo se unen los modos en código lo verás en el módulo De Figma al código.

Cómo se controla una excepción

Una excepción sin control acaba siendo un valor suelto con nombre de token. En DesignToken101, cada valor directo cumple tres condiciones:

1. Tiene un motivo registrado. Cada una está en el registro de decisiones del proyecto, con la fecha y el porqué.
2. Lo dice su descripción. La descripción del token explica que es un valor directo y por qué, para quien lo encuentre en Figma o en el JSON.
3. Tiene una salida prevista. Los tamaños pasarán a ser alias si aparece una escala; los colores, si una herramienta permite derivar la opacidad.

"overlay": {
  "$type": "color",
  "$value": {
    "colorSpace": "srgb",
    "components": [0, 0, 0],
    "alpha": 0.5,
    "hex": "#000000"
  },
  "$description": "… color/black al 50 %, igual en Light y Dark. Valor directo: un alias de Figma no puede cambiar la opacidad."
}

Fuentes

• Design Tokens Format Module 2025.10: Groups
• Design Tokens Format Module 2025.10: Curly brace syntax
• Design Tokens Format Module 2025.10: JSON Pointer syntax
• Figma: Create and manage variables and collections
• Terrazzo: DTCG Tokens
• Terrazzo: Token Types