Modos de variables

Antes de empezar

Quién puede utilizar esta función

Cualquier persona con planes de Educación, Profesional, Organización y Empresa puede crear y usar modos para las variables

La cantidad de modos que puedes crear por colección de variables depende de tu plan

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

Las variables nos permiten guardar valores reutilizables que se pueden aplicar a diversas propiedades de diseño, como el color, los valores de espaciado y las dimensiones.

Los modos de variables nos permiten representar diferentes contextos de nuestros diseños sin tener que crear múltiples marcos para cada contexto que necesitemos. Esto se debe a que las variables pueden contener diversos valores, organizados mediante modos de variable, en que cada modo almacena un valor por variable.

Por ejemplo, digamos que necesitamos crear versiones de modo claro y oscuro para un diseño:

Sin modos de variables, podríamos crear diseños para el modo claro (nuestro valor predeterminado), luego duplicar esos diseños y actualizar cada relleno de color necesario para el modo oscuro.

Si utilizamos modos de variables, crearíamos una colección de variables con dos conjuntos de valores —o modos—: uno para el modo claro como predeterminado y otro para el modo oscuro. Aplicaríamos las variables a un conjunto de diseños. Luego, podríamos cambiar los diseños entre los modos claro y oscuro rápidamente.

Si necesitamos un tercer tema de color, solo tenemos que crear un nuevo modo e ingresar valores para ese tema. No tendríamos que volver a aplicar los valores a nuestros diseños.

Existen muchos contextos que los modos de variables pueden ayudar a respaldar. Aquí tienes algunas ideas para comenzar:

• Crea temas de color accesibles, como el modo de alto contraste o diferentes temas para el daltonismo, utilizando variables de color.
• Busca el texto de la UI para ver cómo fluye el texto en los diseños mediante variables de cadena.
• Considera múltiples tamaños de dispositivos, como relojes, dispositivos móvil y de escritorio, para observar cómo los elementos responden a diferentes tamaños de espaciado y margen interior utilizando variables numéricas.

Crea un modo

1. Desmarca todos los objetos haciendo clic en cualquier parte del lienzo.
2. Abre el modal de variables haciendo clic en Abrir variables, en la sección Variables locales de la barra lateral derecha.
3. Abre la colección en la que quieres crear un nuevo modo.
4. Desde una variable existente, haz clic en Nuevo modo de variable a la derecha de los encabezados de columna. Figma duplica los valores de la primera columna a la nueva.

También puedes duplicar un modo: haz clic derecho en el encabezado del modo y selecciona Duplicar modo.

Cambia el modo predeterminado

En el modal de variables, el modo predeterminado de una colección de variables es la columna del modo en la extrema izquierda.

Cuando un objeto utiliza un objeto variable o cuando una página contiene objetos que utilizan variables, el objeto o la página empleará valores del modo predeterminado hasta que configures un modo específico explícitamente para el objeto o la página.

Cambia el modo predeterminado de una colección de variables reordenando los modos.

Para cambiar el modo predeterminado a otro:

1. En el modal Variables, abre la colección de variables en que se encuentra el modo de variable.
2. Encuentra el modo y elige una opción:
   • Haz clic con el botón derecho y selecciona Establecer como predeterminado.
   • O haz clic y arrastra el modo de variable a la columna situada más a la izquierda.

Si el modo de variables de un objeto o página se estableció en "Automático" o "Predeterminado" en lugar de un modo específico, heredarán el nuevo modo predeterminado.

Si un objeto o una página se configuraron explícitamente en un modo que era el predeterminado, permanecerán vinculados a ese, incluso cuando ya no sea el predeterminado.

Reordena los modos

Para reordenar los modos en una colección de variables, tienes dos opciones:

• Haz clic derecho y selecciona Mover columna a la derecha o Mover columna a la izquierda.
• O haz clic y arrastra la columna a la izquierda o a la derecha.

Si mueves una columna completamente a la izquierda en una colección de variables, esa columna se convierte en el modo predeterminado.

Cambia entre los modos

Cambia el modo de un objeto o página para que los diseños usen los valores de variables que quieras. Puedes cambiar los modos en:

• Capas
• Marcos
• Componentes y conjuntos de componentes
• Secciones
• Grupos
• Páginas

Alterna los modos en un objeto

Para las capas: Puedes cambiar sus modos si hay, al menos, una variable aplicada y la variable tiene múltiples modos.

