Descripción general de las variables, las colecciones y los modos

Antes de empezar

Quién puede utilizar esta función

Cualquier persona con cualquier plan puede crear y utilizar variables.

El número de modos que puedes crear por colección depende del tipo de plan que tengas.

¿Buscas más recursos sobre variables? Consulta nuestra guía sobre variables →

Las variables son valores sin procesar, como colores, números y cadenas, cuyo valor puede cambiar en función del contexto de un diseño, como los modos claro y oscuro, o bien los modos para dispositivo móvil o para escritorio.

Como ocurre con los estilos y componentes, las variables también pueden publicarse en bibliotecas de equipos. Al actualizar el valor de una variable, puedes actualizar los diseños de los archivos en consecuencia. De esta forma, podrás crear diseños coherentes en los proyectos y conseguir que los sistemas de diseño se actualicen de forma más eficiente.

Tipos de variables

Hay cuatro tipos de variables. Cada uno de ellos puede aplicarse a propiedades y elementos concretos.

Tipo de variable	Se define mediante
De color	Rellenos sólidos
De número	Valores numéricos
De cadena	Cadenas de texto
Booleana	Valores true y false

Variable de color

En las variables de color se utilizan valores de colores sólidos, como #000000 o #FFCD29.

Resultan útiles para gestionar los temas, como los modos oscuro y claro. También te permiten organizar la paleta de colores de tu marca. Si tu sistema de diseño es complejo y deseas implementar tokens de diseño, puedes utilizar referencias cruzadas con las variables de color de alias para ello.

Variable de número

En las variables de número se utilizan valores numéricos como 24 o -8. Pueden utilizarse números enteros o cualquier número decimal hasta las centésimas, como 12,75.

Resultan útiles para gestionar diseños flexibles y propiedades de texto que cambian de un idioma a otro. También puedes numerar las variables de los estilos de texto para contar con estilos predefinidos reutilizables y no tener que memorizar las combinaciones de propiedades que van juntas.

Hay determinadas propiedades que admiten menos números. Consulta la lista desplegable siguiente para obtener más información.

Variable de cadena

Las variables de cadena utilizan una secuencia de caracteres como Inter, Hello world! o 94102. Resultan útiles para cambiar de idioma de un diseño localizado a otro, combinarse con otras variables para crear estilos de texto y cambiar variantes de componentes durante la creación de prototipos.

Variable booleana

Las variables booleanas utilizan valores true y false. Están recomendadas para ocultar y mostrar capas de contextos específicos de tus diseños.

Tokens y referencias cruzadas

Una variable puede hacer referencia a otra. Es decir, puedes aplicar una variable a otra variable. A esto se le conoce como «referencias cruzadas» para que puedas implementar tokens de diseño.

Cualquier variable puede hacer referencia a otra variable del mismo tipo. Por ejemplo, las variables de color pueden hacer referencia a otras variables de color. Las variables de texto pueden hacer referencia a otras variables de texto.

Más información sobre cómo crear referencias cruzadas de variables →

Colecciones y grupos

Se utilizan tanto colecciones como grupos para organizar las variables y encontrarlas más fácilmente.

Una colección es un conjunto de variables y modos. Las colecciones pueden utilizarse para agrupar variables relacionadas. Por ejemplo, utiliza una colección para encontrar texto en distintos idiomas y otra para los valores espaciales.

Puedes seguir organizando variables si las añades a grupos de una colección. Por ejemplo, utiliza un grupo para los colores usados en el texto y otro para los usados en los trazos.

Modos de variables

Un modo es una lista de valores para una variable de una colección, donde se almacena un valor por variable. Con los modos también se representan los distintos contextos de nuestros diseños.

Si una variable incluye varias definiciones, cada una de ellas estará asociada a un modo. Cuando se aplica la variable a la propiedad de una capa, la capa expresa el valor en función del modo en que se encuentre en ese momento, lo que nos permite cambiar rápidamente de un contexto a otro de nuestros diseños.

Por ejemplo, podríamos tener una variable de color donde se almacenen dos valores de color: uno azul en un modo y otro blanco en otro modo. Aplicamos esta variable a una capa de texto, que aparecerá en color azul o en blanco, en función del modo en que se encuentre.

A continuación se muestran algunos métodos para cambiar de contexto:

• Distintos temas de color, como los modos claro y oscuro.
• Distintos idiomas para ver cómo funciona la copia en los diseños.
• Tamaños de dispositivos para ver el aspecto de los elementos con distintos espaciados y rellenos.

Más información sobre cómo cambiar los contextos de diseño con modos de variables →

Consideraciones a tener en cuenta

Estilos y variables

Tanto las variables como los estilos actúan como fuente de información fiable y pueden reutilizarse en los diseños para conseguir que sean eficientes y coherentes.

Al decidir si utilizar una variable o un estilo, ten en cuenta estos factores:

• Un estilo está recomendado para crear un grupo de valores. Además, los estilos no pueden utilizarse en otros estilos o variables.
• Las variables pueden utilizarse para crear varios modos, como los modos claros y oscuros. Asimismo, las variables pueden aplicarse a estilos y a otras variables, para permitir implementar tokens de diseño.

Descubre la diferencia entre los estilos y las variables →