Utilizar variables en los prototipos

Antes de empezar

Quién puede usar esta función

Disponible en todos los planes pagos.

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

Cualquier persona con acceso de visualización o de visualización de prototipos a un archivo puede ver 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

¿No tiene experiencia con variables? Obtenga más información sobre variables en Figma→

Configurar las variables

Antes de hacer prototipos con variables, usted debe:

1. Crear las variables: obtenga más información sobre cómo crear y organizar colecciones de variables →
2. Aplicar las variables: obtenga 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 haya creado y aplicado las variables en su diseño, puede 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 le 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:

1. Cree un prototipo de interacción.
2. Diríjase al panel de Detalles de la interacción y seleccione un disparador del menú desplegable.
3. Desde el menú desplegable Acciones, seleccione Configurar variable.
4. Desde el menú desplegable Elegir variable objetivo, seleccione la variable para la que desea crear un nuevo valor.
5. En el campo Escribir expresión, ingrese un nuevo valor para la variable. El nuevo tipo de valor debe coincidir con el tipo de variable que está cambiando. Por ejemplo, si seleccionó una variable numérica, el nuevo valor también debe ser un número.
   • Valores de cadena: ingrese cualquier cadena de texto literal (entre comillas) o seleccione cualquier variable de cadena del panel de selección
   • Valores numéricos: ingrese cualquier valor numérico, o seleccione cualquier variable numérica del panel de selección
   • Valores booleanos: ingrese verdadero o falso, o seleccione cualquier variable booleana del panel de selección
   • Valores de color: ingrese cualquier código hexadecimal, o seleccione un código hexadecimal del selector de color
6. Reproduzca el prototipo para probar la interacción.

Prototipado con variables en la práctica

Una vez que aprenda lo básico, puede comenzar a utilizar los prototipos y las variables de diferentes maneras.

Utilizar variables con variantes de un componente

Puede aplicar variables a las variantes de un componente. Esto le permite actualizar automáticamente el componente utilizando la acción Configurar variable.

1. Cree un conjunto de componentes con al menos dos variantes. (Por ejemplo, cree un conjunto de componentes donde la propiedad de la variante "forma" esté configurada con los valores "círculo" y "cuadrado".)
2. Coloque una instancia de una variante en un marco.
3. Asigne una variable a la instancia. El valor de la variable debe coincidir con el valor de la propiedad de la variante. (Por ejemplo, asigne a la instancia la variable TipoDeForma con un valor "círculo" predeterminado.)
   1. Haga clic en la instancia para seleccionarla.
   2. Desde la barra lateral derecha, coloque el puntero a la derecha de la propiedad de la variable y haga clic en Asignar variable.
   3. Seleccione la variable que le gustaría vincular a la propiedad.
4. Cree una interacción sobre cualquier objeto en el marco que utilice la acción Configurar variable. Cambie el valor de la variable para que coincida con la propiedad de la variable que está sin utilizar. (Por ejemplo, configure el valor de la variable TipoDeForma como "cuadrado".)
5. Reproduzca el prototipo para probar la interacción. Cuando la interacción se dispare y la variable cambie, también se actualizará la variante.

Utilizar variables con componentes interactivos

De forma similar a como utiliza las variables con las variantes de un componente, puede aplicar variables a componentes interactivos.

Ahora, cuando hace clic en un componente interactivo:

• La variante se actualiza
• La variable se actualiza, lo que a su vez actualiza cualquier otro elemento vinculado a esa misma variable

Para utilizar componentes interactivos con variables:

1. Cree un conjunto de componentes interactivos. (Por ejemplo, cree un componente interactivo con forma de botón que tenga una propiedad de variante "clic" con valores "verdadero" y "falso".)
2. Coloque una instancia de una variante del conjunto del componente interactivo en un marco.
3. Asigne una variable a la instancia del componente interactivo. El valor de la variable debe coincidir con el valor de la propiedad de la variante. (Por ejemplo, asigne a la instancia una variable booleana VisibilidadDeCírculo con un valor "falso" predeterminado.)
   1. Seleccione la instancia.
   2. Desde la barra lateral derecha, seleccione el menú desplegable para una de las propiedades de la variante.
   3. Seleccione Asignar variable.
   4. Haga clic para seleccionar una variable que vincular a la propiedad.
4. Reproduzca el prototipo para probar la interacción. Cuando la interacción se dispara y el componente cambia, el valor de la variable también cambia. Esto significa que si la misma variable está vinculada a otros valores, estos también se actualizarán.