Las Variables y los Estilos de Figma guardan valores reutilizables, pero almacenan cosas fundamentalmente distintas. Un Estilo guarda un compuesto de valores que se expresan todos a la vez: un estilo de texto lleva familia tipográfica, tamaño, grosor e interlineado como una sola unidad. Una Variable guarda un único valor sin procesar - un color, un número, un booleano - y expone un valor por vez según el modo activo.
La distinción se vuelve una decisión de sistema de diseño en el momento en que necesitas alias. Las Variables pueden referenciar otras Variables, y así es como un primitivo alimenta a un token semántico que alimenta a un token de componente. Los Estilos no pueden referenciar nada. Por eso elegir entre ambos no es cuestión de gusto: decide si tu archivo puede sostener una jerarquía de tokens o solo una lista de apariencias guardadas.
Esta guía cubre la diferencia mecánica, dónde se rompe un archivo basado solo en Estilos, cómo migrar y los casos en que los Estilos sí son la respuesta correcta.
Para la arquitectura completa, nuestra guía de tokens de diseño en Figma cubre en detalle los Primitivos y las capas semánticas, y Buscar Valores No Tokenizados es la auditoría que detecta justo lo que un archivo basado en Estilos deja atrás.
En resumen
- Los Estilos guardan compuestos; las Variables guardan valores únicos. Un estilo de texto es una unidad de muchas propiedades; una Variable de color es un color que se reutiliza en cualquier parte.
- Solo las Variables admiten alias.
background/defaultpuede apuntar agray/50, ybutton/primary/bgpuede apuntar abackground/default- los Estilos solo pueden contener un valor literal. - Solo las Variables admiten modos, y los modos son lo que hace funcionar los temas claro y oscuro sin duplicar componentes.
- Figma documenta seis tipos de Variable - Color, Number, String, Boolean, Timing y Easing - no los cuatro que todavía listan la mayoría de los tutoriales.
- Los Estilos siguen siendo la herramienta correcta para degradados, imágenes, modos de fusión, efectos y presets de texto puntuales, y puedes vincular Variables dentro de un Estilo para darle modos.
Valores compuestos frente a valores únicos
La distinción entre Estilos y Variables tiene que ver con lo que pueden contener, no con dónde aparecen en la interfaz. La propia documentación de Figma describe los Estilos como contenedores de una combinación de valores donde todos se expresan a la vez, y las Variables como almacenes de valores únicos sin procesar donde solo un valor puede expresarse por vez.
Un Estilo de color se comporta como una baraja vista desde arriba: puede contener un relleno sólido, un degradado, una imagen o un modo de fusión, y todo lo que hay en la pila se aplica junto.
Una Variable se comporta como esa misma baraja vista de lado, donde solo la carta superior es visible y la carta visible cambia con el modo activo. Por eso un degradado pertenece a un Estilo y un valor hexadecimal suelto pertenece a una Variable.
Qué pueden guardar los Estilos y las Variables de Figma
| Capacidad | Estilos | Variables | Por qué importa |
|---|---|---|---|
| Contiene un compuesto de valores | Sí | No | Un estilo de texto lleva familia, tamaño, grosor e interlineado como una unidad; una Variable guarda un valor |
| Contiene números y booleanos | No | Sí | Espaciado, radio, opacidad y visibilidad de capa no tienen equivalente en Estilos |
| Puede aliasar otra entrada | No | Sí | El alias es lo que construye la cadena de primitivo a semántico a componente |
| Lleva valores por modo | Parcial | Sí | Un Estilo gana modos solo cuando hay una Variable vinculada dentro |
| Admite alcance y sintaxis de código | No | Sí | El alcance limita dónde aparece un valor; la sintaxis de código mapea un token al código |
| Contiene degradados, imágenes, modos de fusión | Sí | No | Los tratamientos visuales compuestos no tienen representación de valor único |
Seis tipos de Variable, no cuatro
Figma documenta seis tipos de Variable: Color, Number, String, Boolean, Timing y Easing. Color lleva rellenos sólidos con opacidad opcional, Number cubre dimensiones y espaciado, String maneja valores de texto y conmutación de variantes, y Boolean controla estados verdadero y falso. Timing y Easing contienen duraciones de animación en milisegundos y curvas de aceleración, y existen para alimentar el trabajo con Figma Motion.
Si aprendiste Variables cuando solo existían cuatro tipos, tu modelo mental está incompleto, no equivocado. La consecuencia es práctica: un sistema de animación construido solo con Estilos no tiene forma de expresar duración o aceleración como token, porque un Estilo no puede contener un valor en milisegundos ni una curva.
Por qué un archivo solo de Estilos no construye una jerarquía de tokens
Una jerarquía de tokens depende de que una Variable apunte a otra, y los Estilos rompen esa cadena por completo. Figma indica con claridad que los Estilos no admiten alias, mientras que cualquier Variable puede referenciar otra Variable del mismo tipo. Esa restricción de mismo tipo conviene recordarla: una Variable de color aliasa una Variable de color, y una Variable de número aliasa una Variable de número. No puedes aliasar entre tipos distintos.
La cadena de tokens de abajo muestra cada capa como Variable. Los primitivos contienen valores sin procesar y sin alias, los átomos apuntan a los primitivos y la capa de componente apunta a los átomos:
/* Primitivos - valores sin procesar, sin alias */
gray/950 → #030712
gray/50 → #f9fafb
/* Átomos - aliasan un primitivo, nunca un hex suelto */
background/default → gray/50
text/primary → gray/950
/* Capa de componente - aliasa un átomo */
button/primary/bg → background/defaultSustituye los átomos por Estilos de color y la cadena desaparece. background/default pasa a ser un Estilo que contiene #f9fafb directamente. La relación entre el nombre semántico y gray/50 se pierde, y ninguna herramienta puede recuperarla, porque nada en el archivo registra que ambas estuvieron conectadas. Cambia gray/50 y el Estilo no se mueve.
El alias es la diferencia más determinante entre ambas funciones, y es la razón por la que construimos nuestro flujo de escaneo y creación alrededor de las Variables y no de los Estilos. Una capa semántica solo es semántica mientras los alias siguen resolviendo.
Lo que cuesta un archivo solo de Estilos
Un archivo construido enteramente con Estilos se ve correcto en el lienzo, y por eso el coste queda oculto hasta que el archivo se encuentra con el código. El fallo no es visual - es estructural, y aparece en cuatro puntos predecibles.
- El theming duplica en lugar de conmutar. Sin modos, un tema oscuro implica un conjunto paralelo de Estilos y un segundo juego de componentes que mantener. Dos temas se convierten en cuatro en cuanto aparece una variación de marca.
- Los números quedan codificados a mano. Espaciado, radio y opacidad no tienen equivalente en Estilos, así que viven como valores sin procesar sobre las capas y nunca entran en un archivo de tokens.
- La generación de código pierde la semántica. Un Estilo llamado
Background/Defaultpuede exportarse como un valor hexadecimal, pero el hecho de que aliasagray/50nunca se registró, así que el código generado no puede reproducir la cadena. - La cobertura deja de ser medible. No puedes auditar lo que nunca se tokenizó. Cada propiedad del archivo es un valor sin token, y no hay forma de distinguir un número codificado a propósito de uno que nadie notó.
El cuarto coste es el que se acumula. Las auditorías manuales pasan por alto valores que coinciden por casualidad y marcan valores que son intencionadamente únicos, y tardan lo suficiente como para que nadie las ejecute con frecuencia. Por eso tratamos el escaneo automático como punto de partida y no como tarea de limpieza periódica: una máquina no tiene problema en comprobar cada relleno, trazo y padding contra tu conjunto de tokens.
Cómo migrar un archivo de Estilos a Variables
Una migración de Estilos a Variables es sobre todo un ejercicio de nombres y estructura, y los fallos son predecibles. El orden de abajo es el que evita crear entradas duplicadas que luego tendrías que limpiar.
- Normaliza los nombres antes que nada. Las Variables no pueden compartir nombre ni contener espacios, así que dos Estilos llamados
Grey/50yGrey / 50colapsan en una colisión. Arregla los nombres primero y migra después. - Inventaría los valores realmente en uso. Escanea la selección o la página completa para extraer los colores, espaciados, radios y valores tipográficos que el archivo contiene de verdad, deduplicados - no los que suponías que había.
- Crea la colección de Primitivos a partir de ese inventario. Pasos de paleta y escalas numéricas sin procesar, sin alias, con el acceso de edición restringido a los responsables del sistema.
- Crea los átomos y aliasalos a los primitivos. Cada entrada semántica apunta a un primitivo - nunca a un hex suelto - usando el icono de alias del selector de valores.
- Revincular los componentes a las nuevas Variables y después eliminar los Estilos huérfanos. Eliminar Estilos antes de revincular deja capas apuntando a nada.
- Ejecuta una auditoría de cobertura para confirmar que no falta nada y repite el paso de exportación para que el código siga el ritmo del archivo.
Problemas de migración que detienen una conversión de Estilos a Variables
| Problema | Qué ocurre en realidad | Arréglalo antes de migrar |
|---|---|---|
| Nombres de Estilo duplicados | Las Variables no pueden compartir nombre, así que la creación se detiene a mitad del conjunto | Renombra los duplicados a rutas distintas |
| Espacios en los nombres de Estilo | Las Variables rechazan los espacios, así que los plugins los eliminan y se rompe el vínculo con el Estilo original | Convierte los nombres a rutas separadas por barras |
| Espaciado irregular de barras | Grey / 50 y Grey/50 resuelven a grupos distintos | Unifica el espaciado de barras en todo el archivo |
| Estilos de texto | Un estilo de texto compuesto no puede convertirse en una Variable única - contiene varias propiedades a la vez | Vincula Variables de número y texto dentro del estilo en lugar de convertirlo |
La fila de los estilos de texto sorprende a la mayoría de los equipos. Los colores convierten limpiamente porque un color ya es un valor único, pero un estilo de texto es un compuesto por diseño, así que no hay nada único en lo que convertirlo. Lo correcto es conservar el estilo de texto y vincular Variables en las propiedades que contiene, lo que le da modos sin descartar el compuesto.
Preguntas reales sobre Variables y Estilos
Cuatro preguntas aparecen en casi todas las conversaciones de migración, y cada una remite a un término que se usa de forma imprecisa. Separarlos elimina la mayor parte de la confusión.
Qué diferencia hay entre una propiedad y una Variable
Una propiedad es el hueco en la capa - relleno, trazo, padding, radio de esquina, opacidad. Una Variable es el valor que pones en ese hueco. Las propiedades no pueden ser Variables y las Variables no pueden ser propiedades; la relación es que una Variable se vincula a una propiedad. Cuando alguien dice que un diseño está totalmente tokenizado, quiere decir que cada propiedad que acepta una Variable tiene una vinculada en lugar de un valor sin procesar.
Una variante es lo mismo que una Variable
No, y operan en niveles distintos. Una variante es un estado de un componente - default, hover, disabled - y vive en el conjunto de componentes. Una Variable es un valor que los componentes pueden referenciar. Ambos se conectan mediante Variables de tipo String y Boolean, que pueden decidir qué variante muestra un prototipo, así que una Variable puede controlar la selección de variante sin ser ella misma una variante.
Qué diferencia hay entre Variables y tokens de diseño
Las Variables son la implementación de Figma; los tokens de diseño son el concepto independiente de la plataforma. Un token es una decisión de diseño con nombre pensada para compartirse entre diseño y código, y por eso el formato interoperable es la especificación del W3C Design Tokens Community Group y no el modelo de almacenamiento de una herramienta concreta.
Las Variables de Figma cubren los valores que Figma puede contener. Un conjunto completo de tokens necesita además tokens compuestos como sombras y tipografía, y ahí es donde los Estilos siguen en juego.
Se pueden mover Variables entre archivos de Figma
Sí, publicando una librería. Las Variables se publican igual que los componentes y los Estilos, y los archivos consumidores las leen manteniendo la integridad de la librería - que es también como se mantiene la consistencia entre archivos. La restricción a tener en cuenta es el alcance: un archivo consumidor puede usar una Variable publicada pero no editarla, así que cualquier cambio tiene que ocurrir en la librería de origen.
Cuándo los Estilos siguen siendo la elección correcta
Los Estilos no están obsoletos, y la propia guía de Figma dice que las Variables no son un reemplazo de ellos. Ambas funciones son aditivas, y un archivo maduro usa las dos de forma deliberada.
- Efectos y sombras. Los tratamientos de efecto compuestos no tienen representación de valor único, así que un Estilo de sombra sigue siendo la forma más limpia de aplicarlos de manera consistente.
- Degradados, imágenes y modos de fusión. Todo lo que apila varios valores pertenece a un Estilo, porque una Variable solo puede expresar un valor por vez.
- Presets tipográficos. Conserva el estilo de texto como la unidad que aplican los diseñadores, y vincula Variables de número y texto dentro de él para que herede los modos.
- Casos realmente únicos. Una ilustración suelta o un estado vacío que nunca se repetirá no necesita indirección.
Hay un matiz que se pasa por alto: los modos están pensados para Variables, pero Figma permite aplicarlos también a los Estilos. Vincula una Variable de número para el tamaño de fuente dentro de un estilo de texto y ese Estilo hereda el comportamiento de modos. Este es el mecanismo que permite que un sistema tipográfico participe en el theming sin fingir que un compuesto es un valor único.
Audita el archivo antes de elegir
La decisión entre Variables y Estilos se toma mejor con números que con opiniones, y un escaneo te da esos números de una pasada. Escaneamos una selección o una página completa, extraemos los colores, espaciados, radios, tipografías, efectos, degradados y valores de opacidad realmente presentes, los deduplicamos y creamos Variables de Figma como una jerarquía de Primitivos a Átomos vinculada a las capas que usaban esos valores.
Las auditorías responden a la pregunta siguiente. La Auditoría de Cobertura lista cada propiedad que aún no tiene una Variable vinculada - rellenos, opacidad, padding, gap, radio y trazo - con una lista clicable que hace zoom a la capa en Figma. Buscar Valores No Tokenizados saca a la superficie los valores sin procesar que no tienen ningún token detrás.
La Auditoría de Contraste comprueba pares de texto y fondo contra los ratios WCAG, algo que importa más cuando un tema puede conmutar, porque un par que pasa en modo claro puede fallar en modo oscuro. Los conjuntos de tokens se exportan a JSON DTCG, el formato interoperable que consumen Style Dictionary y pipelines similares.
No hace falta convertir el archivo entero de una vez. Escanear una sola página o un solo conjunto de componentes basta para ver la forma del problema, y el número de cobertura te dice si el resto es una semana de nombres o un trimestre de revincular.
Veredicto final - Figma Variables vs Estilos
Elige Variables para todo lo que necesite escalar, cambiar de tema o llegar al código, y conserva los Estilos para compuestos sin equivalente de valor único. La prueba práctica es una sola pregunta: ¿este valor necesita referenciar otro valor? Si es sí, tiene que ser una Variable, porque los Estilos no pueden aliasar. Un degradado, una sombra o un preset de texto pertenecen a un Estilo, con Variables vinculadas dentro para que participen en los modos.
