Utilizar variables en los prototipos – Figma Learn - Centro de ayuda

Antes de empezar

Quién puede usar esta función

Cualquier persona con acceso de edición a un archivo puede crear prototipos.

En Figma, las variables son valores almacenados que representan atributos o estados guardados de los diseños. Los tipos de valores de cadena, numéricos, de color o booleanos.

Puede configurar y modificar los valores de las variables con las acciones de prototipado, lo que le permite crear prototipos inmersivos que cambian de forma dinámica según la selección del usuario, utilizando solo unos simples marcos e interacciones. Esto significa que puede utilizar acciones de prototipado para las siguientes acciones:

Actualizar el contenido de los textos con variables de cadena
Cambiar las dimensiones, el radio de las esquinas o las propiedades del diseño automático de un objeto con variables numéricas
Alternar la visibilidad de las capas con variables booleanas

Para comenzar a utilizar variables en los prototipos, configure las variables, luego utilice la acción Configurar variable para cambiar o modificar los valores de las variables.

Cuando se acostumbre a utilizar variables y prototipos, pruebe algunas de las funciones más avanzadas para continuar extendiendo sus capacidades:

Expresiones: manipular las variables con operaciones básicas para desarrollar prototipos más avanzados con valores flexibles
Varias acciones y condicionales: utilizar sentencias if/else para comprobar si una condición se cumple antes de realizar una acción y apilar una cantidad ilimitada de acciones sobre un único disparador

Aprende más sobre variables en Figma.

Probar

¿Quieres practicar aún más? Consulta el archivo de área de pruebas de prototipado avanzado.

¿Buscas más ejemplos de cómo puedes usar variables en prototipos? Consulta algunos ejemplos avanzados de prototipado.

Configurar las variables

Antes de hacer prototipos con variables, debes:

Crear las variables: obtén más información sobre cómo crear y organizar colecciones de variables.
Aplicar las variables: obtén más información sobre cómo aplicar las variables al contenido de los textos, las dimensiones de los objetos, la visibilidad de las capas y más.

Configurar los valores de las variables

Una vez que hayas creado y aplicado las variables en tu diseño, puedes comenzar a utilizarlas con prototipos.

Cada prototipo de interacción tiene un disparador (lo que hace que el prototipo avance) y una o más acciones (lo que pasa como resultado del disparador).

La acción Configurar variable te permite configurar o modificar el valor de una variable como resultado del disparador de un prototipo.

Para utilizar la acción Configurar variable en un prototipo de interacción:

Crea un prototipo de interacción.
Dirígete al panel de Detalles de la interacción y selecciona un disparador del menú desplegable.
Desde el menú desplegable Acciones, selecciona Configurar variable.
En el menú desplegable Objetivo, selecciona la variable para la que deseas establecer un nuevo valor.
En el campo Valor, ingresa un nuevo valor para la variable. El nuevo tipo de valor debe coincidir con el tipo de variable que estás cambiando. Por ejemplo, si seleccionaste una variable numérica, el nuevo valor también debe ser un número.
- Valores de cadena: ingresa cualquier cadena de texto literal (entre comillas) o selecciona cualquier variable de cadena del panel de selección
- Valores numéricos: ingresa cualquier valor numérico, o selecciona cualquier variable numérica del panel de selección
- Valores booleanos: ingresa verdadero o falso, o selecciona cualquier variable booleana del panel de selección
- Valores de color: ingresa cualquier código hexadecimal, o selecciona un código hexadecimal del selector de color
Reproduce el prototipo para probar la interacción.

Un diseño con dos marcos. Se establece una acción prototipo en una imagen en el primer fotograma. Cuando se haga clic en la imagen, la variable profileName actualizará su valor y el prototipo navegará al siguiente marco.

Nota:

¿Tus variables tienen múltiples modos? Aprende más sobre cómo establecer valores de variables en valores de modo específicos.

Consejo:

Utiliza expresiones para manipular las variables con operaciones. Por ejemplo, puedes realizar cálculos matemáticos básicos sobre las variables numéricas, combinar varias variables de cadena o utilizar expresiones booleanas.

Probar

Creemos una colección de variables llamada "Formas". Esta colección incluirá una variable de cadena que representa el nombre de la forma.

Deselecciona todos los elementos en el lienzo, luego busca la sección Variables locales en la barra lateral derecha y haz clic en Abrir variables.
Haz clic en Crear variable y selecciona Cadena.
En la columna de Nombre, ingresa "NombreDeForma".
En la columna de Valor, ingresa "círculo".

Ahora, puedes aplicar la variable NombreDeForma a tu diseño. Para este ejemplo, hemos creado un diseño simple que incluye un marco con dos formas (un círculo y un cuadrado) y dos capas de texto. Queremos vincular la variable NombreDeForma a la capa de texto inferior para que cambie según qué forma esté seleccionada.

