Usar variáveis em protótipos – Figma Learn - Central de ajuda

Antes de começar

Quem pode usar esse recurso

Qualquer pessoa com acesso de edição] a um arquivo pode criar 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, criando protótipos imersivos que mudam dinamicamente conforme a seleção do usuário. Basta usar alguns quadros e interações simples. Você pode usar ações de protótipo para:

Atualizar textos com variáveis de string
Alterar as dimensões de objetos, o raio do canto ou as propriedades do layout automático com variáveis numéricas
Alternar a visibilidade das camadas com variáveis booleanas

Para começar a usar variáveis em protótipos, configure suas variáveis e 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 recursos mais avançados para ampliar seu alcance:

Expressões: manipule variáveis com operações básicas, criando 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 gatilho

Saiba mais sobre variáveis no Figma.

Experimente

Quer praticar mais? Confira o arquivo do playground de prototipagem avançada.

Gostaria de mais exemplos de uso de variáveis em protótipos? Confira outros exemplos avançados de prototipagem.

Configurar suas variáveis

Para 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 gatilho (que faz com que o protótipo avance) e pelo menos uma ação múltipla (o que acontece quando o gatilho é acionado).

A ação Definir variável permite definir ou modificar o valor de uma variável a partir de um gatilho de protótipo.

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

Crie uma interação de protótipo.
Acesse o modal Interação e selecione um gatilho no menu suspenso.
No menu suspenso Ações, selecione Definir variável.
No menu suspenso Destino, selecione a variável para a qual você deseja definir um novo valor.
No campo Valor, insira um novo valor para a variável. O novo tipo de valor deve corresponder ao tipo de variável que você está alterando. 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 hex ou selecione um código hex no seletor de cores
Reproduza seu protótipo para testar a interação.

Um design com dois quadros. Uma ação de protótipo é definida em uma imagem no primeiro quadro. Quando a imagem é clicada, a variável profileName atualiza seu valor, e o protótipo navega para o próximo quadro.

Observação:

Suas variáveis têm modos múltiplos? Saiba mais sobre como definir valores variáveis para modos 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 variáveis em strings ou usar expressões booleanas.

Experimente

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

Desmarque todos os itens na tela de trabalho, 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 “shapeName”.
Na coluna Valor, digite “circle”.

Agora, você pode aplicar a variável shapeName ao seu design. Neste exemplo, criamos um design simples com um quadro e duas formas (um círculo e um quadrado) e duas camadas de texto. Queremos vincular a variável shapeName à camada de texto inferior, alterando-a segundo a forma selecionada.

Recrie o design abaixo. Adicione um objeto elipse, um objeto retângulo e duas camadas de texto a um quadro. Digite “Você selecionou:” no 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 shapeName 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 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 gatilho Ao tocar/ao clicar e a ação Definir variável.
Selecione a variável shapeName do menu suspenso Destino. No campo Valor, defina o novo valor como “circle”.
Repita as etapas 1 a 4 para o objeto retângulo. Dessa vez, defina a variável shapeName como “square”.

Um objeto de círculo está selecionado no quadro, com o modal de Interação aberto. Uma interação está definida: O gatilho é Ao toque, a ação é Definir variável, o alvo é shapeName, e o valor é circle.

Agora, você já pode acionar seu protótipo para testá-lo. Ao clicar em cada objeto de forma, a camada de texto será atualizada automaticamente pelo novo valor da variável. O protótipo está sendo acionado. Quando o objeto elipse é selecionado, a camada de texto inferior atualiza para círculo. Quando o objeto quadrado é selecionado, a camada de texto inferior atualiza para quadrado.

Protótipo com variáveis e componentes

Depois de aprender o básico, você pode começar a usar variáveis e componentes juntos em seus protótipos.

Aplique variáveis aos componentes para atualizar automaticamente seu componente ao alterar o valor de uma variável em um protótipo. Qualquer alteração no valor da variável também atualiza outros elementos vinculados a essa mesma variável.

O valor de uma variável pode ser alterado por:

Usando a ação Definir variável
Usando a ação Mudar para em um componente interativo
Usando a ação Definir modo da variável

Exemplo

Um conjunto de componentes de botão interativo possui um estado padrão e um estado hover. O componente usa a ação Mudar para, de modo que, quando você passa o mouse sobre a variante padrão, ele muda para a variante hover (e vice-versa).

A variável booleana hoverState é aplicada tanto a uma instância da variante quanto à visibilidade de uma camada de sobreposição separada.

Quando você passar o mouse sobre a variante default do seu protótipo:

A instância atualiza para a variante hover
A variável booleana hoverState atualiza de false para true
A camada de imagem fica visível

Quer praticar com um exemplo similar? Confira a seção “Experimente” abaixo.

O local onde você aplica a variável determina o escopo das mudanças no protótipo.

Aplicar variável em:	Na prototipagem:
Propriedades variantes de instâncias de componentes	Altere o valor da variável para atualizar a variante da instância.
Propriedades do componente	Altere o valor da variável para atualizar todas as instâncias do componente.

Saiba mais sobre a aplicação de variáveis às propriedades de componentes e variantes.

Experimente: Exemplo 1

Criar um conjunto de componentes interativos.
1. Crie um componente de botão que tenha uma propriedade de variante “clicado” com valores “verdadeiro” e “falso”.
2. Adicione uma interação de protótipo na variante “false”, usando o gatilho Ao clicar e a ação Mudar para. Agora, ao clicar na variante false, ela muda para a variante true.
Coloque uma instância de uma variante do conjunto de componentes interativos em um quadro.
1. Adicione a variante falsa a 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.
1. Crie uma variável booleana circleVisibility com o valor padrão false.
2. Selecione a instância do botão.
3. Na barra lateral direita, passe o mouse sobre a propriedade variante clicada.
4. Selecione Aplicar variável .
5. Clique para selecionar a variável circleVisibility para vincular à propriedade.
Atribua a mesma variável a outra camada no seu design.
1. Adicione um objeto elipse ao quadro.
2. Na seção Aparência da barra lateral direita, clique com o botão direito no ícone Ocultar .
3. Selecione a variável circleVisibility para aplicar a variável booleana à visibilidade da camada da elipse.
Acione seu protótipo para testar a interação. Quando a interação é disparada e o componente é alterado, o valor da variável também muda. Isso significa que, se você tiver a mesma variável vinculada a outros valores, eles também serão atualizados.

Experimente: Exemplo 2

Crie um conjunto de componentes com pelo menos duas variantes.
1. Crie um conjunto de componentes que tenha uma propriedade 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.
1. Crie uma variável de string shapeType com o valor padrão "círculo".
2. Clique na instância para selecioná-la.
3. Na barra lateral direita, passe o mouse à direita de uma propriedade de variante e clique em Atribuir variável.
4. 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 conforme o valor da propriedade de variante não utilizada.
1. Adicione uma interação de protótipo em um objeto, usando o gatilho Ao clicar/toque e a ação Definir variável. Defina o valor da variável shapeType como “square”.
Acione seu protótipo para testar a interação. Quando a interação é acionada e a variável é alterada, a variante também é atualizada.