···

    Utilizar variables en prototipos

    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.

    Cualquier persona con acceso de tipo can view o can view prototypes only a un archivo puede ver 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.

    ¿No estás familiarizado/a con las variables? Más información sobre las variables en Figma →

    Pruébalo

    Para disfrutar de una experiencia más práctica, no te pierdas los tutoriales «Pruébalo» de cada sección. Utiliza estos sencillos ejemplos para entender mejor cómo funciona la característica.

    ¿Deseas más prácticas aún? 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 de creación avanzada de prototipos adicionales →

    Configurar variables

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

    1. Crear tus variables: Más información sobre cómo crear y organizar colecciones de variables →
    2. Aplicar variables: Más información sobre cómo aplicar variables a contenido de texto, dimensiones de objetos, visibilidad de las capas, entre otros elementos →

    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:

    1. Crea una interacción de prototipo.
    2. Accede al panel Interaction details y selecciona un activador en el menú desplegable.
    3. En el menú desplegable Actions, selecciona Set variable.
    4. En el menú desplegable Pick target variable, selecciona la variable para la que deseas establecer un valor nuevo.
    5. En el menú Write expression, especifica un valor nuevo para la variable. El tipo del valor nuevo debe ser el mismo que 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.
    6. Reproduce el prototipo para probar la interacción.

    Four examples of interactions. 1: A cake design, with a Set Variable action setting a boolean sprinkleVisibility variable to true. 2. A background color setting setting, with a Set Variable action setting a color variable bgColor to a new hex code. 3. A design of a square with a Round Corners button beaneath it, with a Set Variable action setting a number variable borderRadius to 20. A select profile design with two avatars, with a Set Variable action setting a string variable, sampleString, to Ernie.

    Nota:

    ¿Tus variables incluyen varios modos? Más información sobre la configuración de valores de variables con 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.

    1. 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.
    2. Haz clic en Create variable y selecciona String.
    3. En la columna Name, introduce «shapeName».
    4. En la columna Value, introduce «circle».The variables authoring panel, with a string variable named shapeName and a value of 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.

    1. 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.
    2. Haz clic para seleccionar la capa de texto inferior del marco.
    3. En la pestaña Design de la barra lateral derecha, busca la sección Text y haz clic en Apply variable.
    4. Selecciona la variable shapeName en el panel de selección correspondiente para aplicarla al contenido de texto.

    A frame with an ellipse object, a square object, a text layer that says YOU PICKED and a selected text layer that says CIRCLE. With the second text layer selected, the mouse is hovering over the Apply variable icon from the Text section of the right sidebar.

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

    1. Selecciona el objeto elipse.
    2. 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.
    3. En el panel Interaction details, crea una interacción con un activador On tap/On click y la acción Set variable.
    4. Selecciona la variable shapeName en el menú desplegable. En el campo to, configura el nuevo valor como «circle».
    5. Repite los pasos del 1 al 4 para el objeto rectángulo, pero en esta ocasión, establece la variable shapeName en «square».

    try

    Ahora ya puedes reproducir el prototipo para probarlo. Cuando hagas clic en cada uno de los objetos de forma, la capa de texto se actualizará automáticamente en función del nuevo valor de variable.

    The ellipse object is selected. From the Prototype tab, and interaction has been created, with an On Tap trigger and a Set Variable action. The shapeName variable is being set to Circle.

    Práctica de creación de prototipos con variables

    Cuando ya entiendas los aspectos básicos, podrás empezar a utilizar prototipos de distintas formas.

    Utilizar variables con variantes de componentes

    Puedes aplicar variables a variantes de componentes para poder actualizar de forma automática el componente con la acción Set variable.

    1. Crea un conjunto de componentes con dos variantes como mínimo. (Por ejemplo, crea un conjunto de componentes que tenga una propiedad de variante «shape» con los valores «circle» y “square»).
    2. Coloca una instancia de una variante en un marco.
    3. Asigna una variable a la instancia. El valor de la variable debe coincidir con el valor de una propiedad de variante. (Por ejemplo, asigna una variable shapeType con un valor «circle» a la instancia).
      1. Haz clic en la instancia para seleccionarla.
      2. En la barra lateral derecha, pasa el ratón por la parte derecha de una propiedad de variante y haz clic en Assign variable.
      3. Selecciona la variable a la que deseas enlazar la propiedad.
    4. Crea una interacción en cualquier objeto del marco en la que se utilice la acción Set variable. Cambia el valor de la variable para que coincida con el valor de la propiedad de variante no utilizado. (Por ejemplo, configura el valor de la variable shapeType como «square»).
    5. Reproduce el prototipo para probar la interacción. Cuando esta se haya activado y la variable haya cambiado, la variante también se actualizará.

    Nota: Las instancias anidadas no transfieren las anulaciones si su variante cambia debido a que cambien los valores de una variable asociada.

    Screenshot 1: The variable authoring panel, with a string variable ShapeType created, with a default value of Circle. Screenshot 2: A component set, with a Shape property with two values: square, circle. Screenshot 3: An instance of the circle variant on a frame, with the ShapeType variable applied to the component property. Screenshot 4: A button beneath the instance on the frame, with an interaction: Set variable ShapeType to Square.

    Pruébalo

    1. Crea una nueva variable de cadena local, denominada colorName y convierte a «blue» en el valor por defecto.
    2. Crea un conjunto de componentes con dos variantes: un cuadrado de color azul y un cuadrado de color amarillo. Asigna a la propiedad de variante el nombre «color» y los nombres de valor «blue» y «yellow».A component set with two variants, a blue square and a yellow square. From the Properties section of the right sidebar, the variant property is named Color, and has two values: blue and yellow
    3. Coloca una instancia de la variante azul dentro de un marco.
    4. Aplica la variable colorName a la instancia. Para ello, haz clic en Assign variable junto a la propiedad de variante «color».An istance of the blue variant is placed on a frame. With the instance selected, the mouse is hovering over the Apply Variable icon from the variant properties section of the right sidebar.
    5. Añade dos capas de texto al marco, bajo el cuadrado. En una capa de texto se debe indicar «blue» y en la otra «yellow».
    6. Selecciona la capa de texto que indica «blue» y añade una interacción de prototipo con un activador On click/On tap y una acción Set variable. Establece el valor de la variable colorName como «blue».try
    7. Selecciona la capa de texto que indica «yellow» y añade una interacción de prototipo con un activador On click/On tap y una acción Set variable. Establece el valor de la variable colorName como «yellow».
    8. Reproduce el prototipo para probar la interacción. Al hacer clic en el texto «yellow», el componente se actualiza a la variante de cuadrado de color amarillo. Al hacer clic en el texto «blue», el componente se actualiza a la variante de cuadrado azul.The prototype is being played. When the blue text layer is clicked, the square changes to the blue variant. When the Yellow text layer is clicked, the square changes to the yellow variant.

    Utilizar variables con componentes interactivos

    Al igual que ocurre con la utilización de variables con variantes de componentes, puedes aplicar variables a componentes interactivos.

    Ahora, cuando hagas clic en un componente interactivo:

    • La variante se actualiza.
    • La variable se actualiza, lo que, por su parte, hace que se actualicen también el resto de elementos que estén enlazados a esa misma variable.

    Para utilizar componentes interactivos con variables:

    1. Crea un conjunto de componentes interactivo. (Por ejemplo, crea un componente de botón interactivo con valores «true» y «false» para la propiedad de variante «clicked»).
    2. Coloca una instancia de una variante del conjunto de componentes interactivos en un marco.
    3. Asigna una variable a la instancia de componente interactivo. El valor de la variable debe coincidir con el valor de una propiedad de variante. (Por ejemplo, asigna una variable circleVisibility booleana con un valor «false» por defecto a la instancia).
      1. Selecciona la instancia.
      2. En la barra lateral derecha, selecciona el menú desplegable de una de las propiedades de variante.
      3. Elige Assign variable.
      4. Haz clic para seleccionar una variable que enlazar a la propiedad.
    4. Reproduce el prototipo para probar la interacción. Cuando esta se haya activado y el componente haya cambiado, el valor de la variante también cambiará. Esto quiere decir que si tiene enlazada esa misma variable a cualquier otro valor, estos valores también se actualizarán.

    Nota: Las instancias anidadas no transfieren las anulaciones si su variante cambia debido a que cambien los valores de una variable asociada.

    Screenshot 1: An interactive component of a button, with a Clicked variant property with true and false values. Screenshot 2: A circle placed on a frame, with the layer visibility bound to a circleVisibility boolean variable. Screenshot 3: An instance of the button on the same frame, with the circleVisibility boolean variable bound to the variant property. Screenshot 4: A GIF of the prototype in action. When the button is clicked, the circle's visibility toggles on and off.

    Pruébalo

    1. Crea una variable booleana local. Asígnale el nombre selected y configura el valor inicial «false».
    2. Crea un conjunto de componentes con dos variantes: un estado seleccionado y otro no seleccionado. Asigna a la propiedad de variante el nombre «selected», con los nombres de valores «true» y «false».A component set with two variants of a button. The variant property is named SELECTED, and has true and false values.
    3. Añade interacciones de prototipos entre las variantes del conjunto de componentes. Al tocar, la variante false debería cambiar a la variante true. Al tocar, la variante true debería cambiar a la variante false.
    4. Coloca una instancia de la variante false dentro del marco.
    5. Aplica la variable selected a la instancia. Para ello, haz clic en Assign variable junto a la propiedad de variante «selected».An instance of the false variant is placed on a frame. With the instance selected, the mouse is hovering over the Apply Variable icon from the variant properties section of the right sidebar.
    6. Añade un objeto de estrella al marco.
    7. Aplica la variable seleccionada a la visibilidad del objeto de estrella:
      1. Selecciona la estrella.
      2. Ve a la sección Layer de la barra lateral derecha y haz clic con el botón derecho en el icono de visibilidad.
      3. Haz clic en la variable selected del panel de selección correspondiente. Ahora la estrella solo se verá si el valor de la variable selected es true.A star object is placed on the frame. With the star selected, the mouse is hovering over the visibility icon from the Layer section of the right sidebar.
    8. Reproduce el prototipo. Al hacer clic en el botón, se activa y desactiva la visibilidad del objeto de estrella.The prototype is being played. When the button is clicked, it switches to the true variant, and the star becomes visible.
    ¿Fue útil este artículo?

    Your feedback helps us improve Figma’s Help Center. To get help from support, submit a request through our contact form.

    Your feedback helps us improve Figma’s Help Center. To get help from support, submit a request through our contact form.

    Thank you for helping us improve Figma’s Help Center!

    Regresar al inicio