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:
- Criar suas variáveis: saiba como criar e organizar coleções de variáveis →
- 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:
- Crie uma interação de protótipo.
- Navegue até o painel Detalhes da interação e selecione um acionador no menu suspenso.
- No menu suspenso Ações, selecione Definir variável.
- No menu suspenso Escolher variável de destino, selecione a variável para a qual você deseja definir um novo valor.
- 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
oufalse
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
- Reproduza seu protótipo para testar a interação.
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.
- Desmarque todos os itens na tela, localize a seção Variáveis locais na barra lateral direita e clique em Abrir variáveis.
- Clique em Criar variável e selecione String.
- Na coluna Nome, digite “nomeForma”.
- Na coluna Valor, digite “círculo”.
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.
- 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.
- Clique para selecionar a camada de texto inferior no seu quadro.
- Na aba Design, na barra lateral direita, localize a seção Texto e clique em Aplicar variável.
- Selecione a variável
nomeForma
no painel de seleção de variáveis para aplicá-la ao conteúdo do texto.
Agora, vamos adicionar uma interação com uma ação Definir variável.
- Selecione o objeto de elipse.
- 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.
- No painel Detalhes da interação, crie uma interação com um acionador Ao tocar/ao clicar e a ação Definir variável.
- Selecione a variável
nomeForma
no menu suspenso. No campo para, defina o novo valor como “círculo”. - Repita as etapas 1 a 4 para o objeto retângulo. Dessa vez, defina a variável
nomeForma
como “quadrado”.
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.
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.
- 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”.)
- Coloque uma instância de uma variante em um quadro.
- 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”.)- Clique na instância para selecioná-la.
- Na barra lateral direita, passe o mouse à direita de uma propriedade de variante e clique em Atribuir variável.
- Selecione a variável que você gostaria de vincular à propriedade.
- 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”.) - 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.
Experimente
- Crie uma nova variável de string local, chamada
nomeCor
, e defina o valor padrão como “azul”. - 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”.
- Coloque uma instância da variante azul em um quadro.
- Aplique a variável
nomeCor
à instância clicando em Atribuir variável ao lado da propriedade de variante “cor”. - Adicione duas camadas de texto ao quadro, abaixo do quadrado. Uma camada de texto deve dizer “azul” e a outra “amarelo”.
- 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”. - 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”. - 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.
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:
- 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”.)
- Coloque uma instância de uma variante do conjunto de componentes interativos em um quadro.
- 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”.)- Selecione a instância.
- Na barra lateral direita, selecione o menu suspenso de uma das propriedades da variante.
- Selecione Atribuir variável.
- Clique para selecionar uma variável a ser vinculada à propriedade.
- 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.
Experimente
- Crie uma variável booleana local. Nomeie a variável como
selecionada
e defina o valor inicial como “false”. - 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”.
- 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.
- Coloque uma instância da variante falsa no quadro.
- Aplique a variável
selecionada
à instância clicando em Atribuir variável, ao lado da propriedade de variante “selecionada”. - Adicione um objeto estrela ao quadro.
- Aplique a variável selecionada à visibilidade do objeto estrela:
- Selecione a estrela.
- Vá até a seção Camada da barra lateral direita e clique com o botão direito do mouse no ícone de visibilidade.
- 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ávelselecionada
for verdadeiro.
- Reproduza seu protótipo. Quando você clica no botão, a visibilidade do objeto estrela é ativada e desativada.