Construção de Design Tokens com o Figma Agent

Sobre esse case

Este case é parte de uma série de iniciativas que desenvolvi ao longo da minha trajetória profissional no setor de varejo, a partir da identificação de oportunidades de melhoria no meu fluxo de trabalho. Mais especificamente, em como podemos definir valores, que possam ser reutilizados na construção dos componentes de um design system e melhorar o entendimento do desenvolvedor com relação aos protótipos e minimizar possíveis erros.

💡

Por questões de confidencialidade, algumas informações relacionadas a onde esse projeto foi aplicado, foram ocultadas ou modificadas.

Objetivo do case

O objetivo deste case foi criar uma biblioteca de tokens de design com o apoio do agente de IA do Figma, utilizando esse recurso para acelerar a estruturação e aplicação dos tokens nos componentes do design system.

Com isso, seria possível melhorar a consistência visual, facilitar a manutenção dos componentes e tornar o processo de design e desenvolvimento mais padronizado.

Contexto inicial

Em alguns projetos em que atuei, identifiquei a falta de sistematização dos componentes e estilos visuais.

Durante a inspeção dos componentes, era comum encontrar cores aplicadas diretamente por códigos hexadecimais, sem uma referência padronizada. Em muitos casos, esses valores variavam de um componente para outro, mesmo dentro de um mesmo fluxo.

Essa falta de padronização também aparecia em outros elementos da interface, como espaçamentos, tipografia, bordas e raios de borda. Como resultado, telas pertencentes ao mesmo fluxo, apresentavam diferenças visuais que impactavam a consistência da experiência.

Algumas telas que não seguiam uma consistência

Exemplos de inconsistências nessas telas que fazem parte de um mesmo fluxo:

Inputs com estilos diferentes entre telas do mesmo fluxo;
Botões de ação com variações visuais;
Diferenças nos tamanhos e espaçamentos dos elementos;
Ausência de um padrão claro para a tipografia;
Cores aplicadas diretamente por hexadecimal, sem referência a estilos ou tokens.

Problemas identificados

A falta de padronização dificultava a manutenção do código, pois o gerenciamento de vários parâmetros em comum não estavam centralizados e precisavam ser ajustados em diferentes locais. Haviam também, muitas diferenças visuais recorrentes, entre o que era desenhado no Figma e o que era desenvolvido no produto.

Esse cenário também aumentava o risco de retrabalho, dificultava a evolução dos componentes e tornava o processo menos escalável. Sem uma base estruturada de tokens, a consistência era impactada.

Outro desafio importante era o tempo necessário para construir uma biblioteca de tokens. Havia muitos parâmetros e variações a serem mapeados, como cores, tipografia, espaçamentos, bordas e raios de borda. Além disso, a aplicação desses tokens nos componentes do design system demandaria um esforço considerável de implantação.

Como é o método convencional para cadastrar variáveis de design?

No Figma, ao acessar a aba de variáveis, é possível criar, organizar e consultar todas as variáveis cadastradas em um arquivo. Esse recurso permite estruturar parâmetros de design, como cores, tipografia, espaçamentos e raios de borda, de forma mais consistente e reutilizável.

No entanto, o cadastro manual dessas variáveis exige um grande investimento de tempo, principalmente quando existem muitos estilos, variações e modos a serem registrados.

Por exemplo, supondo que tenhamos variações de cores para cadastrar como variáveis, seria necessário:

1º passo
Criar variável de cor

2º passo
Criar nome e valor da cor

3º passo
Selecionar o escopo da cor

Apesar de ser um processo eficiente para estruturar esses parâmetros de design, quando feito manualmente, acaba se tornando repetitivo, demorado e sujeito a inconsistências. Quanto maior a quantidade de tokens a serem registrados, maior também é o esforço necessário para cadastrar, revisar e manter essa biblioteca atualizada.

Processo de construção com Figma Agent

Sobre o Figma Agent

