Modos de variáveis

Antes de começar

Quem pode usar esse recurso

Qualquer pessoa nos planos de Educação, Profissional, Organização e Enterprise pode criar e usar modos de variáveis

O número de modos que você pode criar por coleção de variáveis depende do seu plano

Procurando mais recursos sobre variáveis? Confira nosso guia sobre variáveis →

Variáveis permitem armazenar valores reutilizáveis que podem ser aplicados a várias propriedades de design, como cores, valores de espaçamento e dimensões.

Os modos da variável permitem representar diferentes contextos dos designs sem precisar criar vários quadros para cada contexto necessário. Isso ocorre porque as variáveis podem conter múltiplos valores, organizados por meio de modos da variável, e cada modo armazena um valor por variável.

Por exemplo, digamos que precisamos criar versões de modo claro e escuro para um design:

Sem modos da variável, poderíamos criar designs para o modo claro (nosso padrão), depois duplicar esses designs e atualizar cada preenchimento de cor necessário para o modo escuro.

Usando os modos da variável, poderíamos criar uma coleção de variáveis com dois conjuntos de valores (ou modos): um para o modo claro como padrão e outro para o modo escuro. Depois, aplicaríamos as variáveis a um conjunto de designs. Em seguida, poderíamos alternar rapidamente entre designs nos modos claro e escuro.

Se precisarmos de um terceiro tema de cores, tudo o que precisamos fazer é criar um novo modo e inserir valores para esse tema. Não precisaríamos aplicar os valores aos nossos designs novamente.

Existem vários contextos em que os modos da variável podem ajudar. Confira algumas ideias para você começar:

• Crie temas de cores acessíveis, como o modo de alto contraste ou temas diferentes para daltonismo, utilizando variáveis de cor
• Localize o texto da IU para ver como ele flui nos designs usando variáveis de string
• Considere os tamanhos de vários dispositivos, como relógio, celular e desktop, para observar como os elementos respondem a diferentes tamanhos de espaçamento e preenchimento usando variáveis numéricas

Criar um modo

1. Desmarque todos os objetos clicando em qualquer parte da tela de trabalho.
2. Abra o modal de variáveis clicando em Abrir variáveis na seção Variáveis locais da barra lateral direita.
3. Abra a coleção na qual você deseja criar um novo modo.
4. A partir de uma variável existente, clique Novo modo da variável à direita dos cabeçalhos das colunas. O Figma duplica os valores da primeira coluna para a nova.

Você também pode duplicar um modo clicando com o botão direito no cabeçalho do modo e selecionando Duplicar modo.

Alterar o modo padrão

No modal de variáveis, o modo padrão de uma coleção de variáveis é a coluna de modo mais à esquerda.

Quando um objeto utiliza um objeto variável ou quando uma página contém objetos que utilizam variáveis, o objeto ou a página usará valores do modo padrão até que você defina explicitamente um modo específico para o objeto ou a página.

Altere o modo padrão em uma coleção de variáveis reordenando os modos.

Para alterar o modo padrão para outro:

1. No modal Variáveis, abra a coleção de variáveis onde o modo da variável está localizado.
2. Encontre o modo e ou:
   • Clique com o botão direito do mouse e selecione Definir como padrão,
   • Ou clique e arraste o modo da variável para a coluna mais à esquerda.

Se o modo da variável de um objeto ou página foi definido como "automático" ou "padrão" em vez de um modo especificado, eles herdarão o que quer que seja o novo modo padrão.

Se um objeto ou página foi explicitamente configurado para um modo que era o padrão, ele permanecerá vinculado a esse modo mesmo quando não for mais o padrão.

Reordenar modos

Para reordenar modos em uma coleção de variáveis, você pode:

• Clique com o botão direito e selecione Mover coluna para a direita ou Mover coluna para a esquerda
• Ou, clique e arraste a coluna para a esquerda ou para a direita

Se você mover uma coluna completamente para a esquerda em uma coleção de variáveis, essa coluna se tornará o modo padrão.

Alternar entre os modos

Altere o modo de um objeto ou página para que os designs utilizem os valores de variáveis que você deseja. Você pode alternar os modos em:

• Camadas
• Quadros
• Componentes e conjuntos de componentes
• Seções
• Grupos
• Páginas

Alternar modos em um objeto

Para camadas: Você pode alternar os modos delas se houver pelo menos uma variável aplicada e essa variável tiver vários modos.

