A diferença entre variáveis e estilos
À medida que o Figma estende seu conjunto de recursos com variáveis, você pode estar se perguntando: qual é a diferença entre variáveis e estilos? Quando devo escolher um em vez do outro? Os estilos estão se tornando obsoletos?
Afinal, eles parecem funcionar de maneira semelhante à primeira vista:
- Ambos atuam como fontes da verdade.
- Ambos podem ser publicados em bibliotecas de equipe e reutilizados em todos os designs.
- Ambos promovem o gerenciamento eficiente do design system porque as atualizações de uma variável ou estilo gerarão atualizações em todos os designs que os utilizam.
Estilos e variáveis têm diferenças importantes que os tornam valiosos em diferentes situações.
Neste artigo, destacaremos as diferenças entre eles e ajudaremos você a decidir se deve usar um ou ambos em seus projetos.
Diferenças fundamentais
Existem algumas diferenças principais entre estilos e variáveis: os tipos de valores que utilizam, sua aparência na tela de trabalho e o uso de modos.
Os estilos podem armazenar uma variedade de propriedades:
- Uma propriedade com um único valor bruto, como um preenchimento sólido
#FFFFFF - Uma propriedade com múltiplos valores brutos, como um gradiente de cor
- Outros formatos como modos de mesclagem, imagens, GIFs, vídeos
Os estilos são projetados para conter uma combinação de valores, onde todos os valores são expressos simultaneamente. Por exemplo, você pode armazenar as propriedades de família de fontes, tamanho da fonte e peso da fonte em um único estilo de texto simultaneamente. Quando aplicares o estilo de texto numa camada de texto, todas as propriedades serão aplicadas simultaneamente na camada de texto.
Em outro exemplo, vamos dar uma olhada nos estilos de cores que podem ser uma combinação de diferentes tipos de preenchimento e variáveis, e estão organizados em uma pilha de cima para baixo. Um estilo de cor é como olhar para uma "pilha" de cartões de cima, onde cada cartão é um preenchimento. Se a cor no topo for transparente o suficiente, você consegue ver a cor abaixo. Você também pode reorganizar manualmente o preenchimento para alterar o que vê de cima.
Variáveis podem armazenar valores únicos e brutos. Por exemplo, valores brutos podem incluir preenchimentos sólidos como #FFFFFF, números como 16 ou -32,75 e valores booleanos true e false.
Variáveis são criadas para armazenar um ou mais valores únicos e reutilizáveis, mas apenas um valor pode ser expresso de cada vez. Cada valor corresponde a um modo da variável diferente. Isso vale para todos os tipos de variáveis. Ao contrário dos estilos, uma variável é como um conjunto de cartas onde você pode ver apenas uma carta, e qual carta você vê depende do contexto.
Por exemplo, digamos que temos uma coleção de variáveis com modos claros e escuros. Nós os aplicamos a várias camadas em um quadro e definimos o quadro no modo escuro. Todas as camadas com as variáveis expressarão os valores do modo escuro. Se mudarmos o quadro para o modo claro, as variáveis mudarão seus valores expressos para o modo claro.
Embora os modos sejam criados para variáveis, o Figma permite que você os aplique a estilos.
Digamos que temos uma variável numérica para o tamanho padrão da fonte. A variável possui dois valores brutos únicos:16para o modo móvel e18para o modo desktop. Aplicamos esta variável à propriedade de família de fontes de um estilo de texto, assim como outras variáveis e valores a outras propriedades.
Agora, podemos alternar o modo em qualquer camada de texto usando este estilo de texto, pois ele utiliza uma variável com múltiplos modos.
Saiba como basear estilos em variáveis.
Conclusões
- Uma variável armazena valores brutos e reutilizáveis. Os estilos armazenam uma composição de diferentes valores.
- Se uma variável tiver múltiplos valores (ou seja, modos), ele só pode expressar um valor por vez. Os valores que compõem um estilo são expressos simultaneamente.
- Se você quiser criar diferentes contextos para seus elementos de design (como modos claro e escuro), precisará usar variáveis e modo da variável.
Escalabilidade e gerenciamento
Uma das maneiras mais poderosas de gerenciar e dimensionar um design system é através de tokens de aliasing.
- Um token de design é um termo da indústria para se referir a valores reutilizáveis, que servem para ajudar a manter a sintonia entre o design e o código.
- Aliasing é um método de organização de um Design System que permite que qualquer token herde o valor de outro token.
Variáveis permitem que você faça exatamente isso.
Por exemplo, suponha que a variável "brand-400" (que é um dos nossos tokens de design) tenha o valor #EAEA00. Queremos que a variável "icon-default" (outro token de design) seja um alias de brand-400, o que significa que herdará qualquer valor que brand-400 tenha.
Se o valor de brand-400 mudar, então o ícone-padrão seguirá, desde que ainda esteja vinculado à definição de brand-400.
Os estilos não oferecem suporte a aliasing. Em outras palavras, não podem ser aplicados a variáveis e outros estilos. As variáveis podem ser aplicadas a ambos.
Como as variáveis aceitam aliasing, elas oferecem um suporte mais robusto para estruturas de tokens complexas e escaláveis. Eles permitem que você defina valores primitivos que podem fluir através de outros tokens e elementos do seu design system. Também aumenta a eficiência na atualização e no gerenciamento de design systems.
Por exemplo, vamos supor que criamos uma variável que funciona como um token global e a utilizamos para definir outras variáveis em diferentes níveis. Se o token global mudar, então tudo a jusante mudará.
Se quisermos que apenas alguns tokens sejam alterados, essa estrutura nos permite escolher o token correto a montante e alterá-lo sem precisar refazer manualmente tudo a jusante.
O aliasing é suportado para todos os tipos de variáveis. Saiba como criar variáveis de alias.
Conclusões:
- As variáveis podem ser aplicadas a estilos e outras variáveis, mas os estilos não podem ser aplicados a nenhum deles
- As variáveis ajudam a escala de um Design System em crescimento e tornam a gestão de um Design System mais eficiente.
Funcionalidades compatíveis
Variáveis de escopo
O escopo é totalmente suportado para variáveis numéricas, mas será expandido para outros tipos de variáveis no futuro.
Defina o escopo das variáveis para limitar a quais propriedades uma variável pode ser aplicada.
Por exemplo, você pode limitar uma variável de cor apenas a preenchimentos de traço, de modo que não seria possível aplicar a variável a outras propriedades de preenchimento. Isso te dá melhor controle sobre onde pode ser usado e elimina as suposições ao projetar.
Saiba como definir o escopo das variáveis.
Conclusões:
- Como o escopo está disponível para variáveis, mas não para estilos, use variáveis se você quiser aproveitar as capacidades de escopo
- Atualmente, o escopo está disponível para variáveis numéricas e será expandido para outros tipos no futuro
Protótipos com variáveis
Em prototipagem, variáveis são usadas para armazenar estados ou propriedades de objetos. Interações de protótipo são usadas para modificar valores de variáveis, o que pode alterar a aparência, o conteúdo ou a visibilidade de objetos em um design — tudo em apenas alguns quadros simples.
Saiba como usar variáveis em protótipos avançados.
Sintaxe de código com variáveis
A sintaxe de código está em desenvolvimento e estará disponível em breve.
Quando você abrir o modal de edição de uma variável, verá uma seção intitulada Sintaxe de código. A sintaxe de código representa variáveis no código usando nomes de variáveis válidos. Essas informações aparecerão no Dev Mode e ajudarão designers e desenvolvedores a criar uma experiência de handoff perfeita.
Saiba mais sobre a sintaxe do código.
Conclusão: Se você está procurando melhorar sua experiência de transferência, pode considerar as variáveis e a sintaxe do código
Considerações finais
A opção de usar variáveis ou estilos depende muito dos seus objetivos. Você pode se concentrar apenas em variáveis para tirar proveito da escalabilidade dos tokens de design. Ou você pode achar que seguir estilos é adequado para seus projetos. Ou ainda, você pode acabar usando uma combinação de ambos!
Os estilos continuarão sendo um recurso fundamental no Figma Design. Apesar de suas semelhanças, as variáveis não substituem os estilos. Em vez disso, eles são complementares ao conjunto de recursos principais do Figma.