Utilizar variables en prototipos – Figma Learn - Centro de ayuda

Antes de empezar

Quién puede utilizar esta función

Está disponible en cualquier plan de pago.

Cualquier persona con acceso de tipo can edit a un archivo puede crear prototipos.

En Figma, las variables son valores almacenados que representan atributos de diseño o estados guardados. Puede ser tipos de valor de cadena, número, color o booleano.

Los valores de las variables pueden establecerse y modificarse con acciones de creación de prototipos, lo que permite crear prototipos inmersivos que cambian de forma dinámica en función de lo que seleccione el usuario, con muy pocos marcos e interacciones. Esto quiere decir que puedes utilizar acciones de prototipos para:

Actualizar el contenido de texto con variables de cadena.
Cambiar las dimensiones de objetos, el radio de redondeo o las propiedades de diseño automático con variables de número.
Alternar la visibilidad de las capas con variables booleanas.

Para empezar a utilizar variables en prototipos, configura las variables y, a continuación, utiliza la acción Set variable para cambiar o modificar los valores de sus variables.

Cuando ya sepas cómo utilizar variables y prototipos conjuntamente, prueba algunas funciones más avanzadas para sacar aún más partido a estos elementos:

Expresiones: manipula las variables con operaciones básicas, lo que te permite crear prototipos más avanzados con valores flexibles.
Varias acciones y condiciones: utiliza sentencias if/else para comprobar si se cumple una condición antes de realizar acciones y agrupar una cantidad ilimitada de acciones en un solo activador.

Encuentra más información sobre las variables en Figma.

Pruébalo

¿Quieres practicar aún más? Consulta el archivo del área de pruebas de creación avanzada de prototipos.

¿Quieres ver más ejemplos de cómo utilizar variables en prototipos? Consulta algunos ejemplos relativos a la creación avanzada de prototipos.

Configurar variables

Antes de crear prototipos con variables, tendrás que:

Crear tus variables: aprende a crear y organizar colecciones de variables.
Aplicar variables: aprende a aplicar variables a contenidos de texto, dimensiones de objetos, visibilidad de capas y mucho más.

Establecer valores de variables

Cuando hayas creado y aplicado variables en el diseño, podrás empezar a utilizarlas con prototipos.

Cada una de las interacciones de prototipo incluye un activador (que provoca que el prototipo avance), así como una o varias acciones adicionales (que se producen como consecuencia del activador).

Con la acción Set variable puedes establecer o modificar el valor de una variable como resultado de un activador de prototipo.

Para utilizar la acción Set variable en una interacción de prototipo:

Crea una interacción de prototipo.
Accede al modal Interacción y selecciona un desencadenante en el menú desplegable.
En el menú desplegable Acciones, selecciona Establecer variable.
En el menú desplegable Objetivo, selecciona la variable para la que deseas establecer un nuevo valor.
En el campo Valor, indica un nuevo valor para la variable. El tipo del nuevo valor debe coincidir con el tipo de variable que estás cambiando. Por ejemplo, si has seleccionado una variable de número, el nuevo valor también debe ser un número.
- String values: introduce un literal de cadena de texto (entre comillas), o bien elige cualquier variable de cada en el panel de selección.
- Number values: introduce cualquier valor numérico, o bien elige cualquier variable de número en el panel de selección.
- Boolean values: introduce true o false, o bien elige cualquier variable booleana en el panel de selección.
- Color values: introduce cualquier código hexadecimal, o bien elige uno en el selector de color.
Reproduce el prototipo para probar la interacción.

Un diseño con dos marcos. Se establece una acción de prototipo en una imagen en el primer marco. Al hacer clic en la imagen, la variable profileName actualizará su valor y el prototipo pasará al siguiente marco.

Nota:

¿Tienen tus variables múltiples modos? Encuentra más información sobre cómo establecer los valores de las variables en valores de modo específicos.

Consejo:

Con las expresiones podrás manipular las variables con operaciones. Por ejemplo, realizar operaciones matemáticas básicas en variables de número, combinar distintas variables de cadena o utilizar expresiones booleanas.

Pruébalo

Vamos a crear una colección de variables denominada «Shapes», que incluirá una variable de cadena que represente el nombre de la forma.

Anula la selección de todos los elementos del lienzo y busca la sección Local variables en la barra lateral derecha y haz clic en Open variables.
Haz clic en Create variable y selecciona String.
En la columna Name, introduce «shapeName».
En la columna Value, introduce «circle».

Ahora ya puedes aplicar la variable shapeName al diseño. Para este ejemplo, hemos creado un diseño sencillo que incluye un marco con dos formas (un círculo y un cuadrado) y dos capas de texto. Queremos enlazar la variable shapeName a la capa de texto inferior para que cambie en función de la forma seleccionada.

Vuelve a crear el diseño mostrado abajo. Añade un objeto de elipse, un objeto de rectángulo y dos capas de texto a un marco. Introduce «You picked:» como contenido de la primera capa de texto.
Haz clic para seleccionar la capa de texto inferior del marco.
En la pestaña Design de la barra lateral derecha, busca la sección Text y haz clic en Apply variable.
Selecciona la variable shapeName en el panel de selección de variables para aplicarla al contenido de texto.

Ahora vamos a añadir una interacción con una acción Establecer variable.