Para grupos, quadros, componentes, conjuntos de componentes e seções: Você pode alternar seus modos se as camadas aninhadas tiverem pelo menos uma variável aplicada e essa variável tiver vários modos.

Para mudar o modo de um objeto:

1. Selecione a camada, o grupo ou o objeto contêiner.
2. Na seção Aparência da barra lateral direita, clique em Aplicar modo da variável.
3. Passe o cursor sobre uma coleção de variáveis e escolha um modo. 

Depois que você especificar um Modo em um objeto, uma tag com o ícone e o nome do Modo aparecerá ao lado do nome da camada no painel de camadas da barra lateral esquerda. Se houver vários modos, passe o mouse sobre a tag para ver uma lista de modos.

 

Alternar modos em uma página

Você pode alternar os modos nas páginas se alguma coleção local de variáveis contiver múltiplos modos.

1. Desmarque tudo na tela de trabalho.
2. Na seção Página da barra lateral direita, clique em Aplicar modo da variável.
3. Passe o cursor sobre uma coleção de variáveis e escolha um modo.

Defina modo automático (apenas objetos)

Objetos com variáveis têm seus Modos definidos como automático por padrão. Isso significa que eles assumem o modo do contêiner pai.

• Se o contêiner pai também estiver definido como automático, os objetos continuarão subindo na hierarquia de camadas até chegarem a um contêiner com um modo especificado.
• Se nenhum contêiner pai tiver um modo especificado, os objetos voltarão ao modo padrão da coleção, mostrado entre parênteses.

Usar com instâncias variantes

Variáveis booleanas, numéricas e de string podem ser atribuídas a instâncias de componentes com propriedades de variantes.

Variáveis de string e número

Variáveis de string e número podem ser mapeadas para instâncias de variantes para que mudem para uma variante diferente quando seu modo for alterado. Para fazer isso, o valor da variável deve corresponder aos valores da propriedade de variante.

1. Crie uma variável de string ou numérica com múltiplos valores (ou modos).
2. Defina os valores da variável para que correspondam aos valores da propriedade da variante.
3. Pegue uma instância de componente da variante e passe o mouse sobre a propriedade da variante na barra lateral direita.
4. Clique em Atribuir variável e escolha a variável.

Agora, a instância alternará para uma variante diferente sempre que o modo mudar.

Variáveis booleanas

Variáveis booleanas podem ser mapeadas para propriedades de variante com valores true e false.

1. Crie uma variável booleana com múltiplos valores (ou modos).
2. Crie duas instâncias de variante dentro do mesmo conjunto de componentes.
3. Defina o valor de uma variante para True e o da outra para False.
4. Pegue uma instância de componente de uma das variantes e passe o mouse sobre a propriedade da variante na barra lateral direita.
5. Clique em Atribuir variável e escolha a variável booleana.

Saiba como usar variantes e variáveis em protótipos →

Instâncias aninhadas

Você também pode vincular variáveis às propriedades da variante em instâncias aninhadas.

1. Criar um componente com uma instância aninhada de outro componente.
2. Crie uma variável de string, número ou booleana com múltiplos valores (ou modos).
3. Defina os valores da variável para que correspondam aos valores das propriedades do componente da instância aninhada.
4. Criar uma instância do componente.
5. Atribua a variável à propriedade variante da instância aninhada.

Agora, a instância aninhada mudará para uma variante diferente sempre que o modo mudar.

Conflitos de modo

Quaisquer modos com conflitos exibirão um ícone de informação ao lado no alternador de modo. Conflitos ocorrem quando objetos em um arquivo utilizam versões diferentes da mesma variável.

Se você escolher um Modo que tenha conflito, ele será aplicado apenas às camadas que podem renderizá-lo. A camada deve estar usando uma versão da variável que inclua esse modo.

Para resolver modos conflitantes:

1. Abra o arquivo onde a variável principal está e publique-a nas bibliotecas da equipe. 
2. Revise e aceite as atualizações do modal de biblioteca do arquivo em que os conflitos estão acontecendo.

Lembre-se de que apenas aqueles com acesso de edição a um arquivo podem fazer edições, publicar e revisar e aceitar atualizações da biblioteca no arquivo. 

Impedir conflitos de modo

Conflitos de modo podem ocorrer se um modo for excluído ou adicionado à variável, e as atualizações não tiverem sido aplicadas a um arquivo ou objeto. 

Estas são algumas maneiras como esses conflitos podem ocorrer e o que você pode fazer a respeito.