Crear las variables en Figma

Con la convención escrita y los nombres decididos, toca crear las variables semánticas en Figma. En esta lección verás cómo crear las colecciones, cómo crear cada variable con todo lo que necesita y cómo trabajar con muchas a la vez. Al final, qué pasa si un día tienes que renombrar una.

En esta página

• Las colecciones de este módulo
• Crear una variable completa
• Trabajar con muchas variables
• Si tienes que renombrar
• Lo que te llevas

Las colecciones de este módulo

En este módulo creas dos colecciones semánticas, cada una con un único modo:

Crea cada colección como creaste Primitives en el módulo 2 (Qué es un primitivo, En Figma) y cambia el nombre de su modo. En Semantic color, el modo se llama Light: los alias de este módulo son los de la columna Light de tu mapa.

Crear una variable completa

Cada variable semántica necesita seis cosas. Las dos primeras se escriben al crearla; las otras, en el panel de edición de la variable (Figma: Create and manage variables):

1. El nombre completo, con sus /. Al escribir color/background/neutral/subtle, Figma crea los grupos color, background y neutral y pone la variable dentro.
2. El alias. Haz clic derecho en el valor y elige Create alias. Después, busca el primitivo en la lista: color/neutral/50, por ejemplo.
3. La descripción. Para qué se usa la variable, en una frase: "Fondo de tarjetas y bloques de código". Figma la exporta como $description.
4. El scope. El de su propiedad: Frame fill y Shape fill para los fondos, Text fill y Shape fill para los textos, Stroke para los bordes (Un scope por propiedad).
5. El code syntax Web. El nombre en CSS, con el formato var(--t101-…) y los niveles unidos con guiones: var(--t101-color-background-neutral-subtle) (Una sola fuente de verdad).
6. La visibilidad. Los semánticos se publican: deja sin marcar Hide from publishing.

Trabajar con muchas variables

Una colección semántica tiene decenas de variables. Figma permite trabajar con varias a la vez (Figma: Create and manage variables):

Si creas una variable duplicando otra, abre la copia y repasa los seis puntos de Crear una variable completa. Cada variable tiene que acabar con su propio nombre, alias, descripción y code syntax: un code syntax repetido daría a dos variables el mismo nombre en CSS.

Si tienes que renombrar

En el ejercicio no hace falta renombrar: creas cada variable con su nombre definitivo. Pero en un archivo real se renombra, por ejemplo cuando un token pasa a tener estados y necesita /default (La hoja explícita), o cuando un equipo cambia de convención.

Lo que dice la documentación de la API de plugins de Figma:

• Un alias apunta al identificador de la variable, no a su nombre. Un alias es un objeto con dos datos, type e id, y el id es el de la variable de destino (Figma Plugin API: VariableAlias). Lo mismo vale para las variables aplicadas a un elemento del diseño.
• El code syntax es un dato aparte del nombre (Figma Plugin API: Variable).

Lo que comprobamos el 2026-10-04, renombrando variables con esa API:

• Los alias se conservan. Al renombrar el primitivo al que apunta un semántico, el semántico siguió apuntando a él, ya con el nombre nuevo. Al renombrar el semántico, su alias no cambió.
• Los vínculos del diseño se conservan. Un rectángulo con la variable en el relleno la siguió usando después del cambio de nombre.
• El code syntax no cambia. Una variable renombrada de color/text/accent a color/text/accent/default siguió con el code syntax var(--t101-color-text-accent). Al renombrar, actualiza también el code syntax, o en código seguirá el nombre viejo.

"accent": {
  "default": {
    "$type": "color",
    "$extensions": {
      "com.figma.codeSyntax": { "WEB": "var(--t101-color-text-accent)" }
    }
  }
}

Fuentes

• Figma: Create and manage variables and collections
• Figma Plugin API: VariableAlias
• Figma Plugin API: Variable