Modos para variables

Antes de empezar

Quién puede utilizar esta función

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

El número de modos que puedes crear por colección de variables depende de tu plan

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

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

Los modos 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 múltiples valores, organizados mediante modos de variable, donde 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 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 usamos modos 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 rápidamente los diseños entre los modos claro y oscuro.

Si necesitamos un tercer tema de color, todo lo que tenemos que hacer es crear un nuevo modo e introducir valores para ese tema. No tendríamos que aplicar los valores a nuestros diseños de nuevo.

Existen muchos contextos en los que los modos variables pueden ayudarte. Aquí tienes algunas ideas para empezar:

• Crea temas de color accesibles, como el modo de alto contraste o diferentes temas para el daltonismo, utilizando variables de color.
• Localiza la copia de la IU para ver cómo fluye la copia en los diseños usando variables de cadena
• Ten en cuenta varios tamaños de dispositivos, como reloj, móvil y escritorio, para ver cómo responden los elementos a los diferentes tamaños de espaciado y relleno utilizando variables numéricas

Crear un modo

1. Anula la selección de 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 Modo variable nuevo a la derecha de los encabezados de columna. Figma duplica los valores de la primera columna a la nueva columna.

También puedes duplicar un modo haciendo clic con el botón derecho en el encabezado del modo y seleccionando Duplicar modo.

Cambiar el modo predeterminado

En el modal de variables, el modo predeterminado de una colección de variables es la columna del modo más a la izquierda.

Cuando un objeto utiliza un objeto variable o cuando una página contiene objetos que utilizan variables, el objeto o la página utilizará los valores del modo predeterminado hasta que tú establezcas explícitamente un modo específico 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 diferente:

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

Si el modo variable de un objeto o de una página se estableció como «Auto» o «Predeterminado» en lugar de un modo específico, heredarán el nuevo modo predeterminado.

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

Reordenar modos

Para reordenar los modos en una colección de variables, puedes:

• Hacer clic con el botón derecho y seleccionar Mover columna a la derecha o Mover columna a la izquierda
• O hacer clic y arrastrar la columna a la izquierda o a la derecha

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

Cambiar entre modos

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

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

Cambiar de modo 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 varios modos.

Para cambiar el modo de un objeto:

1. Selecciona la capa, el grupo o el objeto contenedor.
2. Desde la sección Apariencia de la barra lateral derecha, haz clic en Aplicar modo 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 icono 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.

 

Cambiar de modo en una página

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

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

Establecer como modo auto (solo objetos)

Los objetos con variables tienen su modo configurado como auto de forma predeterminada. Esto significa que adoptan el modo de tu contenedor principal.

• Si su contenedor principal también está configurado como auto, 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, los objetos recurrirán al modo predeterminado de la colección, mostrado entre paréntesis.

Utilizar con instancias variantes

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

Variables de cadena y número

Las variables de cadena y número se pueden asignar a instancias de variante para que cambie a una variante diferente cuando cambie tu modo. Para ello, el valor de la variable debe coincidir con los valores de la propiedad 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 variante.
3. Toma una instancia de componente de la variante y pasa el cursor sobre la propiedad de la variante en la barra lateral derecha.
4. Haz clic en Asignar variable y elige la variable.

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

Variables booleanas

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

1. Crea una variable booleana con múltiples valores (o modos).
2. Crea dos instancias de variantes dentro del mismo conjunto de componentes.
3. Configura el valor de una variante como true y el de la otra como false.
4. Toma una instancia de componente de una de las variantes y pasa el cursor sobre la propiedad de la variante en la barra lateral derecha.
5. Haz clic en Asignar variable y selecciona la variable booleana.

Aprende a usar variantes y variables en la creación de 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 cadena, un número o una variable booleana con varios 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 cambies el modo.

Conflictos de modo

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

Si seleccionas un modo con un conflicto, el modo solo se aplica a las capas que pueden renderizarlo. La capa debe utilizar una versión de la variable que contenga ese modo.

Para resolver los modos en conflicto:

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

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

Evitar conflictos de modo

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

A continuación se presentan un par de formas en las que estos conflictos pueden ocurrir y qué puedes hacer al respecto.