Selecciona el objeto elipse.
En la barra lateral derecha, cambia a la pestaña Prototype. En la sección Interactions, haz clic en el signo más para añadir una interacción nueva.
En el modal Interacción, crea una interacción con un desencadenante Al pulsar/Al clicar y la acción Establecer variable.
Selecciona la variable shapeName del menú desplegable Objetivo. En el campo Valor, establece el nuevo valor como «círculo».
Repite los pasos del 1 al 4 para el objeto rectángulo, pero en esta ocasión, establece la variable shapeName en «square».

Se selecciona un objeto circular en el marco, con el modal de Interacción abierto. Se establece una interacción: el desencadenante es Al pulsar, la acción es Establecer variable, el objetivo es shapeName y el valor es círculo.

Ahora, estás listo para reproducir el prototipo y probarlo. Cuando hagas clic en cada objeto de forma, la capa de texto se actualizará automáticamente en función del nuevo valor de la variable. El prototipo se está reproduciendo. Cuando se selecciona el objeto elipse, la capa de texto inferior se actualiza a círculo. Cuando se selecciona el objeto cuadrado, la capa de texto inferior se actualiza a cuadrado.

Crear prototipos con variables y componentes

Una vez que hayas aprendido los conceptos básicos, puedes comenzar a utilizar variables y componentes conjuntamente en tus prototipos.

Aplica variables a los componentes para que se actualicen automáticamente cuando cambies el valor de una variable en un prototipo. Cualquier cambio en el valor de una variable también actualiza los demás elementos vinculados a esa misma variable.

El valor de una variable puede modificarse mediante:

Usando la acción Set variable
Usar la acción Cambiar a en un componente interactivo
Usar la acción Configurar modo variable

Ejemplo

Un conjunto de componentes de botón interactivo tiene un estado predeterminado y un estado pasar el cursor. El componente utiliza la acción Cambiar a, de modo que, al pasar el ratón por encima de la variante predeterminada, cambia a la variante pasar el cursor (y viceversa).

Se aplica una variable booleana hoverState tanto a una instancia de la variante como a la visibilidad de una capa de superposición separada.

Cuando pasas el cursor sobre la variante predeterminada en tu prototipo:

La instancia se actualiza a la variante pasar el cursor
La variable booleana hoverState se actualiza de verdadera a falsa
La capa de imagen se vuelve visible

¿Te gustaría practicar con un ejemplo similar? Consulta la sección «Pruébalo» a continuación.

El lugar donde se aplica la variable determina el alcance de los cambios en el prototipo.

Aplicar la variable a:	Al crear prototipos:
Propiedades de variantes de instancias de componentes	Modifica el valor de la variable para actualizar la variante de la instancia.
Propiedades de los componentes	Cambia el valor de la variable para actualizar todas las instancias del componente.

Encuentra más información sobre cómo aplicar variables a las propiedades de componentes y variantes.

Pruébalo: Ejemplo 1

Crear un conjunto de componentes interactivos.
1. Crea un componente de botón que tenga una propiedad de variante «clicado» con valores «verdadero» y «falso».
2. Añade una interacción de prototipo en la variante «falso», utilizando el disparador Al hacer clic y la acción Cambiar a. Ahora, cuando se haga clic en la variante false, cambiará a la variante true».
Coloca una instancia de una variante del conjunto de componentes interactivos en un marco.
1. Añadir la variante «falso» a un marco.
Asigna una variable a la instancia del componente interactivo. El valor de la variable debe coincidir con un valor de propiedad variante.
1. Crea una variable booleana circleVisibility con un valor predeterminado de falso.
2. Selecciona la instancia del botón.
3. Desde la barra lateral derecha, pasa el ratón sobre la propiedad de variante seleccionada.
4. Selecciona Aplicar variable.
5. Haz clic para seleccionar la variable circleVisibility para enlazarla a la propiedad.
Asigna la misma variable a otra capa del diseño.
1. Añadir un objeto de elipse al marco.
2. Desde la sección Apariencia de la barra lateral derecha, haz clic con el botón derecho en el icono Ocultar.
3. Selecciona la variable circleVisibility para aplicar la variable booleana a la visibilidad de la capa de elipse.
Reproduce tu prototipo para probar la interacción. Cuando se activa la interacción y se modifica el componente, el valor de la variable también se modifica. Esto quiere decir que si tienes asociada esa misma variable a cualquier otro valor, estos valores también se actualizarán.

Pruébalo: Ejemplo 2

Crear un conjunto de componentes con al menos dos variantes.
1. Crea un conjunto de componentes que tenga una propiedad de variante «forma» con los valores «círculo» y «cuadrado».
Coloca una instancia de una variante en un marco.
Asigna una variable a la instancia. El valor de la variable debe coincidir con un valor de propiedad variante.
1. Crea una variable de cadena shapeType con el valor predeterminado «círculo».
2. Haz clic en la instancia para seleccionarla.
3. En la barra lateral derecha, pasa el ratón por la parte derecha de una propiedad de variante y haz clic en Asignar variable.
4. Selecciona la variable que deseas asociar a la propiedad.
Crea una interacción en cualquier objeto dentro del marco que utilice la acción Establecer variable. Modifica el valor de la variable para que coincida con el valor de la propiedad de la variante no utilizada.
1. Añade una interacción de prototipo a un objeto, usando el desencadenante Al clicar/Al pulsar y la acción Establecer variable. Establece el valor de la variable shapeType a «cuadrado».
Reproduce tu prototipo para probar la interacción. Cuando se activa la interacción y se cambia la variable, la variante también se actualiza.