Para contornar essa demora na implementação da biblioteca, encontrei o Figma Agent como aliado para agilizar esse processo. Essa ferramenta, é um recurso de inteligência artificial integrado ao Figma, capaz de apoiar a criação de interfaces e automatizar tarefas repetitivas no fluxo de design. Dessa forma, utilizei a ferramenta como apoio para acelerar a estruturação de uma biblioteca de tokens e sua aplicação nos componentes do design system.

A seguir, apresento os passos realizados durante esse processo:

1 - Entendimento dos componentes e padrões visuais

Inicialmente, comecei o processo analisando os componentes presentes nos fluxos do produto.

O objetivo era identificar quais parâmetros visuais se repetiam nas interfaces e poderiam ser sistematizados como tokens de design.

Durante esse mapeamento, levantei as cores utilizadas, variações de tipografia, espaçamentos, bordas, raios de borda e tamanhos recorrentes de componentes.

Nessa análise consegui entender quais elementos precisavam de padronização e qual seria a base para a estruturação inicial da biblioteca de tokens.

Elementos que foram mapeados - fluxo de exemplo

2 - Planejamento das variações

Antes de construir os tokens, foi necessário entender como as variações visuais se organizavam dentro de cada parâmetro, como cores, espaçamentos, tipografia, bordas e raios de borda.

A partir desse mapeamento, agrupei os elementos por tipo de uso. No caso das cores, identifiquei variações relacionadas à marca, estados de feedback e tons neutros. As cores de branding apareciam principalmente em botões de ação, enquanto os tons neutros eram mais utilizados em textos, fundos e elementos de apoio. Já as cores de feedback estavam associadas a estados como sucesso, alerta, informação e erro.

Para espaçamentos, raios de borda, espessuras de borda e tamanhos tipográficos, observei que as variações eram sutis, mas ainda assim precisavam de padronização. Por isso, defini uma escala baseada no grid de 4pt, utilizando valores múltiplos de 4 para criar uma distribuição mais harmônica dos elementos e melhorar a consistência visual das interfaces.

No Figma, o cadastro das variáveis é realizado pela aba de variáveis, onde é possível criar diferentes tipos de valores. Para este contexto, utilizei principalmente variáveis de cor e variáveis numéricas, de acordo com a necessidade dos tokens mapeados.

Com essa estrutura definida, organizei os tokens nos seguintes grupos:

Grupo de cores

Subgrupo 1 — Branding: cores primárias e secundárias;
Subgrupo 2 — Feedback: alerta, informação, sucesso e erro;
Subgrupo 3 — Neutros: tons utilizados em textos, fundos e elementos de apoio.

Grupo numérico

Subgrupo 4 — Border radius;
Subgrupo 5 — Spacing;
Subgrupo 6 — Stroke;
Subgrupo 7 — Font-size.

3 - Criando os tokens primitivos - Cores

A primeira etapa foi o cadastro das cores como tokens primitivos. Antes disso, já havia mapeado os valores hexadecimais correspondentes às cores de branding do produto, incluindo cores primárias, secundárias, neutras e suas respectivas variações.

Cores para serem cadastradas como tokens primitivos

No Figma Agent, o processo de cadastro foi realizado da seguinte forma:

Selecionei a área onde as cores estavam organizadas;
Agrupei as cores mapeadas para facilitar a leitura da ferramenta;
Inseri uma instrução descrevendo como os tokens deveriam ser criados e qual seria o escopo da estrutura;
Após o envio do comando, os tokens foram gerados com base nos padrões definidos.

Passo 1: Selecionar referencias e criar comando

💡

Mesmo com o apoio do Figma Agent, foi necessário revisar nomenclaturas, escopos e aplicações para garantir que a biblioteca estivesse coerente com as necessidades do produto.

4 - Definindo onde serão aplicados

