Figma Make e Code Connect: como redesenhar o handoff quando a IA gera UI no canvas

O problema não é a IA↳Inteligência artificial440 conteúdosUX e IA: Transformando Experiências Digitais com Inteligência ArtificialProduto & UX · jan 2025MCP: O que é e por que você vai ouvir falar disso em breve?AI · jul 2025IA generativa e a urgência de reconstruir nossa relação com a verdadeAI · jun 2025Ver tudo em AI → gerar telas bonitas. É que, quando o próprio 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 → passa a cuspir variações de UI e trechos de código a partir de um prompt, o gargalo deixa de ser produzir e vira decidir: qual variação vai pra frente, o que está acessível, o que respeita o design system e o que é alucinação plausível. Quem vinha tratando handoff como "entregar o arquivo" precisa recolocar a pergunta: onde entra o julgamento humano quando a máquina já entregou dez opções?

A documentação de Code Connect no Help Center do Figma ajuda a enxergar o encanamento por trás disso. Ela descreve como o Figma conecta componentes do repositório de código aos componentes dos arquivos de design, alimentando o servidor MCP (Model Context Protocol) que, por sua vez, guia os agentes de IA com "referências diretas ao seu código real". Ou seja: a qualidade do que a IA gera no canvas depende diretamente de quão bem o time mapeou design e código. Sem esse mapeamento, o agente inventa a implementação.

O que o Code Connect faz por baixo

Code Connect é, nas palavras da própria Figma, "uma ponte entre a sua base de código e o Dev Mode". Ele existe em duas formas, e a escolha entre elas já é uma decisão de processo:

Os dois caminhos alimentam o mesmo servidor MCP. A UI é rápida, agnóstica de linguagem e conecta a um repositório GitHub (ou por caminhos digitados à mão). O CLI usa template files agnósticos de framework para mapear propriedades do Figma à API de produção, gerando no Dev Mode snippets que refletem o componente real, não um chute autogerado. Detalhe importante da doc: os parsers específicos por framework não são mais mantidos, e template files são o formato recomendado.

Um exemplo concreto de por que isso muda o jogo: a UI suporta conexão um-para-muitos. Um único componente Button no design pode apontar para suas implementações em React, SwiftUI, Jetpack Compose e Vue, cada uma com caminho, nome e instruções próprias. Quando um agente de IA for gerar o botão, ele parte do que existe em produção, não de um padrão genérico da internet.

Onde o handoff quebra

O modelo antigo era linear: designer fecha a tela, dev abre o Inspect, traduz. Com geração no canvas, o fluxo vira iterativo e paralelo, e três pontos de atrito aparecem.

Curadoria vira etapa formal. Se a IA entrega variações, alguém precisa ter critério explícito para escolher. "Ficou bom" não é critério. Vale documentar o que descarta uma variação de saída: contraste insuficiente, hierarquia tipográfica furada, componente fora da biblioteca, estado de foco ausente.

Snippets de preview não são a fonte da verdade. A própria Figma avisa que os previews da UI são gerados "em um contexto diferente das respostas do servidor MCP" e podem divergir do que o agente produz com histórico de conversa e outro contexto. Traduzindo: o código que o designer vê no preview pode não ser o que sai na mão do dev. Isso precisa entrar na comunicação do time, ou vira briga de "mas no Figma tava assim".

Componentes conectados pela UI não mostram snippet no Inspect. Eles exibem só arquivo e nome, mais previews de IA. Quem depende do Inspect para o código canônico precisa do CLI. Escolher a ferramenta errada esconde informação que o dev esperava ter.

Acessibilidade não é passo opcional do QA

Aqui está o ponto que a euforia com geração costuma pular. Modelos generativos otimizam para o que parece certo, e acessibilidade raramente é o que "parece". Contraste que passa no olho mas reprova no WCAG, ordem de foco herdada da ordem visual, ícone sem rótulo, alvo de toque pequeno demais: nada disso salta numa tela renderizada.

O caminho que faz sentido é embutir a verificação na definição de pronto, não deixá-la para uma auditoria no fim. Um roteiro plausível de QA para saída de IA no canvas:

[ ] contraste de texto e de componentes checado contra WCAG 2.2 AA
[ ] todo controle interativo tem estado de foco visível
[ ] ordem de foco segue a leitura lógica, nao só a visual
[ ] alvos de toque com tamanho minimo adequado
[ ] rótulos e nomes acessíveis presentes (não só ícone)
[ ] hierarquia de headings coerente
[ ] componente pertence à biblioteca conectada, não é ad hoc

O Code Connect ajuda indiretamente aqui: se os componentes do design system já nascem acessíveis e a IA é forçada a partir deles via MCP, a superfície de erro diminui. É por isso que investir no mapeamento não é burocracia, é prevenção. A qualidade da geração é diretamente proporcional à qualidade da base conectada.

O que isso muda para o time brasileiro

Para times de produto no Brasil, muitos ainda com designer e dev disputando o mesmo backlog, a mudança concreta é onde o esforço humano se aloca. Menos tempo montando telas repetidas, mais tempo em três frentes: manter o design system e suas conexões de código atualizados, definir critérios de curadoria da saída de IA e rodar QA de acessibilidade como parte do fluxo, não como favor no fim da sprint.

Vale lembrar duas restrições práticas da doc. Code Connect exige planos Organization ou Enterprise e assento Full ou Dev, então nem todo time terá acesso imediato ao encanamento completo. E GitHub Enterprise Server não é suportado pela conexão via UI, além de cada arquivo de biblioteca conectar a um único repositório. Isso importa na hora de desenhar o processo: parte do ganho depende de infraestrutura que nem toda empresa tem contratada.

Quando não vale a pena

Se o time não tem design system consolidado, apostar em geração no canvas tende a amplificar inconsistência: a IA vai gerar cada botão de um jeito porque não há fonte de verdade para ancorar. Nesse cenário, o retorno maior está em estruturar a biblioteca primeiro. Também não vale quando o produto tem requisitos de acessibilidade ou compliance rígidos e a equipe ainda não tem QA de acessibilidade maduro: sem essa rede, a velocidade da geração só acelera a produção de dívida. A IA no canvas é multiplicador, e multiplicador amplifica tanto a estrutura boa quanto a bagunça.

Fonte: Figma Help Center – AI features documentation