Los tokens de código

Algunos tokens de DesignToken101 no están en Figma. Los primitivos de código los viste en el módulo 2; en esta lección tienes la lista completa, sabes dónde se escriben y cómo se generan junto a los de Figma, con el mismo nombre y las mismas comprobaciones.

En esta página

• La lista completa
• Por qué se escriben en DTCG
• Dónde viven
• El breakpoint, un token que se usa de dos formas
• Cuando Figma puede guardarlo, se mueve
• Lo que te llevas

La lista completa

Cada fila tiene un motivo distinto, pero la regla es la misma: cada token tiene una sola fuente. Si Figma no puede guardar un token como lo necesita el código, o no lo usa, su fuente es la especificación del sistema, no el archivo de Figma (Una sola fuente de verdad).

Por qué se escriben en DTCG

Un token de código podría escribirse directamente en el CSS, a mano. DesignToken101 no lo hace: lo escribe en un archivo DTCG, junto a la exportación de Figma, y lo genera con la misma herramienta.

Cada token lleva además una $description que dice por qué vive en código. Pasa al CSS como comentario: quien lea la variable sabe por qué no la encontrará en Figma.

Dónde viven

Todos están en un archivo, tokens/code-only.tokens.json. El Resolver lo carga en el conjunto base, junto a Primitives y Semantic size, porque sus valores no cambian con el tema ni con el ancho (DTCG no tiene modos).

Un detalle del formato: en este archivo, el tipo se escribe en el grupo y lo heredan sus tokens. Los tres interlineados comparten "$type": "number" en el grupo line-height. El Format Module lo permite: un token sin $type toma el de su grupo más cercano (Format Module: Type).

El breakpoint, un token que se usa de dos formas

breakpoint/desktop se genera como cualquier token, --t101-breakpoint-desktop: 64rem. Pero donde se necesita, en la condición de una consulta @media, no se puede escribir var(--t101-breakpoint-desktop).

Lo que dice la fuente: var() no se puede usar en los nombres de propiedad, en los selectores ni en ningún sitio que no sea el valor de una propiedad (MDN: var()). La condición de una @media no es el valor de una propiedad.

Por eso la configuración lee el valor del token, 64rem, y lo escribe tal cual en la consulta: @media (width >= 64rem). El valor sigue teniendo una sola fuente, el token; lo que cambia es que se copia al generar, no se referencia. Lo mismo pasa en la capa de Tailwind CSS (El breakpoint).

Cuando Figma puede guardarlo, se mueve

Tres tokens empezaron en código y hoy salen de Figma:

Cuando se crearon sus variables en Figma, se quitaron del archivo de código. No se copiaron: un token no puede tener dos fuentes (Los primitivos que viven en código). Al cambiar de fuente, el CSS siguió dando los mismos valores (19rem, #00000080, #ffffffe6 y #050c09e6), y una comprobación lo vigila.

{
  "line-height": {
    "$type": "number",
    "$description": "Solo código (D01): Figma interpreta una variable en el interlineado como píxeles.",
    "tight": { "$value": 1.2, "$description": "Títulos grandes" },
    "snug": { "$value": 1.4, "$description": "Interfaz, textos cortos" },
    "normal": { "$value": 1.5, "$description": "Texto de lectura" }
  },
  "blur": {
    "300": {
      "$type": "dimension",
      "$value": { "value": 12, "unit": "px" }
    }
  },
  "breakpoint": {
    "desktop": {
      "$type": "dimension",
      "$value": { "value": 64, "unit": "rem" }
    }
  }
}

const codeOnly = JSON.parse(fs.readFileSync(new URL('./tokens/code-only.tokens.json', import.meta.url), 'utf8'));
const { value: bpValue, unit: bpUnit } = codeOnly.breakpoint.desktop.$value;
const DESKTOP = `(width >= ${bpValue}${bpUnit})`; // las media queries no leen variables CSS

Fuentes

• Design Tokens Format Module 2025.10: Type
• Figma: Overview of variables, collections, and modes
• MDN: var()