Tipos simples

Cada token tiene un tipo, y el tipo decide cómo lo trata cada herramienta. En esta lección verás los tipos de un solo valor que define DTCG, los que tiene Figma y cómo encajan entre sí. Algunos no encajan del todo; esas excepciones son las que marcan qué tokens viven en código.

En esta página

• Los tipos simples de DTCG
• Los tipos de variable de Figma
• Cómo se corresponden
• Color
• Dimensiones px y rem
• Peso y familia tipográfica
• Interlineado
• Duración y curva de animación
• Opacidad
• En Figma
• Lo que te llevas

Los tipos simples de DTCG

La especificación DTCG define siete tipos de un solo valor (Format Module: Types):

Cada tipo tiene su apartado en la especificación: color, dimension, fontFamily, fontWeight, duration, cubicBezier y number. Como ejemplos de uso de number, la especificación cita las posiciones de un degradado y el interlineado sin unidad.

Los tipos de variable de Figma

Figma tiene seis tipos de variable (Figma: Overview of variables). Cada uno se aplica a unas propiedades concretas (Figma: Apply variables to designs):

Cómo se corresponden

Esta tabla resume qué tipo DTCG le corresponde a cada clase de valor, cómo se guarda en Figma y qué hacemos en DesignToken101:

Las filas en negrita son decisiones del sistema de esta web. Los apartados siguientes explican cada una.

Color

Un token de color en DTCG es un objeto con dos propiedades obligatorias, colorSpace y components, y dos opcionales: alpha (si falta, vale 1, totalmente opaco) y hex, un valor de reserva (Color Module 2025.10). El Color Module admite catorce espacios de color, entre ellos sRGB, Display P3 y oklch.

Figma, al importar, admite color en sRGB y HSL (Figma: Modes for variables). Al exportar, escribe sRGB con el hex añadido.

Dimensiones px y rem

DTCG admite dos unidades en dimension: px y rem. Un rem equivale al tamaño de fuente por defecto del sistema (Format Module: Dimension). Figma importa dimensiones en px y las guarda como Number sin unidad (Figma: Modes for variables).

Lo que dicen las fuentes de accesibilidad:

• MDN explica que muchas personas aumentan el tamaño de letra por defecto del navegador, que las medidas absolutas como px no se adaptan a ese ajuste y recomienda medidas relativas como rem para el tamaño de fuente (MDN: length).
• WCAG 2.2 pide que el texto se pueda ampliar al 200 % sin perder contenido (criterio 1.4.4). Se puede cumplir con el zoom del navegador, así que el criterio no obliga a usar una unidad concreta. Entre sus técnicas suficientes están los tamaños de fuente en porcentaje y en em (Understanding 1.4.4 Resize Text).

Peso y familia tipográfica

Peso. DTCG acepta un número de 1 a 1000 o un nombre predefinido, como "bold" (700) (Format Module: Font weight). CSS trabaja con números. En Figma, el peso admite dos tipos de variable:

• String, con el nombre del estilo de la fuente, por ejemplo Semi Bold (Figma: Apply variables to designs).
• Number: el peso aparece entre los scopes de las variables Number (Figma: Create and manage variables).

Lo probamos: una variable Number con el valor 600 aplicada al peso da Inter Semi Bold. Además, en Dev Mode un peso con variable String aparece sin referencia a la variable.

Familia. DTCG admite un nombre o una lista de nombres de fuente (Format Module: Font family). Figma importa un único nombre (Figma: Modes for variables). Por eso en Figma guardamos Inter, y las fuentes de reserva (system-ui, sans-serif…) se añaden en el CSS.

Interlineado

DTCG trata el interlineado como un number: un multiplicador del tamaño de fuente, sin unidad (Format Module: Number). 1.5 significa 1,5 veces el tamaño de la letra. Figma permite aplicar una variable Number al interlineado (Figma: Apply variables to designs).

Duración y curva de animación

DTCG define duration, en ms o s, y cubicBezier, cuatro números que describen una curva (Format Module: Duration, Cubic Bézier). Figma tiene variables Timing y Easing, que se aplican a animaciones de Figma Motion (Figma: Apply variables to designs).

Opacidad

DTCG no define un tipo para la opacidad. La transparencia de un color va en su propiedad alpha (Color Module 2025.10). Figma permite aplicar una variable Number a la opacidad de una capa, y la muestra en porcentaje (40 %), mientras que CSS la espera como decimal (0.4).

En Figma

El tipo se elige al crear la variable (Figma: Create and manage variables). Al crear cada variable, piensa ya en dos cosas:

• El tipo, según la tabla de Cómo se corresponden.
• Dónde se podrá aplicar (su scope). Una variable Number puede servir para el radio, el padding o el tamaño de letra; el scope limita las propiedades a las que se puede aplicar (misma fuente). Lo configuraremos en el módulo Primitivos.

:root {
  --t101-color-emerald-500: #3c9;       /* color, en hexadecimal */
  --t101-space-400: 1rem;               /* dimension: 16 px en Figma */
  --t101-font-weight-600: 600;          /* fontWeight */
  --t101-line-height-normal: 1.5;       /* number, definido en código */
}

Fuentes

• Design Tokens Format Module 2025.10
• Design Tokens Color Module 2025.10
• Figma: Overview of variables, collections, and modes
• Figma: Apply variables to designs
• Figma: Create and manage variables and collections
• Figma: Modes for variables
• MDN: length
• WCAG 2.2: Understanding 1.4.4 Resize Text