Após a criação dos tokens primitivos, defini o escopo de aplicação de cada variável. No Figma, essa configuração pode ser feita pela aba lateral, onde é possível determinar em quais contextos cada variável poderá ser utilizada.

Como os tokens primitivos servem apenas como base da estrutura, eles não foram configurados para uso direto nos componentes ou nos projetos que consumiriam essa biblioteca. Dessa forma, caso a biblioteca fosse importada em outro arquivo, esses valores não apareceriam como opções aplicáveis na interface.

A ideia era que apenas os tokens semânticos fossem disponibilizados para uso. Esses tokens consumiriam os valores dos tokens primitivos e seriam aplicados de acordo com o contexto de uso, como cores de texto, fundo, borda, estados de feedback e ações principais.

5 - Criando os tokens primitivos - Espaçamento, border, border-radius…

Com o auxílio do Figma Agent, utilizei comandos específicos para criar os demais tokens da biblioteca. A partir das instruções fornecidas, a ferramenta gerou rapidamente os tokens seguindo a estrutura, nomenclatura e categorias previamente definidas.

Esse processo ajudou a reduzir o esforço manual de cadastro e contribuiu para manter uma organização mais consistente entre os diferentes grupos de tokens.

Abaixo, apresento um exemplo de token numérico primitivo criado a partir do comando informado.

6 - Criando os tokens semânticos

Os tokens semânticos utilizam como base os valores definidos anteriormente nos tokens primitivos. Para isso, criei uma nova coleção no Figma e utilizei o Figma Agent para apoiar a criação dos tokens semânticos a partir da estrutura planejada.

Diferente dos tokens primitivos, que armazenam valores brutos como códigos hexadecimais ou números, os tokens semânticos recebem nomes associados ao seu contexto de uso. Dessa forma, em vez de aplicar diretamente uma cor como #FFFFFF, por exemplo, o time passa a utilizar um token com significado mais claro, como background/default ou text/primary.

Essa abordagem torna a leitura dos tokens mais intuitiva, facilita a aplicação nos componentes e melhora a comunicação entre design e desenvolvimento.

7 - Definindo onde serão aplicados

Com o apoio do Figma Agent, criei tokens semânticos para background com escopo limitado às propriedades de preenchimento.

Essa definição facilita a aplicação correta dos tokens nos componentes do design system, reduzindo erros e garantindo mais consistência no uso da biblioteca.

Ao final, fui colocando todas as variações de tokens semânticos para os demais parametros de espaçamento, border, tamanhos, border-radius,

Exemplos de tokens criados:

8 - Publicando a biblioteca de tokens

Para disponibilizar a biblioteca de tokens criada, acessei o menu lateral Assets no Figma e utilizei o ícone de biblioteca para publicar os estilos e variáveis do arquivo.

Após a publicação, essa biblioteca passou a poder ser habilitada em outros arquivos do Figma, permitindo que diferentes projetos consumissem os tokens e componentes do design system de forma padronizada.

Resultados e impactos observados

Com os valores visuais estruturados em variáveis, foi possível reduzir diferenças entre o protótipo no Figma e a interface desenvolvida.

A biblioteca também facilitou a manutenção dos componentes, permitindo ajustes mais centralizados em cores, espaçamentos, bordas e tipografia. Além disso, a leitura no Dev Mode tornou-se mais clara, já que os valores passaram a ser apresentados por nomes de tokens com contexto de uso, em vez de hexadecimais ou números isolados.

No geral, os tokens fortaleceram a consistência visual do design system, reduziram retrabalhos e tornaram o processo de construção de interfaces mais escalável.

Aprendizados

Os tokens ajudam a melhorar a comunicação entre design e desenvolvimento. Ao substituir valores soltos por nomes com contexto de uso, a leitura dos componentes se torna mais clara e reduz as chances de inconsistências na implementação.

De forma geral, esse case fortaleceu minha compreensão sobre a importância de criar sistemas mais organizados, reutilizáveis e preparados para evoluir junto com o produto.