Com o lançamento das variáveis no Figma, 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?

Embora pareçam funcionar de maneira semelhante à primeira vista, existem duas diferenças principais entre variáveis e estilos: os valores que eles usam e como esses valores são expressos no canvas.

Em relação aos valores, as variáveis de cor podem conter apenas valores de cor únicos (preenchimentos sólidos), enquanto os estilos de cor podem conter valores de cor únicos e múltiplos (preenchimentos sólidos, preenchimentos de gradiente, imagem, GIF, vídeo e modos de mesclagem).

Quanto à aparência no canvas, os estilos são construídos para conter uma combinação de valores que são expressos de uma só vez. Por exemplo, um estilo de cor é como uma "pilha" de cartas vistas de cima, onde cada carta representa um preenchimento. Já as variáveis são construídas para conter um ou mais valores separados, mas apenas um valor pode ser expresso de cada vez. É como um conjunto de cartas em que você pode ver apenas uma carta por vez.

Em termos de gerenciamento do Design System, as variáveis permitem criar tokens de design, que são fontes de verdade que podem ser gerenciadas de forma eficiente. As variáveis também podem ser referenciadas umas às outras, permitindo que uma variável herde o valor de outra.

No entanto, os estilos também têm suas vantagens. Eles são mais adequados para preenchimentos complexos, como gradientes, e podem ser aplicados a várias propriedades de cor.

Em resumo, a escolha entre variáveis e estilos depende dos seus objetivos. Se você precisa de cores reutilizáveis que respondam a diferentes modos, as variáveis são a melhor opção. Se você precisa de preenchimentos mais complexos, os estilos são mais adequados. Em muitos casos, uma combinação de ambos pode ser a solução ideal.

É importante ressaltar que os estilos continuarão sendo uma característica fundamental no Figma e as variáveis são um complemento a esse conjunto de recursos. As variáveis estão em beta aberto e continuarão a ser aprimoradas com o tempo.