Las colecciones semánticas

Ya has visto todos los semánticos de DesignToken101. En esta lección los ves como quedan en Figma: repartidos en tres colecciones, publicados y con un scope por propiedad. Es la contraparte de La colección completa del módulo 2, y termina con una lista para revisar tus colecciones.

En esta página

• Las colecciones de un vistazo
• Los semánticos se publican
• Un scope por propiedad
• La cadena completa
• Alias que cruzan colecciones
• Revisa tus colecciones
• Lo que te llevas

Las colecciones de un vistazo

Cuatro de esos semánticos son valores directos, no alias: los dos tamaños de maquetación y los dos fondos con transparencia (Cuando un semántico no es alias).

Las colecciones se separan por eje de cambio: una colección tiene los modos que necesitan sus variables, y solo esos. El color cambia con el tema; los tamaños de texto, con el ancho de pantalla; los radios no cambian. Por qué es mejor una colección por eje que una sola colección con todos los modos lo verás en Un eje por colección, en el módulo Modos y temas.

Los semánticos se publican

En el módulo 2 ocultaste los primitivos de color y de tipografía al publicar (Qué se publica y qué se oculta). Con los semánticos se hace lo contrario: todos se publican, porque son lo que quien diseña aplica.

El resultado es que el selector de color de quien usa la biblioteca no muestra 57 colores sueltos, sino 33 tokens con su función en el nombre. El curso de Figma propone lo mismo: ocultar los primitivos al publicar para que no se abuse de ellos (Figma: Update 1, Tokens, variables, and styles).

Un scope por propiedad

El scope limita las propiedades a las que se puede aplicar una variable, y Figma la muestra únicamente en esos selectores (Figma: Create and manage variables). En los semánticos, el scope sigue a la propiedad del nombre:

Los tokens de texto incluyen Shape fill porque los iconos son formas: un icono de aviso se colorea con color/text/warning/default, como su etiqueta. Por eso no hace falta una propiedad icon.

La cadena completa

Con los dos módulos, cada decisión de diseño se recorre así:

Todos los alias apuntan a la colección Primitives, y ningún semántico apunta a otro semántico. Las cadenas más largas, las de los estilos de texto, tienen dos saltos.

Alias que cruzan colecciones

Todos los semánticos de DesignToken101 apuntan a otra colección, Primitives. Dos preguntas aparecen al hacerlo:

¿Qué modo del destino se usa? Primitives tiene un solo modo, así que en DesignToken101 la pregunta no se plantea. Pero si tu sistema encadena dos colecciones con varios modos, conviene saberlo. La ayuda de Figma no lo dice (Figma: Modes for variables). Lo comprobamos el 2026-10-04 con la API de plugins de Figma, con una variable que apuntaba a otra de una colección con dos modos:

• Sin ningún modo elegido, el alias usó el modo por defecto de la colección de destino.
• Al elegir el segundo modo de la colección de destino en el marco que contenía el elemento, o en el propio elemento, el alias pasó a usar ese modo.

Es decir: el modo del destino lo decide el elemento donde se aplica la variable, igual que con cualquier otra variable de esa colección.

¿Se pueden ocultar los primitivos a los que apuntan los semánticos? Sí, y es lo que recomienda el curso de Figma: ocultar los primitivos al publicar para que no se apliquen directamente, y dejar visibles los semánticos que apuntan a ellos (Figma: Update 1, Tokens, variables, and styles). Es lo que hace DesignToken101.

Revisa tus colecciones

Cuando crees tus colecciones semánticas en el ejercicio del módulo Nombrar, comprueba:

• Cada colección tiene los modos de su eje de cambio, y ninguno más.
• Cada semántico es un alias de un primitivo, salvo las excepciones que hayas registrado con su motivo.
• Ningún semántico apunta a otro semántico, y ninguna cadena pasa de dos saltos.
• Los semánticos se publican; los primitivos de color y de tipografía, no.
• Cada semántico tiene el scope de su propiedad: fondo, texto, borde, radio o tamaño.
• Cada semántico tiene descripción (para qué se usa) y code syntax Web.
• Cada par de texto y fondo que se usa junto cumple el contraste, en cada modo.

"default": {
  "$type": "color",
  "$description": "Texto principal",
  "$extensions": {
    "com.figma.scopes": ["SHAPE_FILL", "TEXT_FILL"],
    "com.figma.codeSyntax": { "WEB": "var(--t101-color-text-neutral-default)" },
    "com.figma.aliasData": {
      "targetVariableName": "color/neutral/900",
      "targetVariableSetName": "Primitives"
    }
  }
}

Fuentes

• Figma: Create and manage variables and collections
• Figma: Update 1, Tokens, variables, and styles
• Figma: Modes for variables