Em novembro deste ano tive a oportunidade de palestrar no evento Detach! em Maceió, ao lado de grandes referências do design system no Brasil. Não preciso nem dizer que foi um baita evento, recheado de aprendizados e trocas enriquecedoras, né? Decidi abordar um tema que causaria um leve desconforto na audiência… Mas um desconforto necessário.
Você projeta seus design tokens utilizando o Figma Variables?
Essa foi a pergunta chave da minha palestra e, claro, a maioria que estava ali presente respondeu afirmativamente. Se você também faz parte desse grupo, eu tenho uma segunda pergunta: você tem certeza que está projetando design tokens?
Imagino que neste momento você se colocou a pensar no que poderia estar fazendo errado. Calma! Você não está fazendo errado… pelo menos, não completamente. E logo chegarei ao ponto central dessa provocação.
Design tokens são como nucleotídeos de um DNA
Antes de mais nada, vamos clarificar conceitos básicos sobre os design tokens. Gosto de explicar este conceito comparando design tokens a uma estrutura de DNA.
DNA (ácido desoxirribonucleico) é um composto orgânico, formado por nucleotídeos, que contém informações genéticas da grande maioria dos seres vivos. Assim como o DNA contém as instruções básicas para construir e manter um organismo vivo, os design tokens armazenam os valores fundamentais de um sistema de design, como cores, tipografia, espaçamentos e estilos.
Em uma analogia, é como se cada nucleotídeo fosse um design token e a sua composição resultasse nas características visuais e comportamentais de um elemento.
Além disso, podemos citar outra característica importante atribuída aos dois: a capacidade de evoluir e escalar. O DNA pode sofrer mutações para se adaptar e evoluir. Da mesma forma, os design tokens podem ser ajustados ou expandidos para acompanhar mudanças nas necessidades do produto ou da marca, mantendo a escalabilidade do sistema.
Essa característica, por sua vez, chama atenção para um atributo fundamental dos design tokens: agnosticidade. Design tokens são agnósticos, independentes de qualquer ferramenta, tecnologia ou implementação específica.
Já o Figma Variables…
O Figma Variables são variáveis específicas da plataforma, o que restringe seu uso ao ecossistema do Figma. Essa limitação vai contra o princípio de agnosticidade dos design tokens, que deveriam ser independentes de qualquer ferramenta ou tecnologia.
Vou listar também outras limitações do Figma Variables e os impactos em seu sistema:
Estrutura limitada para tokens contextuais
A gestão de variações contextuais, como light mode e dark mode, é possível, mas carece de flexibilidade comparada a soluções dedicadas a design tokens. Configurar e gerenciar esses contextos pode ser mais trabalhoso no Figma.
Escalabilidade restrita
Para sistemas complexos com muitas variáveis, a interface do Figma pode se tornar difícil de navegar e organizar, especialmente se houver necessidade de um grande número de categorias ou hierarquias.
Ausência de Suporte para certos tipos de tokens
O Figma Variables é limitado aos tipos de tokens suportados pela plataforma e isso acaba deixando de lado tokens que são importantíssimos para o desenvolvimento e outros mais avançados, como composições e cálculos que contribuem para escalabilidade do sistema.
Sincronização com Desenvolvimento
Apesar do Dev Mode exibir as variáveis, o Figma Variables não oferece integração automática para sincronizar tokens diretamente com repositórios ou ferramentas de desenvolvimento, exigindo soluções manuais ou o uso de plugins de terceiros.
Gestão Centralizada Limitada
Não existe um sistema robusto de governança, versionamento ou histórico das variáveis. Isso pode dificultar a manutenção em equipes grandes ou em sistemas de design de larga escala.
Então não devo utilizar o Figma Variables?
Pelo contrário, você deve! Mas com o propósito de distribuição de design tokens para times de design. O ideal é projetar design tokens de forma agnóstica, garantindo sua sustentabilidade e distribuindo-os já adaptados às tecnologias de cada equipe. Um desses times é o de design, que, na maioria das vezes, utiliza o Figma como ferramenta principal para criar protótipos.
Quais são as alternativas para projetar design tokens?
Atualmente, a melhor alternativa para projetar design tokens é o plugin Tokens Studio que pode ser encontrado no Figma. Ele possibilita a criação de todos os tipos de tokens, desde os mais simples aos mais complexos, transformá-los em variáveis para o Figma e sincronizá-los com repositórios e outro provedores. Na sua versão paga, o plugin oferece recursos avançados como gestão de branches, exportação de múltiplos arquivos JSON e suporte a temas multidimensionais.
Apesar do desconto para brasileiros, o preço do plugin é um pouco salgado, mas o time do Tokens Studio está muito à frente no que diz respeito à design tokens e suas diversas abordagens.
Eu, inclusive, disponibilizei um curso que ensina a utilizar todo o potencial do plugin para desenvolver um projeto de design tokens automatizado, dentro do conceito de estilização dinâmica, para atender múltiplas marcas, produtos e temas.
Agora, se a versão FREE não atender ao escopo e a verba for baixa para adquirir a versão paga, você ainda pode recorrer ao Figma Variables, com uma condição: lembre-se de projetar e documentar os tokens que a plataforma não oferece suporte!
Tem interesse no curso?
As inscrições já estão abertas e são mais de 20 horas de conteúdo para você se tornar um especialista em design tokens!