Por que um botão leva um mês para ficar pronto: o experimento DS Contracts tenta sincronizar código e Figma

O DS Contracts parte de uma ideia simples: um contrato em JSON descreve partes, layout, tokens, propriedades e a aparência esperada de cada variante de um componente. Esse contrato alimenta as duas direções, de React para Figma e de Figma para React, e depois serve para medir quando os dois lados se afastaram. O motor é determinístico (mesma entrada, saída idêntica byte a byte), e a IA ajuda a escrever o motor, mas nunca roda dentro dele. Quando encontra algo sem suporte, ele recusa e diz o que era, em vez de chutar um desenho.

O caso do botão do Carbon mostra por que a checagem importa. Foram 84 variantes (sete tipos, seis tamanhos, com e sem ícone) escritas em cerca de 30 segundos, com auto layout e propriedades de variante reais. Só 40 passaram. As falhas são detalhes que o olho não pega: um ícone de 16 px dentro de uma caixa de 24 px que o Figma esticou, uma rotação de 90 graus que o navegador reporta como matriz, o peso 600 da IBM Plex Sans que o arquivo de fonte chama de "SmBld" e o Figma de "SemiBold". Sem ícone, 40 de 42 variantes passam. Com o ícone, as 42 falham porque o botão sai com 140 px de largura, contra 124 px no navegador. Os números do texto são de ajuste, não de progresso: a leitura que conta usa um terço dos componentes separado antes do trabalho, medido uma vez, em 7 de dezembro de 2026. No caminho de Figma para React, o ajuste está em 40,7%, e de React para Figma, em 10,1%.

Em 2 de setembro de 2026, o CEVIU noticiou "A Saga das Especificações: Desvendando o Que o Figma Deixa para Trás na Transição Design-Código", sobre testes de ida e volta que expunham omissões silenciosas nos contratos de design para código. O DS Contracts aplica essa lógica de forma sistemática, com relatório explícito de falhas por variante. Já em 27 de abril de 2026, o CEVIU relatou, em "Aprendendo Design Systems Agentic", um fluxo bidirecional entre Figma e código com o Figma Console MCP. A diferença aqui é a verificação visual rigorosa e o conjunto reservado de testes, em vez de confiar na geração.

Para quem opera um design system, a leitura é que sincronizar código e Figma raramente falha de forma gritante. Falha em 16 px de ícone, em um nome de fonte, em um sinal de rotação. Um componente que parece certo e abre bem no playground do Dev Mode ainda pode estar errado, e sem medição você não sabe onde. Vale acompanhar a leitura de 7 de dezembro de 2026 antes de apostar em qualquer conversão automática.