La diferencia entre las variables y los estilos

A medida que Figma amplía su conjunto de funciones con variables, quizás te preguntes: ¿cuál es la diferencia entre las variables y los estilos? ¿Cuándo deberías elegir uno sobre el otro? ¿Se están volviendo obsoletos los estilos?

Después de todo, a primera vista parecen funcionar de manera similar:

• Ambos actúan como fuentes de verdad.
• Ambos se pueden publicar en bibliotecas de equipo y reutilizar en todos los diseños.
• Ambos admiten una gestión eficiente del sistema de diseño, ya que las actualizaciones de una variable o de un estilo desencadenarán actualizaciones para todos los diseños que los usen.

Los estilos y las variables tienen diferencias clave que los hacen valiosos en diferentes situaciones.

En este artículo, destacaremos sus diferencias y te ayudaremos a decidir si usar uno, o ambos, en tus diseños.

Diferencias fundamentales

Existen un par de diferencias clave entre los estilos y las variables: los tipos de valores que usan, su apariencia en el lienzo y el uso de modos.

Los estilos pueden almacenar una variedad de propiedades:

• Una propiedad con un único valor sin procesar, como un relleno sólido #FFFFFF.
• Una propiedad con múltiples valores sin procesar, como un gradiente de color.
• Otros formatos como modos de fusión, imágenes, GIF, videos.

Los estilos están diseñados para contener una combinación de valores, donde todos los valores se expresan a la vez. Por ejemplo, puedes almacenar las propiedades de familia de fuente, tamaño de fuente y peso de fuente en un solo estilo de texto al mismo tiempo. Cuando aplicas el estilo de texto a una capa de texto, todas las propiedades se aplicarán simultáneamente. 

En otro ejemplo, veamos los estilos de color que pueden ser una combinación de diferentes tipos de relleno y variables, y están organizados en una pila de arriba hacia abajo. Un estilo de color es como mirar una “pila” de tarjetas desde arriba, donde cada tarjeta es un relleno. Si el color en la parte superior es lo suficientemente transparente, puedes ver el color que está debajo. También puedes reorganizar de forma manual el relleno para cambiar lo que ves desde arriba.

Las variables pueden almacenar valores individuales sin procesar. Por ejemplo, los valores sin procesar pueden incluir rellenos sólidos como #FFFFFF, números como 16 o -32,75, y valores booleanos true y false. 

Las variables están diseñadas para contener uno o más valores únicos y reutilizables, pero solo se puede expresar un valor a la vez. Cada valor corresponde a un modo de variables diferente. Esto es válido para todos los tipos de variables. A diferencia de los estilos, una variable es como un conjunto de cartas en las que solo puedes ver una carta, y la carta que puedes ver depende de su contexto.

Por ejemplo, supongamos que tenemos una colección de variables con modos claro y oscuro. Aplicamos estos a diferentes capas en un marco y configuramos el marco en modo oscuro. Todas las capas con las variables mostrarán los valores del modo oscuro. Si cambiamos el marco a modo claro, las variables cambiarán sus valores expresados a modo claro.

Aunque los modos están diseñados para variables, Figma nos permite aplicarlos a los estilos.

Supongamos que tenemos una variable numérica para un tamaño de fuente predeterminado. La variable tiene dos valores únicos y sin procesar: 16 para modo móvil y 18 para modo de escritorio. Aplicamos esta variable a la propiedad de la fuente de un estilo de texto, así como otras variables y valores a otras propiedades.

Ahora, podemos cambiar el modo en cualquier capa de texto usando este estilo de texto, ya que usa una variable con múltiples modos.

Aprende a vincular estilos con variables.

Escalabilidad y gestión

Una de las formas más efectivas de gestionar y escalar un sistema de diseño es mediante el solapamiento de tokens.

• Un token de diseño es un término de la industria que se refiere a valores reutilizables, diseñados para ayudar a mantener el diseño y el código sincronizados.
• El solapamiento es un método para organizar un sistema de diseño que permite que cualquier token de diseño herede el valor de otro token de diseño.

Las variables te permiten hacer precisamente esto.

Por ejemplo, digamos que la variable “brand-400” (que es uno de nuestros tokens de diseño) tiene un valor de #EAEA00. Queremos que la variable “icon-default” (otro token de diseño) sea un alias de brand-400, lo que significa que heredará cualquier valor que tenga brand-400.

Si el valor de brand-400 cambia alguna vez, entonces el ícono predeterminado seguirá su ejemplo, siempre y cuando siga vinculado a la definición de brand-400.

Los estilos no admiten solapamientos. En otras palabras, no se pueden aplicar a variables ni a otros estilos. Las variables pueden aplicarse a ambos.

Dado que las variables admiten solapamientos, esto ofrece un soporte más robusto para estructuras de tokens complejas y escalables. Te permiten definir valores primitivos que pueden fluir a través de otros tokens y elementos de tu sistema de diseño. También hace que actualizar y gestionar los sistemas de diseño sea más eficiente.

Por ejemplo, supongamos que creamos una variable que funciona como un token global y la utilizamos para definir otras variables en distintos niveles. Si el token global cambia, entonces todo lo que depende de él también cambia.

Si solo queremos que algunos tokens cambien, esta estructura nos permite elegir el token correcto en la fase anterior y cambiarlo sin tener que reelaborar manualmente todo en la fase posterior.

El solapamiento es compatible con todos los tipos de variables. Aprende cómo solapar variables.

Características compatibles

Variables de alcance

El alcance es totalmente compatible con variables numéricas, pero se ampliará a otros tipos de variables en el futuro.

Define el alcance de las variables para limitar las propiedades a las que se puede aplicar una variable.

Por ejemplo, puedes limitar una variable de color solo a los rellenos de trazo, de modo que no puedas aplicar la variable a ninguna otra propiedad de relleno. Esto te da un mayor control sobre dónde puede usarse y elimina las suposiciones al diseñar.

Aprende a definir el alcance de las variables.

Prototipo con variables

En el prototipado, las variables se usan para guardar los estados o las propiedades de los objetos. Las interacciones de prototipo se utilizan para modificar los valores de las variables, lo que puede cambiar la apariencia, el contenido o la visibilidad de los objetos en un diseño, todo en unos pocos marcos simples.

Aprende a utilizar variables en prototipos avanzados.

Sintaxis del código con variables

La sintaxis del código está actualmente en desarrollo y estará disponible pronto.

Cuando abras el modal de edición de una variable, verás una sección titulada Sintaxis del código. La sintaxis del código representa variables en el código con nombres de variables válidos. Esta información aparecerá en Dev Mode y ayudará a los diseñadores y desarrolladores a crear una experiencia de entrega fluida.

Aprende más sobre la sintaxis del código.

Reflexiones finales

Ya sea que elijas usar variables o estilos depende en gran medida de tus objetivos. Podrías enfocarte únicamente en las variables para aprovechar la escalabilidad de los tokens de diseño. O puede que descubras que apegarte a los estilos es adecuado para tus proyectos. ¡O quizás termines usando una combinación de ambos!

Los estilos seguirán siendo ‌una característica clave en Figma Design. A pesar de sus similitudes, las variables no reemplazan los estilos. Más bien, se suman al conjunto de características principales de Figma.