La colección completa

Ya tienes todas las escalas. En esta lección las ves juntas, como quedan en la colección Primitives de Figma, con el criterio que decide qué se publica y a qué propiedades se aplica cada una. También repasas los primitivos que no están en Figma y cómo comprobar que la colección está completa.

En esta página

• La colección de un vistazo
• Qué se publica y qué se oculta
• Para qué sirve el scope
• Lo que guarda la exportación
• Los primitivos que viven en código
• Revisa tu colección
• Lo que te llevas

La colección de un vistazo

Colección Primitives, con un modo, Value. 97 variables:

Todas llevan code syntax Web con el formato var(--t101-…), también las ocultas. Por qué lo viste en Una sola fuente de verdad.

Qué se publica y qué se oculta

Cuando publicas un archivo como biblioteca, puedes ocultar variables concretas con Hide from publishing (Figma: Hide styles, components, and variables when publishing).

Así, en el selector de quien usa la biblioteca no aparecen 57 colores sueltos, sino los tokens semánticos con su propósito en el nombre.

Ocultar un primitivo no impide que los semánticos apunten a él. El curso de Figma lo propone así: ocultar los primitivos al publicar para que no se apliquen directamente, y aplicar los semánticos que apuntan a ellos (Figma: Update 1, Tokens, variables, and styles).

Para qué sirve el scope

El scope limita las propiedades a las que se puede aplicar una variable (Figma: Create and manage variables). Una variable con scope Corner radius se ofrece al elegir el radio de una esquina, y no en el padding ni en el tamaño de letra.

• Las escalas con un uso llevan ese scope: espaciado, radio, grosor y cada propiedad tipográfica.
• Los colores primitivos no tienen ningún scope, así que no se ofrecen para ninguna propiedad. Su única función es ser el destino de los alias.

Lo que guarda la exportación

Al exportar la colección, cada variable lleva en $extensions los datos propios de Figma. En la exportación de esta web aparecen estos:

Además, el archivo lleva el nombre del modo en su raíz: "com.figma.modeName": "Value". DTCG permite que cada herramienta guarde sus datos en $extensions (Format Module: Extensions).

Qué hace esta web con esos datos al generar el CSS lo verás en el módulo De Figma al código.

Los primitivos que viven en código

Tres grupos de primitivos no están en Figma. Los explicamos al tratar cada escala; aquí los tienes juntos:

Los valores de movimiento: duration/200 = 200 ms y easing/standard = cubic-bezier(0.2, 0, 0, 1), la curva de todas las animaciones de la interfaz. Cuando la persona pide movimiento reducido (prefers-reduced-motion), la web no anima; lo verás en el módulo Accesibilidad (Movimiento y transparencia).

Revisa tu colección

Antes de pasar al módulo Relaciones, comprueba tu colección Primitives:

• Tiene un solo modo.
• Cada variable tiene la ruta completa: categoría, paleta (si la hay) y paso.
• Ningún nombre de paleta es un rol (brand, danger, primary).
• Cada escala que no es de color lleva su scope, y los colores no llevan ninguno.
• Los colores y la tipografía están ocultos al publicar; el espaciado, el radio y el grosor, visibles.
• Todas tienen code syntax Web.
• No has creado variables de interlineado ni de espaciado negativo.

{
  "duration": {
    "200": {
      "$type": "duration",
      "$value": { "value": 200, "unit": "ms" }
    }
  },
  "easing": {
    "standard": {
      "$type": "cubicBezier",
      "$value": [0.2, 0, 0, 1]
    }
  }
}

Fuentes

• Figma: Hide styles, components, and variables when publishing
• Figma: Create and manage variables and collections
• Figma: Update 1, Tokens, variables, and styles
• Design Tokens Format Module 2025.10: Extensions