Durante todos esses anos explorando escalabilidade por meio de design tokens, uma das descobertas que realmente me animou foi o plugin Tokens Studio. Exclusivo (infelizmente) para a plataforma Figma, começou sua história (época em que se chamava Figma Tokens) de forma bem simples: oferecer uma interface que, de forma centralizada, possibilitasse a criação e gestão de design tokens, integrando-os à diversas propriedades do Figma.
O plugin direcionou seus objetivos na simplificação da entrega das decisões de design para o front-end. A sincronização com repositórios e entrega de arquivos em JSON, mediante a processos bem definidos, tornou possível realizar a gestão de design tokens no Figma que refletem no front de forma automatizada.
Acredito que o Tokens Studio tenha contribuído, por meio de seus usuários, na amplificação da percepção dos possíveis usos de design tokens e na necessidade (que sempre existiu) de designers e engenheiros “falarem a mesma língua”. Isto, por fim, estimulou a transição do Figma, de uma plataforma exclusiva para designers, para um ecossistema mais inclusivo, contemplando também os desenvolvedores.
Apesar do Dev Mode ter surgido no mesmo período, neste artigo darei foco ao Figma Variables, que é a alternativa da plataforma para design tokens. Podemos dizer que esta feature foi uma das grandes e mais aguardadas conquistas, que gerou impactos grandiosos na maneira em que os designers trabalham. O plugin Tokens Studio, por sua vez, não se deixou ficar obsoleto: implementou grandes soluções que, além dos estilos, também sincroniza os tokens criados nele, às Variables do Figma.
Trabalhar com as duas ferramentas, não só torna mais assertiva as implementações do front, como diminui inconsistências e gera mais escalabilidade. No entanto, criar protótipos que usufruem dos mesmos tokens que serão utilizados no desenvolvimento, é impossível no Figma,. A API da plataforma ainda limita uma considerável quantidade de propriedades e funções que podem ser utilizadas.
A dolorosa distribuição de tokens para Times de Design
Os design tokens são criados no plugin Tokens Studio. Para distribuí-los ao front e também ao time de design, a sincronização é feita com o Github. O front, com acesso aos arquivos JSON, consegue converter os tokens para as linguagens necessárias utilizando o Style Dicionary. Os tokens convertidos podem ser distribuídos em um pacote NPM. É só alegria para o time de front 🪄.
E como deve o time de design pode usufrui destes tokens? É aqui que o problema começa! 🤯
A sincronização do Tokens Studio com o Figma Variables trouxe mais uma facilidade. Quem tem a versão PRO do plugin, pode transformar os tokens criados em Variables apertando apenas um botão. O Variables seria a forma mais prática dos designers consumirem os mesmos design tokens que o front consumiria. No entanto, até então, me trouxe algumas boas preocupações e decepções.
💡 Devo salientar aqui, que a opção de escolha na criação via plugin, foi devido à flexibilidade para o uso de funções, criação de temas e o poder de gerar tokens escaláveis.
Notei que alguns tokens não haviam sido convertidos para variables e muito deles não funcionavam da forma esperada. Aqui estão alguns dos motivos:
- Não cadastre tokens com peso de fontes utilizando escalas numéricas (300, 400, 500, 600, 700…). O Figma só lê os valores semânticos (regular, medium, bold…). Se o time for utilizar um builder (como o Style Dicionary), os valores semânticos poderão ser transformados em numéricos de forma automática. Se não, eu lamento. Você vai ter que fazer de forma manual 😬.
- Não crie tokens de cores do tipo rgba({referencia_cor_hex}, 0.1). Pode até funcionar no plugin, mas não funciona na prática, afinal de contas, você está criando uma cor rgba(#f4f4f4, 0.1).
- Qualquer modificador para cores que você utilizar no plugin será resolvido em uma cor pelo variables. Portanto, você não conseguirá manter a referência. Ex.:
- Line-heights e Letter-spacings na unidade “em” também não serão entendidos pelo Figma (aqui estamos falando da plataforma mesmo e não do variables, já que não existe suporte para tokens tipográficos ainda). Crie valores para estas propriedades utilizando percentuais.
- Esqueça tipografia e espaçamentos fluídos. Todo cálculo que deve pegar o valor de viewport no será entendido pelo Figma. Neste caso, tive que criar tokens utilizando a função clamp e, para o Figma, uma sessão “DESIGN_ONLY” que simula o tamanho absoluto em determinadas resoluções 😭.
- Tudo que for criado como estilo e tiver cor embutida, não será impactado pelo tema (mode). Imagine que vc tem os temas Light e Dark e para cada um deles a semântica de cores é a mesma, mas cada sombra tenha uma cor diferente. Se você gerar estilos para o Figma dessas sombras, quando alternar o mode, a cor da sombra não será alterada. Você tem duas alternativas: ou muda o tema pelo plugin ou cria estilos de sombras de cada tema, apenas para uso de designers.
- Margens negativas? Não existe no figma. Apenas Gaps negativos 😒.
- E por falar em Gaps, para fazer referência ao valor “space-between” de um flex-box, que nada mais é do que o valor “Auto” do autolayout, crie, no plugin, um token com o valor “AUTO” (sim, tudo em caixa alta!😓).
- E ainda para falar de “Auto”, impossível por enquanto ter um token com este valor para trabalhar tamanhos proporcionais no Figma. Ou seja, você sempre vai ter que colocar um valor absoluto para altura e largura.
- As variables de uma lib não fazem referência à variables de outra lib. Então não dá para, de fato, ter uma lib de tokens globais.
Ok, dito isso tudo, se você ainda não tiver desistido da ideia distribuir os mesmos tokens que o front irá utilizar para o seu time de design, além das adaptações que vai precisar fazer, o time vai ter também que utilizar apenas o Tokens Studio para a construção de qualquer elemento visual 👀. Ou você pode esperar o Figma Variables dar uma boa evoluída e continuar focando nas tradicionais documentações 🤷🏻♀️.
