Figma Code Connect: como a IA muda a ponte entre design e engenharia

O problema que todo squad de produto conhece: o layout sai bonito no Figma↳Figma3 conteúdosFigma Dev Mode funciona mesmo? Testando na práticaDev (Back & Front) · mar 2025Claude Design: nova aposta da Anthropic contra Figma e MicrosoftProduto & UX · abr 2026A importância do HTML e CSS para quem trabalha com UI Design e Design SystemProduto & UX · dez 2024Ver tudo em Produto & UX →, chega no dev e vira outra coisa. Botão com espaçamento diferente, componente reimplementado do zero, estado de foco que ninguém mapeou. Cada handoff é uma chance de retrabalho. É exatamente esse ponto de atrito que o Code Connect, documentado no portal de desenvolvedores do Figma, tenta atacar, e a lógica dele muda com a entrada de agentes de IA↳Agentes de IA42 conteúdosOpera passa a integrar ChatGPT, Claude e outros agentes de IADev (Back & Front) · mar 2026Operações mais inteligentes, decisões mais rápidas: o impacto da IA agêntica na rotina de TIAI · abr 2026Adobe aposta em orquestração de agentes de IA: o que muda para devsDev (Back & Front) · abr 2026Ver tudo em AI → no fluxo.

O que o Code Connect realmente faz

Code Connect é, nas palavras da própria documentação, "uma ponte entre sua base de código e o Dev Mode do Figma", ligando os componentes que vivem no repositório aos componentes que vivem no arquivo de design. Não é geração automática de código a partir do nada: é mapeamento explícito. Você diz ao Figma que aquele Button do design system corresponde a este componente React↳React37 conteúdos7 erros com React moderno que só aparecem em produção; e como evitarDev (Back & Front) · abr 2026React Native 0.76: o futuro do desenvolvimento mobileDev (Back & Front) · out 2024Simplificando componentes com React HooksDev (Back & Front) · mar 2019Ver tudo em Dev (Back & Front) → (ou SwiftUI, ou Vue) no seu código.

O detalhe que muda o jogo em 2025 é o destino desse mapeamento. Essas conexões alimentam o Figma MCP server, o servidor que expõe o contexto do design system para ferramentas com IA e editores de código. Ou seja: quando um agente de IA vai implementar uma tela, ele não recebe mais só um print e um palpite; ele recebe a referência do componente de produção que já existe. A documentação é direta ao dizer que as conexões dão aos agentes "referências diretas ao seu código real".

Na prática, isso significa que a promessa deixa de ser "a IA escreve seu botão" e passa a ser "a IA reusa o botão que seu time já aprovou". A diferença é enorme para consistência e acessibilidade, porque o componente correto já carrega os estados, os labels e o comportamento de teclado que alguém validou uma vez.

UI ou CLI: dois níveis de acoplamento

A documentação apresenta dois caminhos, e a escolha entre eles é uma decisão de maturidade de time, não de gosto.

O caminho UII é "language-agnostic" e rápido: você autoriza o Figma a acessar um repositório GitHub (um repo por arquivo de biblioteca) ou informa os caminhos manualmente. Serve bem para começar e para times que usam outro sistema de versionamento.

Já o CLI é onde mora a precisão. Ele usa template files, um formato agnóstico de framework que a Figma agora recomenda como padrão (os parsers específicos por framework, avisa a doc, "não são mais mantidos ativamente"). Com o CLI, o Dev Mode exibe o snippet real definido pelo seu design system em vez do código autogerado genérico, e as propriedades do Figma são mapeadas para a API de produção. Um variant=primary no design vira a prop correta no código.

Um ponto útil que a documentação registra: os dois modos convivem. Conexões feitas pelo CLI aparecem na UI, mas só podem ser editadas pelo CLI. E um mesmo componente de design pode apontar para várias implementações, o exemplo da doc é um Button conectado simultaneamente a React, SwiftUI, Jetpack Compose e Vue, cada um com caminho e instruções próprias.

O que isso substitui e o que quebra

O que Code Connect substitui é o snippet genérico do Dev Mode e, principalmente, a adivinhação do agente de IA. O que ele não substitui é o trabalho de curadoria. A doc é clara sobre isso ao descrever o passo de implementação do CLI: os devs donos do design system "devem trabalhar com os designers para mapear as propriedades do Figma". Não é um botão mágico; é um contrato mantido a duas mãos.

Há limites técnicos que valem anotar antes de vender a ideia para o time:

• Recurso disponível apenas nos planos Organization e Enterprise, com assento Full ou Dev. Não é para qualquer conta.
• GitHub Enterprise Server não é suportado na conexão via UI.
• Componentes conectados pela UI não exibem snippet no painel Inspect, só nome/caminho e preview de IA. Para snippet real no Inspect, é CLI.
• Os previews da UI são gerados em contexto diferente da resposta do MCP, então "o código de preview pode diferir levemente" do que o agente produz de fato.

Por que acessibilidade precisa entrar antes

Aqui está a parte que costuma ficar de fora do discurso de eficiência. Code Connect propaga o que já existe no design system. Se o seu componente de produção tem contraste ruim, foco invisível ou falta aria-label, o Code Connect vai espalhar esse defeito com eficiência total, e agora com a chancela de um agente de IA que o trata como fonte de verdade.

A leitura que eu faria: acessibilidade não pode ser auditada depois que o componente já está conectado e sendo replicado por IA. Ela precisa ser parte da definição de pronto do próprio design system antes de qualquer mapeamento virar padrão de squad. Um design system que serve de fonte para IA tem responsabilidade dobrada, porque o erro deixa de ser pontual e vira sistêmico.

O campo de custom instructions que a doc menciona (texto que a Figma inclui na saída do MCP para orientar as ferramentas de IA) é justamente onde dá para ancorar regras de acessibilidade: instruir o agente a preservar labels, papéis ARIA e ordem de foco ao reutilizar o componente. Usar esse campo com intenção é o que separa um mapeamento apressado de um contrato bem-feito.

Quando ainda não vale

Para um squad brasileiro sem design system consolidado, Code Connect é esforço na ordem errada. Ele pressupõe componentes de produção estáveis e uma biblioteca publicada e organizada. Sem isso, o time gasta energia mapeando o que ainda vai mudar semana que vem, e a IA passa a citar componentes que não representam um padrão de verdade.

O caminho que faz sentido é sequencial: primeiro amadurecer a biblioteca e cravar acessibilidade na definição de pronto; depois começar pela UI para provar o valor em poucos componentes de alto uso; e só então migrar para o CLI nos componentes que merecem snippet fiel no Dev Mode. Fazer o inverso é automatizar a bagunça.

Fonte 1: Documentação oficial do Figma - Code Connect (https://www.figma.com/developers/code-connect)

Fonte: Documentação oficial do Figma - Code Connect e First Draft