Tipos compuestos y estilos

Algunas decisiones de diseño no son un valor, sino varios que van siempre juntos. Un estilo de título, por ejemplo, combina familia, tamaño, peso e interlineado. En esta lección verás cómo los expresa DTCG y cómo los expresa Figma, que no lo hace con variables sino con estilos.

En esta página

• Los tipos compuestos de DTCG
• En Figma los compuestos son estilos
• Los estilos de texto de DesignToken101
• Lo que no se exporta
• Sombras
• En Figma
• Lo que te llevas

Los tipos compuestos de DTCG

La especificación llama token compuesto a un token cuyo valor tiene varias partes con nombre (Format Module: Terminology). Define seis tipos compuestos (Format Module: Composite types):

Cada parte de un compuesto puede ser un valor o una referencia a otro token. Este es un estilo de título escrito como token typography (Format Module: Typography):

{
  "typography": {
    "heading-1": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font-family.sans}",
        "fontSize": "{font-size.heading.1}",
        "fontWeight": "{font-weight.700}",
        "letterSpacing": { "value": 0, "unit": "px" },
        "lineHeight": "{line-height.tight}"
      }
    }
  }
}

Las llaves {…} son referencias a otros tokens: el compuesto reúne decisiones que ya existen como tokens simples. Las referencias las estudiarás en el módulo Relaciones.

En Figma los compuestos son estilos

Figma no tiene variables compuestas. Para agrupar varios valores usa estilos. Según su ayuda, un estilo sirve para crear una combinación de valores, pero no se puede usar dentro de otro estilo ni de una variable; las variables, en cambio, sí se pueden aplicar a estilos (Figma: Overview of variables).

Puedes aplicar variables a las propiedades de un estilo de texto y de un estilo de efecto (Figma: Apply variables to designs). Así el estilo agrupa las decisiones, y cada decisión sigue siendo una variable.

Los estilos de texto de DesignToken101

Esta web tiene diez estilos de texto, uno por rol: heading/1 a heading/4, body/default, body/strong, body/small, label/default, caption/default y code/default. Tres ejemplos:

• Familia, tamaño y peso son variables. Si cambias una, cambian todos los estilos que la usan.
• El interlineado es un porcentaje escrito a mano, porque Figma lee una variable de interlineado como píxeles (Tipos simples).
• El tamaño viene de una variable con dos modos, Desktop y Mobile, así que el título se reduce en pantallas pequeñas. Lo verás en Crear los modos en Figma, en el módulo Modos y temas.

Lo que no se exporta

La exportación de variables de Figma trabaja con variables por modo (Figma: Modes for variables). Al exportar las variables de esta web comprobamos que ningún archivo trae tokens typography: los estilos de texto no se exportan en DTCG.

Sombras

Un token shadow de DTCG agrupa color, desplazamiento horizontal y vertical, desenfoque y extensión, y puede ser una lista de varias sombras (Format Module: Shadow). En Figma, una sombra es un estilo de efecto, y su color y sus medidas admiten variables (Figma: Apply variables to designs).

En Figma

Para que un estilo de texto use variables (Figma: Apply variables to designs):

1. Crea un estilo de texto o abre uno existente para editarlo, y nómbralo por su rol, por ejemplo heading/1.
2. Abre el desplegable de la familia tipográfica, elige Apply variable y selecciona la variable. Haz lo mismo con el peso.
3. Aplica también una variable al tamaño de fuente, que admite variables Number (misma fuente).
4. Comprueba que cada propiedad del estilo muestra el nombre de la variable y no un valor suelto.

Crearás los estilos de DesignToken101 en el módulo Relaciones, cuando tengas las variables tipográficas.

@utility type-heading-1 {
  font-family: var(--font-sans);
  font-size: var(--t101-font-size-heading-1);
  line-height: var(--t101-line-height-tight);
  font-weight: var(--t101-font-weight-700);
}

Fuentes

• Design Tokens Format Module 2025.10
• Figma: Overview of variables, collections, and modes
• Figma: Apply variables to designs
• Figma: Modes for variables
• Tailwind CSS: Adding custom utilities