O que são as variáveis do Figma?
Variáveis do Figma são valores nomeados guardados dentro de um arquivo do Figma para cores, números, textos e booleanos, com modos para casos como tema claro e escuro. São a forma nativa de tokens de design no Figma, mas lê-las pela API REST do Figma exige um plano Enterprise.
O que elas fazem
Variáveis permitem que um arquivo do Figma guarde valores nomeados em vez de repetir valores crus. Quatro tipos são suportados: cor, número, string e booleano.
Elas podem ser organizadas em coleções, e cada coleção pode ter modos - mais comumente claro e escuro, mas também densidade, marca ou plataforma. Uma camada vinculada a uma variável se atualiza quando o modo muda, o que faz o theming dentro do Figma funcionar como deveria.
Variáveis também podem ser alias de outras variáveis, e é assim que se constrói uma camada semântica: text/danger apontando para red/600.
Onde está a dificuldade
Variáveis resolvem o problema dentro do Figma. O problema fora dele continua sem solução, e é aqui que os times se surpreendem.
Ler variáveis pela API REST do Figma exige um plano Enterprise. O endpoint existe, e responde 403 nos planos Professional e Organization.
A consequência prática é significativa ao avaliar ferramentas. Qualquer coisa que prometa sincronização de tokens do Figma pela API REST funciona numa conta Enterprise e não faz absolutamente nada no plano que a maioria dos times tem. Vale perguntar diretamente antes de comprar, porque isso normalmente não aparece em material de marketing.
Plugins não são afetados. A API de plugins lê variáveis de dentro do arquivo, e um plugin roda em qualquer plano. Uma ferramenta cujo transporte é um plugin funciona independentemente do seu nível de Figma.
Variáveis e tokens de design
Variáveis do Figma são uma forma de token de design, restrita ao Figma. Sozinhas não são portáteis: não há exportação embutida para CSS, para Tailwind ou para o formato JSON de tokens do W3C.
Cobrir essa distância é exatamente para o que serve o ferramental de tokens. A escolha é entre um plugin, que funciona em todo lugar, e a API REST, que não.
Onde o Flash DSM entra
O Flash DSM usa um plugin do Figma como transporte exatamente por esse motivo. Ele lê variáveis em qualquer plano do Figma, transforma uma publicação num diff de tokens revisável e exporta para CSS, Tailwind, Tokens Studio JSON ou um pull request no GitHub.