···

    Usar variáveis em protótipos

    Antes de você começar

    Quem pode usar este recurso

    Disponível em qualquer plano pago.

    Qualquer pessoa que tenha acesso do tipo "para edição" a um arquivo pode criar protótipos.

    Qualquer pessoa que tenha acesso do tipo "para visualização" ou "somente para visualização de protótipos" a um arquivo pode visualizar protótipos.

    No Figma, as variáveis são valores armazenados que representam atributos de design ou estados salvos. Elas podem ser do tipo string, número, cor ou valor booleano.

    É possível definir e modificar os valores das variáveis com ações de prototipagem, o que permite criar protótipos imersivos que mudam dinamicamente com base na seleção do usuário, usando apenas alguns quadros e interações simples. Isso significa que você pode usar ações de protótipo para:

    • Atualizar o conteúdo do texto com variáveis de string
    • Alterar as dimensões do objeto, o raio do canto ou as propriedades do layout automático com variáveis numéricas
    • Alternar a visibilidade da camada com variáveis booleanas

    Para começar a usar variáveis em protótipos, configure suas variáveis e, em seguida, use a ação Definir variável para alterar ou modificar seus valores de variáveis.

    Depois de aprender a usar variáveis ​​e protótipos juntos, experimente alguns recursos mais avançados para ampliar ainda mais as funcionalidades deles:

    • Expressões: manipule variáveis com operações básicas, permitindo que você crie protótipos mais avançados com valores flexíveis
    • Várias ações e condicionais: use instruções if/else para verificar se uma condição é atendida antes de executar ações e empilhe um número ilimitado de ações em um único acionador

    As variáveis ainda são novidade para você? Saiba mais sobre variáveis no Figma →

    Experimente

    Para obter mais experiência prática, confira os tutoriais “Experimente” em cada seção. Use esses exemplos simples para aprofundar sua compreensão de como o recurso funciona.

    Quer praticar ainda mais? Confira o arquivo de playground de prototipagem avançada →

    Procurando mais exemplos de como você pode usar variáveis ​​em protótipos? Confira alguns exemplos mais avançados de prototipagem →

    Configurar suas variáveis

    Antes de criar um protótipo com variáveis, você precisa:

    1. Criar suas variáveis: saiba como criar e organizar coleções de variáveis →
    2. Aplicar variáveis: saiba como aplicar variáveis ao conteúdo do texto, às dimensões do objeto, à visibilidade da camada e muito mais →

    Definir valores de variáveis

    Depois de criar e aplicar variáveis em todo o seu design, você pode começar a usá-las com protótipos.

    Cada interação de protótipo tem um acionador (o que faz com que o protótipo avance) e uma ou mais ações múltiplas (o que acontece como resultado do acionador).

    A ação Definir variável permite que você defina ou modifique o valor de uma variável como resultado de um acionador de protótipo.

    Para usar a ação Definir variável em uma interação de protótipo:

    1. Crie uma interação de protótipo.
    2. Navegue até o painel Detalhes da interação e selecione um acionador no menu suspenso.
    3. No menu suspenso Ações, selecione Definir variável.
    4. No menu suspenso Escolher variável de destino, selecione a variável para a qual você deseja definir um novo valor.
    5. No campo Escrever expressão, digite um novo valor para a variável. O novo tipo de valor deve corresponder ao tipo de variável que está sendo alterado. Por exemplo, se você selecionou uma variável numérica, o novo valor também deve ser um número.
      • Valores de string: insira qualquer literal da string de texto (entre aspas) ou selecione qualquer variável de string no painel de seleção
      • Valores numéricos: insira qualquer valor numérico ou selecione qualquer variável numérica no painel de seleção
      • Valores booleanos: insira true ou false ou selecione qualquer variável booleana no painel de seleção
      • Valores de cores: insira qualquer código hexadecimal ou selecione um código hexadecimal no seletor de cores
    6. Reproduza seu protótipo para testar a interação.

    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.

    Observação:

    Suas variáveis têm vários modos? Saiba mais sobre como definir valores de variáveis para valores de modo específicos →

    Dica:

    Use expressões para manipular variáveis com operações. Por exemplo, você pode executar cálculos básicos em variáveis numéricas, combinar inúmeras variáveis de string ou usar expressões booleanas.

    Experimente

    Vamos criar uma coleção de variáveis com o nome de “Formas”. Essa coleção incluirá uma variável de string que representa o nome da forma.

    1. Desmarque todos os itens na tela, localize a seção Variáveis locais na barra lateral direita e clique em Abrir variáveis.
    2. Clique em Criar variável e selecione String.
    3. Na coluna Nome, digite “nomeForma”.
    4. Na coluna Valor, digite “círculo”.The variables authoring panel, with a string variable named shapeName and a value of Circle.

    Agora, você pode aplicar a variável nomeForma ao seu design. Para este exemplo, criamos um design simples que inclui um quadro com duas formas (um círculo e um quadrado) e duas camadas de texto. Queremos vincular a variável nomeForma à camada de texto inferior para que ela seja alterada com base na forma selecionada.

    1. Recrie o design mostrado abaixo. Adicione um objeto de elipse, um objeto de retângulo e duas camadas de texto a um quadro. Digite “Você selecionou:” como o conteúdo da primeira camada de texto.
    2. Clique para selecionar a camada de texto inferior no seu quadro.
    3. Na aba Design, na barra lateral direita, localize a seção Texto e clique em Aplicar variável.
    4. Selecione a variável nomeForma no painel de seleção de variáveis para aplicá-la ao conteúdo do 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.

    Agora, vamos adicionar uma interação com uma ação Definir variável.

    1. Selecione o objeto de elipse.
    2. Na barra lateral direita, acesse a aba Protótipo. Na seção Interações, clique no sinal de mais para adicionar uma nova interação.
    3. No painel Detalhes da interação, crie uma interação com um acionador Ao tocar/ao clicar e a ação Definir variável.
    4. Selecione a variável nomeForma no menu suspenso. No campo para, defina o novo valor como “círculo”.
    5. Repita as etapas 1 a 4 para o objeto retângulo. Dessa vez, defina a variável nomeForma como “quadrado”.

    try

    Agora, você está pronto para reproduzir seu protótipo e testá-lo. Quando você clicar em cada objeto de forma, a camada de texto será atualizada automaticamente com base no novo valor da variável.

    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.

    Prototipagem com variáveis na prática

    Depois de aprender os conceitos básicos, você pode começar a usar protótipos e variáveis de diversas maneiras.

    Usar variáveis com variantes de componentes

    Você pode aplicar variáveis a variantes de componentes. Isso permite que você atualize automaticamente o componente usando a ação Definir variável.

    1. Crie um conjunto de componentes com pelo menos duas variantes. (Por exemplo, crie um conjunto de componentes que tenha uma propriedade de variante “forma” com valores “círculo” e “quadrado”.)
    2. Coloque uma instância de uma variante em um quadro.
    3. Atribua uma variável à instância. O valor da variável deve corresponder a um valor de propriedade de variante. (Por exemplo, atribua à instância uma variável tipoForma com um valor padrão “círculo”.)
      1. Clique na instância para selecioná-la.
      2. Na barra lateral direita, passe o mouse à direita de uma propriedade de variante e clique em Atribuir variável.
      3. Selecione a variável que você gostaria de vincular à propriedade.
    4. Crie uma interação em qualquer objeto dentro do quadro que use a ação Definir variável. Altere o valor da variável para corresponder ao valor da propriedade de variante não utilizada. (Por exemplo, defina o valor da variável tipoForma como “quadrado”.)
    5. Reproduza seu protótipo para testar a interação. Quando a interação é acionada e a variável é alterada, a variante também é atualizada.

    Observação: uma instância aninhada não transfere substituições se sua variante for alterada devido à mudança de valores de uma variável anexada.

    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.

    Experimente

    1. Crie uma nova variável de string local, chamada nomeCor, e defina o valor padrão como “azul”.
    2. Crie um conjunto de componentes com duas variantes: um quadrado azul e um quadrado amarelo. Nomeie a propriedade da variante como “cor”, com nomes de valores “azul” e “amarelo”.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. Coloque uma instância da variante azul em um quadro.
    4. Aplique a variável nomeCor à instância clicando em Atribuir variável ao lado da propriedade de variante “cor”.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. Adicione duas camadas de texto ao quadro, abaixo do quadrado. Uma camada de texto deve dizer “azul” e a outra “amarelo”.
    6. Selecione a camada de texto que diz “azul” e adicione um protótipo de interação com um acionador Ao clicar/Ao tocar e uma ação Definir variável. Defina o valor da variável nomeCor como “azul”.try
    7. Selecione a camada de texto que diz “amarelo” e adicione uma interação de protótipo com um acionador Ao clicar/Ao tocar e uma ação Definir variável. Defina o valor da variável nomeCor como “amarelo”.
    8. Reproduza seu protótipo para testar a interação. Quando você clica no texto “amarelo”, o componente é atualizado para a variante de quadrado amarelo. Quando você clica no texto “azul”, o componente é atualizado para a variante de quadrado 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.

    Usar variáveis com componentes interativos

    De forma semelhante ao uso de variáveis com variantes de componentes, você pode aplicar variáveis a componentes interativos.

    Agora, quando você clica em um componente interativo:

    • A variante é atualizada
    • A variável é atualizada, o que, por sua vez, atualiza quaisquer outros elementos vinculados a essa mesma variável

    Para usar componentes interativos com variáveis:

    1. Crie um conjunto de componentes interativos. (Por exemplo, crie um componente interativo de botão que tenha uma propriedade de variante “clicado” com valores “true” e “false”.)
    2. Coloque uma instância de uma variante do conjunto de componentes interativos em um quadro.
    3. Atribua uma variável à instância do componente interativo. O valor da variável deve corresponder a um valor de propriedade de variante. (Por exemplo, atribua à instância uma variável booleana visibilidadeCírculo com um valor padrão “false”.)
      1. Selecione a instância.
      2. Na barra lateral direita, selecione o menu suspenso de uma das propriedades da variante.
      3. Selecione Atribuir variável.
      4. Clique para selecionar uma variável a ser vinculada à propriedade.
    4. Reproduza seu protótipo para testar a interação. Quando a interação é acionada e o componente é alterado, o valor da variável também muda. Isso significa que se você tiver essa mesma variável vinculada a quaisquer outros valores, eles também serão atualizados.

    Observação: uma instância aninhada não transfere substituições se a sua variante for alterada devido à mudança de valores de uma variável anexada.

    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.

    Experimente

    1. Crie uma variável booleana local. Nomeie a variável como selecionada e defina o valor inicial como “false”.
    2. Crie um conjunto de componentes com duas variantes: um estado selecionado e um estado não selecionado. Nomeie a propriedade da variante como “selecionada”, com nomes de valores “true” e “false”.A component set with two variants of a button. The variant property is named SELECTED, and has true and false values.
    3. Adicione interações de protótipo entre as variantes no conjunto de componentes. Ao tocar, a variante falsa deve Mudar para a variante verdadeira. Ao tocar, a variante verdadeira deve Mudar para a variante falsa.
    4. Coloque uma instância da variante falsa no quadro.
    5. Aplique a variável selecionada à instância clicando em Atribuir variável, ao lado da propriedade de variante “selecionada”.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. Adicione um objeto estrela ao quadro.
    7. Aplique a variável selecionada à visibilidade do objeto estrela:
      1. Selecione a estrela.
      2. Vá até a seção Camada da barra lateral direita e clique com o botão direito do mouse no ícone de visibilidade.
      3. Clique na variável selecionada no painel de seleção de variáveis. Agora, a estrela só será visível se o valor da variável selecionada for verdadeiro.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. Reproduza seu protótipo. Quando você clica no botão, a visibilidade do objeto estrela é ativada e desativada.The prototype is being played. When the button is clicked, it switches to the true variant, and the star becomes visible.
    Esse artigo foi útil?

    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!

    Voltar ao topo