Descripción general de variables, colecciones y modos

Antes de empezar

Quién puede utilizar esta función

Cualquier persona en cualquier plan puede crear y utilizar variables

La cantidad de modos que puede crear por colección depende de su plan

¿Busca más recursos sobre variables? Compruebe nuestra guía de variables→

Las variables son valores crudos (como color, números, cadenas) que pueden cambiar su valor según el contexto de un diseño, como el modo claro u oscuro, o el modo móvil o de escritorio.

De la misma forma que los estilos y los componentes, las variables pueden publicarse en las bibliotecas de equipos. Cuando actualiza el valor de una variable, puede actualizar los diseños en todos los archivos respectivamente. Esto ayuda a crear diseños coherentes en cada proyecto y hace que actualizar los sistemas de diseño sea más eficiente.

Tipos de variables

Existen cuatro tipos de variables. Cada uno se puede aplicar a propiedades y elementos específicos.

Tipo de variable	Definido por
Color	Rellenos sólidos
Número	Valores numéricos
Cadena	Cadenas de texto
Booleano	Valores verdadero o falso

Variable de color

Las variables de color utilizan valores de color sólido, como #000000 o #FFCD29.

Sirven para diseñar temas, como el modo oscuro o claro. También lo ayudan a organizar la paleta de colores de su marca. Si tiene un sistema de diseño complejo y desea implementar tokens de diseño, puede solapar las variables de color para hacerlo.

Variable numérica

Las variables numéricas utilizan valores numéricos como 24 o -8. Puede utilizar números enteros o decimales hasta los centésimos, como 12,75.

Sirven para abordar diseños con capacidad de respuesta y propiedades de texto variables entre diferentes idiomas. También puede tener variables numéricas dentro de los estilos de texto para tener estilos reutilizables y predefinidos y así evitar tener que memorizar qué combinación de propiedades van juntas.

Ciertas propiedades tienen un rango de números compatibles menor. Compruebe el botón a continuación para obtener más información.

Variable de cadena

Las variables de cadena utilizan una secuencia de caracteres como Inter, ¡Hola, mundo! o 94102. Sirven para cambiar de idioma entre diferentes diseños localizados, combinarse con otras variables para crear estilos de texto e intercambiar variantes de un componente al momento de diseñar prototipos.

Variable booleana

Las variables booleanas utilizan los valores verdadero y falso. Sirven para mostrar y esconder capas según el contexto específico del diseño.

Tokens y solapamientos

Una variable puede hacer referencia a otra variable. Esto quiere decir que puede aplicar una variable a otra variable. También conocido como "solapamiento", le brinda la capacidad de 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.

Obtenga más información sobre cómo solapar variables→

Colecciones y grupos

Tanto las colecciones como los grupos se utilizan para organizar las variables y hacer que sean más fáciles de encontrar.

Una colección es una serie de variables y modos. Las colecciones se pueden usar para organizar variables relacionadas en un mismo lugar. Por ejemplo, se puede utilizar una colección para localizar texto en diferentes idiomas, y otra colección para los valores espaciales.

También puede organizar variables agregándolas a grupos dentro de una colección. Por ejemplo, utilice un grupo para los colores utilizados para el texto, y otro para los colores utilizados para los trazos.

Modos variables

Un modo es una lista de valores para una variable en una colección, que almacena un valor por variable. Los modos también representan diferentes contextos de los diseños.

Si una variable tiene varias definiciones, cada definición se asocia con un modo. Cuando la variable se aplica a la propiedad de una capa, la capa expresa el valor según el modo en el que se encuentra, lo que permite intercambiar rápidamente los diseños según el contexto.

Por ejemplo, podríamos tener una variable de color que almacene dos valores de color: un color azul en un modo y un color blanco en otro modo. Si aplicáramos esta variable a una capa de texto, aparecerá en azul o blanco según el modo en que esté configurada.

A continuación, algunas formas en las que puede utilizar los modos para intercambiar contextos:

• Temas de colores diferentes, como el modo claro u oscuro
• Diferentes idiomas para ver cómo se ve el texto sobre el diseño
• Tamaños de dispositivos para observar cómo se ven los elementos con diferentes espaciados y rellenos

Obtenga más información sobre cómo intercambiar contextos de diseño con los modos variables →

Consideraciones

Estilos y variables

Tanto las variables como los estilos son una fuente de verdad y pueden reutilizarse en todos los diseños, para ser eficientes y coherentes.

Al decidir si utilizar una variable o un estilo, tenga en consideración lo siguiente:

• Los estilos sirven para crear un compuesto de valores. Además, los estilos no se pueden utilizar en otros estilos o variables.
• Las variables se pueden utilizar para crear varios modos, como el modo claro y oscuro. Además, las variables pueden aplicarse a estilos y otras variables, lo que permite implementar tokens de diseño.

Obtenga más información sobre la diferencia entre los estilos y las variables →