La diferencia entre variables y estilos
A medida que Figma amplía su conjunto de funciones con variables, quizás te preguntes: ¿cuál es la diferencia entre variables y estilos? ¿Cuándo deberías elegir uno sobre el otro? ¿Se están quedando obsoletos los estilos?
Después de todo, a simple vista parecen funcionar de manera similar:
- Ambos actúan como fuentes de información.
- Ambos se pueden publicar en las bibliotecas del equipo y reutilizarse en todos los diseños.
- Ambos admiten una gestión eficiente del sistema de diseño, ya que las actualizaciones de una variable o estilo provocarán actualizaciones en todos los diseños que los utilicen.
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 algunas diferencias clave entre estilos y variables: los tipos de valores que usan, su apariencia en el lienzo y el uso de modos.
Los estilos pueden almacenar diversas propiedades:
- Una propiedad con un único valor sin procesar, como un relleno sólido
#FFFFFF - Una propiedad con múltiples valores en bruto, como un gradiente de color
- Otros formatos, como modos de fusión, imágenes, GIF, vídeos
Los estilos están diseñados para contener una combinación de valores, donde todos los valores se expresan simultáneamente. Por ejemplo, puedes almacenar simultáneamente las propiedades de familia de fuente, tamaño de fuente y grosor de fuente en un solo estilo de texto. Cuando aplicas el estilo de texto a una capa de texto, todas las propiedades se aplicarán a la capa de texto simultáneamente.
En otro ejemplo, vamos a echar un vistazo a 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 a abajo. Un estilo de color es como mirar una «pila» de cartas desde arriba, donde cada carta es un relleno. Si el color en la parte superior es lo suficientemente transparente, puedes ver el color debajo. También puedes reorganizar manualmente el relleno para cambiar lo que ves desde arriba.
Las variables pueden almacenar valores individuales y en bruto. Por ejemplo, los valores en bruto pueden incluir rellenos sólidos como #FFFFFF, números como 16 o -32.75 y valores booleanos verdadero y falso.
Las variables están diseñadas para contener uno o más valores individuales y reutilizables, pero solo se puede expresar un valor a la vez. Cada valor corresponde a un modo variable diferente. Esto se aplica a todos los tipos de variables. A diferencia de los estilos, una variable es como un mazo de cartas en el que solo puedes visualizar una carta, y la carta que ves depende de su contexto.
Por ejemplo, supongamos que tenemos una colección de variables con modos claro y oscuro. Los aplicamos a varias capas en un marco y configuramos el marco en modo oscuro. Todas las capas con las variables expresará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.
Imagina que tenemos una variable numérica para el tamaño de fuente predeterminado. La variable tiene dos valores únicos y sin procesar:16para el modo móvil y18para el 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 de cualquier capa de texto usando este estilo de texto, porque utiliza una variable con múltiples modos.
Aprende a respaldar estilos con variables.
Conclusiones clave
- Una variable almacena valores en bruto reutilizables. Los estilos almacenan un conjunto de diferentes valores.
- Si una variable tiene múltiples valores (p. ej., modos), solo puede expresar un valor a la vez. La composición de valores de un estilo se expresa simultáneamente.
- Si quieres crear diferentes contextos para tus elementos de diseño (como los modos claro y oscuro), necesitarás usar variables y modos variables.
Escalabilidad y gestión
Una de las formas más poderosas de administrar y escalar un sistema de diseño es a través de la asignación de alias a los tokens.
- Un token de diseño es un término del sector que se refiere a valores reutilizables, destinados a contribuir a que el diseño y el código se mantengan sincronizados.
- Aliasing 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 en algún momento, el icono predeterminado seguirá su ejemplo, siempre y cuando siga vinculado a la definición de brand-400.
Los estilos no admiten asignación de alias. En otras palabras, no se pueden aplicar a variables ni a otros estilos, mientras que las variables pueden aplicarse a ambos.
Dado que las variables admiten asignación de alias, ofrecen un apoyo más sólido 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. Además, hacen que la actualización y gestión de los sistemas de diseño sea más eficiente.
Por ejemplo, supongamos que creamos una variable que actúa como un token global y la usamos para definir otras variables en diferentes niveles. Si el token global cambia, todo lo que depende de él también cambia.
Si solo queremos que cambien algunos tokens, esta estructura nos permite elegir el token correcto y cambiarlo sin tener que volver a trabajar manualmente en cascada.
La asignación de alias es compatible con todos los tipos de variables. Aprende a crear alias de variables.
Conclusiones:
- Las variables se pueden aplicar a estilos y otras variables, pero los estilos no se pueden aplicar a ninguno de ellos
- Las variables contribuyen a escalar un sistema de diseño en crecimiento y hacen que la gestión de un sistema de diseño sea más eficiente
Funciones compatibles
Variables de ámbito
La delimitación es totalmente compatible con las variables numéricas, pero se ampliará a otros tipos de variables en el futuro.
Delimita las variables para restringir a qué propiedades se pueden aplicar.
Por ejemplo, puedes limitar una variable de color únicamente a los rellenos de trazo, de modo que no podrás aplicar la variable a ninguna otra propiedad de relleno. Esto te proporciona un mejor control sobre dónde se puede utilizar y elimina las conjeturas en la fase de diseño.
Aprende a delimitar las variables.
Conclusiones:
- Dado que es posible delimitar las variables, pero no los estilos, usa variables si quieres aprovechar las funciones de la delimitación
- La delimitación está disponible actualmente para variables numéricas y se ampliará a otros tipos en el futuro
Prototipo con variables
En prototipos, las variables se utilizan para almacenar estados o propiedades de los objetos. Las interacciones de prototipos 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 sencillos.
Aprende a utilizar variables en prototipos avanzados.
Sintaxis de código con variables
La sintaxis de código está actualmente en desarrollo y pronto estará disponible.
Cuando abras el modal de edición de una variable, verás una sección titulada Sintaxis de código. La sintaxis de código representa las variables en el código utilizando 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 de código.
Conclusión: si quieres mejorar tu experiencia de entrega, puedes tener en cuenta las variables y la sintaxis de código
Reflexiones finales
La elección de variables o estilos depende en gran medida de tus objetivos. Puedes centrarte únicamente en las variables para aprovechar la escalabilidad de los tokens de diseño, o puede que te parezca que ceñirte a los estilos es lo más adecuado para tus proyectos. ¡Incluso puede que acabes 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 son un sustituto de los estilos, sino que se suman al conjunto de características principales de Figma.