Figma Code Connect reduz tokens e melhora código gerado por IA
O problema: agentes sem contexto do seu design system
Agentes de código que convertem designs em código frequentemente não conhecem os componentes de produção da sua empresa. Sem esse contexto, eles tendem a reconstruir a UI a partir de primitivos (divs, CSS cru), escolher componentes errados ou gastar tokens extras procurando os corretos. O resultado pode parecer visualmente correto, mas não é o código que você quer no seu repositório.
O que o Code Connect faz no MCP
O Code Connect conecta componentes do Figma a componentes reais do seu codebase. Quando um agente usa o servidor MCP do Figma com Code Connect configurado, em vez de receber apenas uma representação React genérica do visual, ele recebe snippets de código de produção com imports corretos e propriedades adequadas. Por exemplo, em vez de receber uma <div> com classes CSS simulando tabs, o agente recebe diretamente <SegmentedControl value="design" options={["Design", "Code"]} />.
Metodologia dos testes
A Figma construiu um harness de avaliação com 27 casos de teste, rodando cada tarefa com e sem Code Connect. Testaram dois design systems React: o Simple Design System (SDS), com alta cobertura de Code Connect (~20% das respostas MCP eram snippets Code Connect), e o Figma Pattern Library (FPL), com cobertura menor (~6%). Os modelos testados foram Claude Sonnet 4.5 e Claude Opus 4.7. A qualidade do código foi avaliada por juízes LLM em escala Likert de 1 a 4, considerando correção, qualidade, manutenibilidade, completude e boas práticas.
Resultados
Com Code Connect, os resultados medianos foram:
- Qualidade de código: +1 ponto na escala de 1–4 (de 2 para 3)
- Uso de tokens: redução de 29,5%
- Duração da tarefa: redução de 19,6%
O fator mais determinante foi a cobertura de Code Connect: quanto mais componentes do design system estiverem conectados, maiores os ganhos. No caso do FPL, um exemplo específico mostrou que com Code Connect o agente usou ~62% dos tokens e terminou em ~77% do tempo comparado ao baseline.
Diferença qualitativa
Sem Code Connect, o agente construiu tabs como divs estáticas com CSS hardcoded (não funcionais, com estados selecionados fixos). Com Code Connect, o agente importou e usou os componentes reais do design system (Tabs, Button), gerando código mais sucinto, funcional e aderente às convenções da equipe.
Caso real: Coinbase
A equipe de design systems da Coinbase investiu em Code Connect para garantir que agentes usem os componentes corretos. Segundo o engenheiro Erich Kuerschner, sem Code Connect o agente "fabricava" versões próprias de componentes (ex: construir um stepper a partir de barras de progresso). Com Code Connect, a qualidade do código melhorou significativamente e houve economia de tokens.
Conclusão
Agentes não sabem automaticamente o que é "bom código" dentro da sua empresa. É necessário fornecer contexto estruturado e explícito. Para quem já usa o servidor MCP do Figma, conectar mais componentes do design system resulta em código de maior qualidade, menor custo e maior velocidade.