Criar e gerenciar variáveis e coleções

Antes de começar

Quem pode usar esse recurso

Qualquer pessoa em qualquer plano

Qualquer pessoa com acesso de edição a um arquivo pode criar e editar variáveis.

Procurando mais recursos sobre variáveis? Confira o nosso guia sobre variáveis.

Acessar o modal Variáveis

Use o modal variável para criar e gerenciar:

1. Coleções de variáveis
2. Variáveis
3. Modos de variáveis
4. Grupos de variáveis

Para acessar o modal Variáveis:

1. Desmarque tudo na tela de trabalho pressionando esc ou clicando na tela.
2. Na barra lateral direita, encontre a seção Variáveis locais.
3. Clique em Variáveis abertas.

Você pode clicar em Alternar barra lateral para ver opções adicionais no modal de variáveis.

Criar uma variável

1. Em qualquer coleção, clique em + Criar variável.
2. Selecione um tipo de variável no menu suspenso.
3. Dê à variável um nome na primeira coluna e um valor na segunda coluna.

Cada coleção pode conter até 5.000 variáveis.

Para duplicar uma variável, selecione uma ou mais variáveis e pressione ⇧ Shift Enter.

Para deletar uma variável, clique com o botão direito na variável e selecione Deletar variável.

Criar um alias

Crie um alias para uma variável para associar seu valor a uma variável já existente. Isso permite implementar tokens de design e torna o gerenciamento de atualizações dos seus designs mais eficiente.

Por exemplo, vamos supor que você tem muitas variáveis de cor que referenciam a mesma variável de cor. Se for necessário atualizar essa cor, basta atualizar a origem em vez de atualizar manualmente cada instância da cor.

Uma variável pode referenciar outras variáveis do mesmo tipo.

Para criar um alias para uma variável:

1. Abra o modal Variáveis.
2. Clique com o botão direito no valor de uma variável e selecione Criar alias.
3. Na aba Bibliotecas, escolha uma variável para definir um alias. Você pode usar a barra de busca para encontrar uma variável pelo nome ou explorar as bibliotecas disponíveis.

Para desvincular um alias, passe o mouse sobre o campo de valor e clique em Desvincular alias.

Copiar e colar variáveis

Você pode copiar e colar variáveis em qualquer coleção, incluindo coleções em um arquivo diferente.

1. Abra a coleção desejada no modal de variáveis.
2. Selecione uma ou mais variáveis.
   • Mantenha pressionada a tecla ⌘ Command para Mac ou ⌃ Control para Windows para selecionar várias variáveis.
   • Mantenha pressionada a tecla ⇧ Shift para selecionar um intervalo de variáveis.
3. Clique com o botão direito na seleção e escolha Copiar.
4. Em qualquer coleção, clique com o botão direito e selecione Colar.

Editar uma variável

Passe o mouse sobre a linha de uma variável e clique no ícone Editar variável para abrir seu modal de edição.

A partir daí, você pode:

1. Altere o nome da variável.
2. Adicione uma descrição para explicar como a variável deve ser utilizada.
3. Altere os valores da variável.
4. Adicionar sintaxe de código.
5. Ocultar a variável da publicação.
6. Defina o escopo de uma variável para limitar a quais propriedades a variável pode ser aplicada.

Escopo de uma variável

Defina o escopo de uma variável para limitar a quais propriedades a variável pode ser aplicada. Isso reduz a incerteza ao decidir quais variáveis usar nos seus designs.

Por exemplo, se você definir uma variável numérica para o raio do canto, a variável só poderá ser aplicada a esse raio e não aparecerá como opção para outras propriedades compatíveis.

O escopo está disponível para variáveis de número, cor e string.

Para definir o escopo de uma variável:

1. Clique com o botão direito em uma variável ou em várias variáveis e selecione Editar variável. Você também pode clicar em Editar variável, localizado à direita de qualquer variável.
2. Abra a aba Scope.
3. Use as caixas de seleção para alternar a disponibilidade da variável naquela propriedade. Marque Mostrar em todos para tornar a variável disponível para todas as propriedades suportadas.

Adicionar sintaxe de código

A sintaxe de código permite representar variáveis no código usando nomes de variáveis válidos para oferecer suporte a uma experiência de transferência contínua. A sintaxe do código de uma variável aparecerá em trechos de código no Dev Mode ao inspecionar elementos usando a variável. Atualmente, trechos de código para variáveis são suportados em CSS, SwiftUI e Compose. 