Para grupos, marcos, componentes, conjuntos de componentes y secciones: Puedes cambiar sus modos si las capas anidadas tienen, al menos, una variable aplicada y la variable tiene múltiples modos.

Para cambiar el modo de un objeto:

1. Selecciona la capa, el grupo o el objeto contenedor.
2. En la sección Apariencia de la barra lateral derecha, haz clic en Aplicar modo de variable.
3. Pasa el cursor sobre una colección de variables y elige un modo. 

Una vez que especifiques un modo en un objeto, aparecerá una etiqueta con el ícono y el nombre del modo junto al nombre de la capa en el panel de capas de la barra lateral izquierda. Si hay varios modos, pasa el cursor sobre la etiqueta para ver una lista de modos.

 

Alterna modos en una página

Puedes cambiar de modo en las páginas si una colección local de variables contiene múltiples modos.

1. Deselecciona todo en el lienzo.
2. En la sección Página de la barra lateral derecha, haz clic en Aplicar modo de variable.
3. Pasa el cursor sobre una colección de variables y elige un modo.

Configura en modo automático (solo objetos)

Los objetos con variables tienen sus modos configurados en Automático por defecto. Esto significa que adoptan el modo de su contenedor principal.

• Si su contenedor principal también está configurado en automático, los objetos continúan ascendiendo en su jerarquía de capas hasta que alcanzan un contenedor con un modo especificado.
• Si ningún contenedor principal tiene un modo especificado, entonces los objetos recurren al modo predeterminado de la colección, que se muestra entre paréntesis.

Usa con instancias de variantes

Las variables booleanas, numéricas y de cadena se pueden asignar a instancias de componentes con propiedades de variantes.

Variables de cadena y numéricas

Las variables de cadena y numéricas se pueden asignar a instancias de variantes para que cambie a una variante diferente cuando tu modo cambia. Para hacer esto, el valor de la variable debe coincidir con los valores de la propiedad de variante.

1. Crea una variable de cadena o numérica con múltiples valores (o modos).
2. Configura los valores de la variable para que coincidan con los valores de la propiedad de variante.
3. Toma una instancia de componente de la variante y pasa el cursor sobre la propiedad de variante en la barra lateral derecha.
4. Haz clic en Asignar variable y elige la variable.

Ahora, la instancia cambiará a una variante distinta cada vez que el modo cambie.

Variables booleanas

Las variables booleanas se pueden asignar a propiedades variantes con valores verdadero y falso.

1. Crea una variable booleana con varios valores (o modos).
2. Crea dos instancias de variantes dentro del mismo conjunto de componentes.
3. Configura el valor de una variante en Verdadero y el de la otra a Falso.
4. Toma una instancia de componente de una de las variantes y pasa el cursor sobre la propiedad de variante en la barra lateral derecha.
5. Haz clic en Asignar variable y elige la variable booleana.

Aprende a usar variantes y variables en prototipos →

Instancias anidadas

También puedes vincular variables a las propiedades de variantes en instancias anidadas.

1. Crea un componente con una instancia anidada de otro componente.
2. Crea una variable de cadena, numérica o booleana con múltiples valores (o modos).
3. Configura los valores de la variable para que coincidan con los valores de las propiedades del componente de instancia anidado.
4. Crea una instancia del componente.
5. Asigna la variable a la propiedad variante de la instancia anidada.

Ahora, la instancia anidada cambiará a una variante diferente cada vez que el modo cambie.

Conflictos de modo

Cualquier modo con conflictos mostrará un ícono de información al lado en el selector de modos. Los conflictos ocurren cuando los objetos en un archivo utilizan diferentes versiones de la misma variable.

Si seleccionas un modo con un conflicto, el modo solo se aplicará a las capas que puedan renderizarlo. La capa debe estar usando una versión de la variable que incluya ese modo.

Para resolver los modos en conflicto:

1. Abre el archivo en que se encuentra la variable principal y publícalo en las bibliotecas del equipo. 
2. Revisa y acepta las actualizaciones del modal de la biblioteca del archivo en que ocurren los conflictos.

Ten en cuenta que solo quienes tienen acceso de puede editar a un archivo pueden realizar ediciones, publicar, y revisar y aceptar actualizaciones de la biblioteca en el archivo. 

Evita conflictos de modo

Los conflictos de modo pueden ocurrir si se elimina o se agrega un modo a la variable, y las actualizaciones no se han transferido a un archivo u objeto. 

A continuación, se presentan algunas formas en que estos conflictos pueden suceder y lo que puedes hacer al respecto.