Cómo encajan Figma, DTCG y Tailwind

Esta página es el mapa del curso. Muestra el recorrido completo de un token, desde Figma hasta el código, sin entrar todavía en detalle. Cada paso tiene su módulo, y al final del curso volverás aquí con todas las piezas encajadas.

En esta página

• El recorrido de un token
• 1 Figma define las decisiones
• 2 Figma exporta casi DTCG
• 3 Una herramienta de traducción las convierte
• 4 Tailwind CSS las convierte en clases
• Un solo nombre en todo el recorrido
• Lo que hemos decidido
• Lo que te llevas

El recorrido de un token

La idea central es tener una sola fuente de verdad. Los tokens se definen una vez y todo lo demás se genera a partir de ahí, sin copiar valores a mano.

1 Figma define las decisiones

En Figma, cada token es una variable. Las variables se organizan en colecciones, y cada colección puede tener varios modos, por ejemplo Light y Dark. Cada modo guarda un valor por variable (Figma: Modes for variables).

Cada variable puede tener además un code syntax: el nombre que tendrá en código para cada plataforma (Web, Android, iOS). Ese nombre aparece en Dev Mode (Figma: Variables in Dev Mode). Lo usaremos para que el nombre en Figma y el nombre en CSS coincidan.

2 Figma exporta casi DTCG

Figma exporta cada modo como un archivo JSON: clic derecho sobre un modo → Export mode, o sobre la colección → Export modes. Según su ayuda, el archivo sigue el formato DTCG (Figma: Modes for variables). Qué contiene un archivo DTCG lo explicamos en Qué es DTCG.

Al exportar las variables de esta web comprobamos que el archivo de Figma no es DTCG completo. Tiene cuatro diferencias:

Lo que dicen las fuentes:

• La propia ayuda de Figma reconoce que string no es un tipo DTCG oficial, y documenta la extensión com.figma.aliasData para los alias entre colecciones (Figma: Modes for variables).
• La especificación DTCG prohíbe que una herramienta adivine el tipo de un token a partir de su valor (Format Module 2025.10). Por eso una herramienta no puede saber que 4 son píxeles.

3 Una herramienta de traducción las convierte

Una herramienta de traducción lee los archivos DTCG y genera código. La especificación cita como ejemplos Style Dictionary y Terrazzo (DTCG Format Module: Translation tool).

• Style Dictionary soporta DTCG, pero su documentación advierte que el soporte de la versión 2025.10 todavía no es completo (Style Dictionary: DTCG).
• Terrazzo es una cadena de herramientas nativa de DTCG. Une los modos con el Resolver Module de DTCG (Terrazzo: Resolvers) y tiene un plugin oficial para Tailwind CSS v4 (Terrazzo: Tailwind).

El resultado son variables CSS (custom properties), una por token, con un selector distinto para cada modo. Este es un token real de esta web:

:root {
  --t101-color-text-neutral-default: var(--t101-color-neutral-900);
}
[data-theme="dark"] {
  --t101-color-text-neutral-default: var(--t101-color-neutral-50);
}

• El alias se conserva como var(): el token semántico sigue apuntando a un primitivo.
• En el modo Dark cambia el primitivo al que apunta, no el nombre del token.
• El prefijo --t101- evita choques de nombres; lo explicamos en el módulo De Figma al código.

4 Tailwind CSS las convierte en clases

Tailwind CSS v4 se configura en CSS con la directiva @theme. Las variables definidas dentro de @theme generan clases de utilidad; las definidas en :root son variables normales. Para que una variable del tema apunte a otra variable hay que usar @theme inline (Tailwind CSS: Theme variables).

El patrón habitual tiene dos capas y es el que documenta shadcn/ui (shadcn/ui: Theming):

/* Capa 1: los tokens, con un valor por modo */
:root  { --warning: oklch(0.84 0.16 84); }
.dark  { --warning: oklch(0.41 0.11 46); }

/* Capa 2: Tailwind CSS los expone como utilidades */
@theme inline {
  --color-warning: var(--warning);
}

@theme inline {
  --text-color-neutral-default: var(--t101-color-text-neutral-default);
}

Un solo nombre en todo el recorrido

El objetivo es que un token se llame igual en todas partes:

En la clase, el inicio text- ya indica la propiedad, así que el nombre no la repite.

Ese nombre compartido es el que encuentra quien pasa un diseño a código: la variable que ve en Figma existe con el mismo nombre en el CSS.

Lo que hemos decidido

Cuando escribimos esta página por primera vez, estas cuestiones estaban abiertas. Las decidimos al construir la web, probando con los archivos reales exportados de Figma:

Fuentes

• Figma: Modes for variables
• Figma: Variables in Dev Mode
• Design Tokens Format Module 2025.10
• Design Tokens Resolver Module 2025.10
• Style Dictionary: DTCG
• Terrazzo: Resolvers
• Terrazzo: Tailwind
• Tailwind CSS: Theme variables
• shadcn/ui: Theming