Figma, código e produção, conferidos entre si

Levei o design system da Airtm do Figma para o código: 35 componentes React, os tokens e seis verificações que comparam o Figma, o código e o que o app realmente entrega. Depois prototipei com ele.

A Airtm é uma carteira digital em dólar usada na América Latina e em outros mercados emergentes para guardar, enviar e receber dólares em stablecoin, com entrada e saída locais.

Design systemTokensAcessibilidadeFerramentas

Papel: Senior Product Designer. Foi uma iniciativa do time de design, e eu puxei: levar o sistema do Figma para o código, rodar o Storybook e auditar o que batia com o Figma e o que não batia. Construí com ferramentas de IA e revisei cada decisão que ele registra.
Parceiros: Time de design, engenheiros web e mobile.
Norte: Qualquer designer deveria poder perguntar ao sistema o que é uma cor ou um componente, e ter uma resposta só.

Em 30 segundos

01 · Problema: O design da Airtm vivia em três lugares que não batiam: várias bibliotecas no Figma, a biblioteca de componentes de produção e a memória de cada designer sobre as duas.
02 · Decisão: Fazer do código a referência de trabalho, e deixar scripts, e não opiniões, dizerem onde o Figma e a produção se afastam dele.
03 · Resultado: 35 componentes mais 6 módulos do kit de protótipo, com Storybook e site de documentação, seis verificações automáticas, e 52 de 56 cores primitivas batendo com a produção na primeira rodada.

O problema

Três bibliotecas do Figma ainda publicavam o próprio Button. Dois frames se chamavam Primitives. O mesmo nome de token virava dois brancos diferentes, dependendo do arquivo. A produção tinha a própria biblioteca, e ninguém sabia dizer o quanto ela estava longe do Figma. Todo protótipo começava com alguém chutando.

A restrição

Nada podia parar. O Figma continuava sendo a ferramenta dos designers, a produção continuava entregando a própria biblioteca, e ninguém tinha tempo para reescrever tudo. O que eu construísse tinha que ficar ao lado dos dois, e ser útil desde a primeira semana.

Por que tinha que ser código

Dois motivos. O time precisava ver o sistema rodando: Storybook, todos os estados e uma auditoria honesta do que batia com o Figma. E eu queria prototipar mais rápido, com componentes 100% fiéis aos desenhos do Figma. Protótipos feitos com componentes reais geram valor mais cedo, são mais fáceis de compartilhar com stakeholders e melhoram os testes com usuários, porque as pessoas reagem ao produto e não a um desenho dele.

O código como referência

Refiz o sistema em React: primeiro os tokens, depois 35 componentes com seus estados, 6 módulos do kit de protótipo, um Storybook e um site de documentação. Os protótipos importam esses componentes em vez de desenhar imitações, então protótipo e sistema não se afastam sem ninguém ver.

Verificações, não opiniões

Seis scripts rodam juntos. Eles comparam os tokens com o Figma, os tokens com a produção, os componentes com as fontes no Figma, a navegação com a taxonomia, e cada par de texto e fundo com o contraste WCAG nos dois temas. Uma diferença vira uma linha num relatório, e não uma discussão numa revisão.

A produção como terceira fonte

Quando a biblioteca de produção chegou, entrou como um snapshot e passou a ser conferida também. 52 de 56 cores primitivas bateram na primeira rodada. As quatro que não bateram eram achados reais, entre eles um cinza que estava errado nas foundations impressas havia meses.

Achados vão para pessoas

As verificações não corrigem nada sozinhas. Quando código e produção discordam, a decisão é do time de design. As verificações enfileiraram 14 dessas decisões, e cada uma ganhou um registro.

Do que eu abri mão

De uma fonte única da verdade. Continuam sendo três: o Figma para o design, o código para a intenção, a produção para o que o usuário vê. Parei de tentar juntar as três e deixei as diferenças visíveis. O custo é manutenção: alguém precisa manter os snapshots atualizados.

Resultado

Construído: 35 componentes e 6 módulos do kit de protótipo, Storybook, site de documentação e um inventário dos 156 módulos da biblioteca de produção, numa página só.
Encontrado: 30 pares de cor abaixo do WCAG AA, os dois brancos por trás de uma inconsistência antiga, e nomes de componentes publicados duas vezes no Figma.
Usado: Meus protótipos e handoffs na Airtm saíram dele, de maio a setembro de 2026. A produção manteve a própria biblioteca; as verificações medem a distância.

O que eu faria em seguida

Rodar as verificações no CI a cada mudança do design system, e levar os 30 pares de contraste para triagem com o time. Essa lista é o trabalho de acessibilidade mais direto que o sistema ainda tem.

Próximo projeto