Recrea el diseño que se muestra a continuación. Agrega un objeto con forma de elipse, un objeto con forma de rectángulo y dos capas de texto en un marco. Ingresa "Seleccionaste:" como el contenido para la primera capa de texto.
Haz clic para seleccionar la capa de texto inferior del marco.
Desde la pestaña Diseño en la barra lateral derecha, busca la sección Texto y haz clic en Aplicar variable.
Selecciona la variable NombreDeForma del panel de selección de variables para aplicarla al contenido del texto.

Ahora, agreguemos una interacción con la acción Configurar variable.

Selecciona el objeto con forma de elipse.
Desde la barra lateral derecha, selecciona la pestaña Prototipo. En la sección Interacciones, haz clic en el signo más para agregar una nueva interacción.
En el panel de Detalles de la interacción, crea una interacción con un disparador Al tocar/hacer clic y configura la acción Configurar variable.
Selecciona la variable NombreDeForma del menú desplegable Objetivo. En el campo valor, establece el nuevo valor en “círculo”.
Repite los pasos 1 a 4 para el objeto con forma de rectángulo. Esta vez, configura la variable NombreDeForma como "cuadrado".

Un objeto circular está seleccionado en el marco, con el modal de Interacción abierto. Se establece una interacción: el disparador es al tocar, la acción es establecer variable, el objetivo es shapeName, y el valor es círculo.

Ahora, estás listo para probar tu prototipo para testearlo. Cuando haces clic en cada objeto de forma, la capa de texto se actualizará automáticamente según el nuevo valor de la variable. El prototipo está siendo reproducido. 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.

Prototipo con variables y componentes

Una vez que hayas aprendido lo básico, puedes comenzar a usar variables y componentes juntos en tus prototipos.

Aplica variables a los componentes para actualizar automáticamente tu componente cuando cambies el valor de una variable en un prototipo. Cualquier cambio en el valor de la variable también actualiza otros elementos vinculados a esa misma variable.

El valor de una variable puede cambiarse de la siguiente manera:

Usando la acción Establecer variable
Usando la acción Cambiar a en un componente interactivo
Usando la acción Establecer modo de variables

Ejemplo

Un conjunto de componentes de botón interactivo tiene un estado predeterminado y un estado hover. El componente utiliza la acción Cambiar a, de modo que cuando pasas el cursor sobre la variante predeterminado, cambia a la variante hover (y viceversa).

Una variable booleana hoverState se aplica 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 predeterminado en tu prototipo:

La instancia se actualiza a la variante hover.
La variable booleana hoverState se actualiza de falso a verdadero.
La capa de imagen se hace visible.

¿Quieres practicar con un ejemplo similar? Consulta la sección "Pruébalo" a continuación.

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

Aplicar variable a:	Al prototipar:
Propiedades de variante de las instancias de componentes	Cambia 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.

Aprende más sobre cómo aplicar variables a propiedades de componentes y variantes.

Pruébalo: Ejemplo 1

Crea un conjunto de componentes interactivos.
1. Crea un componente de botón que tenga una propiedad de variante “clickeado” con valores “verdadero” y “falso”.
2. Agrega una interacción de prototipo en la variante "falso", usando el disparador Al hacer clic y la acción Cambiar a. Ahora, cuando se haga clic en la variante falsa, se cambiará a la variante verdadera.
Coloca una instancia de una variante del conjunto del componente interactivo en un marco.
1. Agrega la variante falsa 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 cursor sobre la propiedad de variante seleccionada.
4. Selecciona Aplicar variable.
5. Haz clic para seleccionar la variable circleVisibility y enlazarla con la propiedad.
Asigna la misma variable a otra capa en tu diseño.
1. Agrega un objeto elipse al marco.
2. Desde la sección de Apariencia de la barra lateral derecha, haz clic derecho en el ícono de Ocultar.
3. Selecciona la variable circleVisibility para aplicar la variable booleana a la visibilidad de la capa de elipse.
Reproduce el prototipo para probar la interacción. Cuando se activa el disparador de la interacción y se cambia el componente, el valor de la variable también cambia. Esto significa que si tienes esa misma variable asignada a otros valores, esos también se actualizarán.

Pruébalo: Ejemplo 2

Crea un conjunto de componentes con al menos dos variantes.
1. Crea un conjunto de componentes que tenga una propiedad de variante de “forma” con 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 un valor predeterminado de "círculo".
2. Haz clic en la instancia para seleccionarla.
3. Desde la barra lateral derecha, coloca el puntero a la derecha de la propiedad de la variable y haz clic en Asignar variable.
4. Selecciona la variable que te gustaría vincular a la propiedad.
Crea una interacción en cualquier objeto dentro del marco que use la acción Establecer variable. Cambia el valor de la variable para que coincida con el valor de la propiedad de variante no utilizada.
1. Agrega una interacción de prototipo en un objeto, utilizando el disparador Al hacer clic/Al tocar y la acción Establecer variable. Establece el valor de la variable shapeType en “cuadrado”.
Reproduce el prototipo para probar la interacción. Cuando la interacción se active y la variable cambie, la variante también se actualizará.