Ferramentas genéricas de design-to-code frequentemente transformam quadros (frames) em marcação (markup) bruta que ignora os componentes existentes de uma equipe, resultando em código que precisa ser reescrito. O Figma Code Connect aborda esse descompasso mapeando componentes do Figma diretamente para componentes de UI de produção no código. Em vez de adivinhar APIs de componentes, ferramentas de IA e pessoas desenvolvedoras podem usar esses mapeamentos para gerar código com as assinaturas e propriedades (props) reais dos seus componentes. Essa abordagem estruturada fundamenta a geração de código no sistema de design (design system) existente.
Esta ferramenta é particularmente relevante à medida que as equipes fazem a transição da geração de código baseada em prompts para fluxos de trabalho agênticos mais controlados. Ao combinar o Figma Code Connect com o servidor MCP do Figma e agentes de programação, desenvolvedoras podem fornecer contexto aos agentes a partir da base de código real. Isso ajuda a deslocar a geração de código em formato livre em direção a uma montagem de componentes mais determinística e em conformidade com a produção, reduzindo as iterações de revisão de código e o risco de desvio arquitetural (architectural drift).
Em nossa experiência com sistemas de design para dispositivos móveis, usamos esse fluxo de trabalho para mapear componentes entre iOS e Android, publicando automaticamente no Figma após lançamentos na branch principal e usando integração contínua (CI) para detectar desvios. No entanto, a geração de Figma para código é tão confiável quanto o sistema de design subjacente. Os resultados gerados ainda exigem guardrails, como verificações de lint para bloquear cores programadas diretamente (hardcoded) e baselines de snapshot em cada pull request. Manter mapeamentos para cada variante também exige esforço contínuo, e atualmente a ferramenta opera no nível de componente, em vez de validar telas completas do produto. Portanto, a lógica de layout, o estado e a navegação ainda exigem supervisão humana.
