Visão geral de variáveis, coleções e modos

Antes de você começar

Quem pode usar este recurso

Qualquer pessoa em qualquer plano pode criar e usar variáveis

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

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

As variáveis são valores brutos, como cores, números e strings, que podem mudar de valor dependendo do contexto de um design, como modos claros e escuros ou modos de dispositivo móvel e de desktop.

Assim como os estilos e componentes, as variáveis também podem ser publicadas nas bibliotecas da equipe. Quando você atualiza o valor de uma variável, pode atualizar os designs nos arquivos de forma correspondente. Isso ajuda a criar designs consistentes em todos os projetos e torna a atualização dos sistemas de design mais eficiente.

Tipos de variáveis

Há quatro tipos de variáveis. Cada uma delas pode ser aplicada a propriedades e elementos específicos.

Tipo de variável	Definido por
Cor	Preenchimentos sólidos
Número	Valores numéricos
String	Strings de texto
Booleano	Valores verdadeiros e falsos

Variável de cor

As variáveis de cor usam valores de cores sólidas, como #000000 ou #FFCD29.

Elas são ótimas para lidar com temas, como os modos Escuro e Claro. Também podem ajudar você a organizar a paleta de cores de sua marca. Se você tiver um sistema de design complexo e desejar implementar tokens de design, poderá criar nomes de variáveis ​​de cores para fazer isso.

Variável numérica

As variáveis numéricas usam valores numéricos, como 24 ou -8. Você pode usar números inteiros ou qualquer número decimal até a centésima casa, como 12,75.

Elas são excelentes para lidar com designs responsivos e propriedades de texto variadas entre diferentes idiomas. Você também pode numerar variáveis dentro dos estilos de texto para ter estilos predefinidos reutilizáveis e não precisar memorizar quais propriedades combinam entre si.

Algumas propriedades têm um intervalo menor de números que suportam. Verifique a alternância abaixo para obter detalhes.

Variável de string

As variáveis de string usam uma sequência de caracteres, como Inter, Olá, mundo! ou 94102. Elas são ótimas para alternar idiomas entre diferentes designs localizados, combinando com outras variáveis para criar estilos de texto e alternando variantes de componentes na prototipagem.

Variável booleana

As variáveis booleanas usam valores true e false. Elas são ótimas para ocultar e exibir camadas para contextos específicos de seus designs.

Tokens e aliasing

Uma variável pode fazer referência a outra variável. Ou seja, você pode aplicar uma variável a outra variável. Também chamado de "aliasing", oferece a capacidade de implementar tokens de design.

Qualquer variável pode fazer referência a outra variável do mesmo tipo. Por exemplo, as variáveis de cor podem fazer referência a outras variáveis de cor. As variáveis de texto podem fazer referência a outras variáveis de texto.

Saiba como criar aliases para variáveis →

Coleções e grupos

Tanto as coleções quanto os grupos são usados para organizar variáveis e facilitar a localização delas.

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.

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.

Modos das variáveis

Um modo é uma lista de valores para uma variável em uma coleção, armazenando um valor por variável. Os modos também representam os diferentes contextos de nossos designs.

Se uma variável tiver várias definições, cada definição será associada a um modo. Quando a variável é aplicada à propriedade de uma camada, a camada expressa o valor com base no modo em que se encontra no momento, o que nos permite alternar rapidamente nossos designs entre contextos.

Por exemplo, podemos ter uma variável de cor armazenando dois valores de cor: uma cor azul em um modo e uma cor branca em um modo diferente. Aplicamos esta variável a uma camada de texto, que aparecerá em azul ou branco dependendo do modo em que estiver.

Estas são algumas maneiras de usar os modos para alternar contextos:

• Temas de cores diferentes, como modos claro e escuro
• Diferentes idiomas para ver como a cópia flui nos designs
• Tamanhos de dispositivos para ver como os elementos ficam com espaçamento e preenchimento diferentes

Saiba como alternar contextos de design com modos de variáveis →

Considerações

Estilos e variáveis

Tanto as variáveis quanto os estilos atuam como uma fonte de verdade e podem ser reutilizados em todos os designs para aumentar a eficiência e a consistência.

Ao decidir se deve usar uma variável ou um estilo, tenha em mente que:

• Um estilo é ótimo para criar uma composição de valores. Além disso, os estilos não podem ser usados em outros estilos ou variáveis.
• As variáveis podem ser usadas para criar vários modos — como os modos claro e escuro. Além disso, as variáveis podem ser aplicadas a estilos e outras variáveis, permitindo a implementação de tokens de design.

Saiba a diferença entre estilos e variáveis →