Você pode criar um nome por plataforma, incluindo Web, Android e iOS. Isso permite até três sintaxes de código por variável. 

Para adicionar a sintaxe de código a uma variável:

1. Na seção Sintaxe de código do modal Editar variável, clique em Adicionar sintaxe de código.
2. No menu suspenso, escolha Web, Android ou iOS.
3. Use a caixa de entrada para digitar um nome de variável. Uma visualização mostra como o nome da variável aparece nos trechos de código.

Editar variáveis em massa

Para editar várias variáveis de uma só vez:

1. Abra qualquer coleção no modal Variáveis.
2. Selecione várias variáveis utilizando atalhos de teclado:
   • Mantenha pressionado ⌘ Command / Control e clique para selecionar variáveis individuais
   • Mantenha Shift pressionada e clique para selecionar um intervalo de variáveis
3. Clique com o botão direito do mouse em uma variável selecionada e clique em editar variável.
4. No modal Editar variáveis, você pode:
   • Dimensionar variáveis, caso permitido pelo tipo de variável
   • Ocultar variáveis da publicação

Criar e gerenciar coleções de variáveis

Uma coleção é um conjunto de variáveis e modos. As coleções podem ser usadas para organizar variáveis relacionadas. Por exemplo, use uma coleção para localizar texto em diferentes idiomas e outra coleção para valores espaciais.

Criar uma coleção de variáveis

Para criar uma coleção de variáveis, vá para a barra lateral do modal de variáveis e clique em Mais opções > Criar coleção.

Se uma variável não foi criada em um arquivo, você precisará criar uma variável primeiro para poder criar novas coleções de variáveis.

Renomear uma coleção de variáveis

Para renomear uma coleção de variáveis:

1. Na barra lateral do modal de variáveis, abra o menu suspenso de coleções e escolha a coleção que deseja gerenciar.
2. Clique em Mais opções e selecione Renomear coleção.

Excluir uma coleção de variáveis

Excluir uma coleção de variáveis também exclui todas as variáveis contidas nela. Quaisquer propriedades que estavam usando as variáveis não estarão mais conectadas à variável e a quaisquer modos existentes. As variáveis e a coleção só podem ser restauradas ao desfazer imediatamente a ação ou ao restaurar uma versão anterior do arquivo. 

Para excluir uma coleção de variáveis:

1. Na barra lateral do modal de variáveis, abra o menu suspenso de coleções e escolha a coleção que deseja gerenciar.
2. Clique em Mais opções e selecione Excluir coleção.

Reordenar coleções de variáveis em um arquivo

Reorganize suas coleções de variáveis para organizar e encontrar variáveis mais rapidamente ao aplicá-las em designs. Alterar a ordem das Coleções de variáveis afetará a ordem em que elas aparecem no seletor de modo da variável e nos seletores de variáveis.

Para reordenar coleções de variáveis em um arquivo:

1. Na barra lateral do modal de variáveis, clique em Mais opções e selecione Reordenar coleções.
2. No pop-up Coleções, você pode:
   • Clique e arraste para reordenar as coleções
   • Ou clique em Classificar de A a Z para ordenar as coleções em ordem alfanumérica

Agrupar uma seleção de variáveis

Você pode organizar ainda mais as variáveis adicionando-as a grupos em uma coleção. Por exemplo, use um grupo para cores usadas no texto e outro para cores usadas nos traços.

Para organizar as variáveis em um grupo:

1. No modal Variáveis, selecione várias variáveis:
   • Mantenha pressionada a tecla ⌘ Command / Control para selecionar várias variáveis
   • Mantenha pressionada a tecla ⇧ Shift para selecionar um intervalo de variáveis
2. Clique com o botão direito na seleção e selecione Novo grupo com seleção.

Clique e arraste os grupos na barra lateral do modal variável para reordenar os grupos. Você também pode clicar e arrastar grupos para outros grupos para agrupá-los. 

Renomear um grupo

1. Na barra lateral do modal de variáveis, clique duas vezes no nome do grupo.
2. Digite um novo nome para o grupo de variáveis.

Gerenciar um grupo

1. Na barra lateral do modal de variáveis, clique com o botão direito no nome do grupo na barra lateral.
2. No menu, escolha entre as seguintes opções:
   • Desagrupar
   • Duplicar grupo
   • Excluir grupo