News · Figma's code layers e o servidor MCP transformam mockups de design num artefacto de handoff

Jul, 224 min de leitura
Frontend

Figma's code layers e o servidor MCP transformam mockups de design num artefacto de handoff

David Kossnick explica como a Figma leva a AI além da camada visual até ao código editável, e o que isso significa para a fronteira entre designer e programador.

O que a Figma realmente lançou para o percurso do código

Kossnick identifica três peças distintas em vez de uma funcionalidade de AI vaga. O Figma Make é uma ferramenta prompt-to-app que gera aquilo a que chama código de nível de produção a partir de linguagem, imagens ou frames estruturados. O Dev Mode trata do handoff com dados estruturados como CSS e tokens. O Dev Mode MCP Server assenta sobre isto, permitindo aos programadores invocar um agente de programação que traduz mockups em código pronto para produção com contexto completo.

O fio condutor é que o output da AI permanece editável. Kossnick descreve um code composer e "code layers" que permitem aos utilizadores escrever e publicar código assistido por AI nativamente dentro do ficheiro. Esta é a distinção fundamental que estabelece em relação a outras ferramentas: os agentes levam-nos bastante longe, mas muitos produtos bloqueiam a personalização depois da geração. A proposta da Figma é que ainda é possível abrir o code layer e alterá-lo.

A infiltração do prototype na produção

O detalhe mais consequente está quase escondido. O Figma Make é, pela própria descrição de Kossnick, construído principalmente para prototipagem. Mas ele afirma que os designers conseguem, por vezes, definir interações através de prompts com tanta precisão que os engenheiros copiam o código directamente.

Ainda que o Make seja construído principalmente para prototipagem, os designers conseguem muitas vezes definir interações através de prompts com tanta precisão que os engenheiros copiam o código directamente — o que faz com que comece a tornar-se um artefacto de handoff para a engenharia.Montana Labs

Trata-se de uma mudança significativa na fronteira entre design e engenharia. Historicamente, o artefacto de handoff era uma especificação: mockups, redlines, tokens que um engenheiro reimplementava. Se o código do prototype passar a ser aquilo que os engenheiros lançam em produção, a questão de quem é responsável pela qualidade do código, acessibilidade e manutenção move-se a montante, para uma ferramenta que foi concebida para exploração. Kossnick apresenta isto como uma vitória; as equipas de frontend deveriam lê-lo como uma decisão de política que agora têm de tomar.

O jogo da Workday e a questão das ferramentas internas

O exemplo mais concreto da entrevista é um membro da equipa de RH sem background em programação ou design que encontrou uma API da Workday e, em cerca de duas horas com o Figma Make, construiu um jogo de associação de nomes a caras agora usado no onboarding. Kossnick é explícito ao afirmar que nenhuma equipa de ferramentas internas teria priorizado isto.

Essa é a verdadeira afirmação de produto: não que a AI escreva melhor código, mas que reduz o custo de experimentar uma ideia ao ponto de ideias que nunca passariam um crivo de priorização passarem agora a ser construídas. O custo inicial da prototipagem era o filtro, e ao removê-lo muda-se quais as ferramentas que passam a existir. Para as organizações de frontend, isto tem dois lados — proliferam ferramentas descartáveis úteis, mas também aumenta o volume de software não revisto e semi-implementado a viver fora do pipeline normal de engenharia.

Como a OpenAI se encaixa realmente na Figma

Despido do enquadramento da entrevista, a relação técnica é restrita e específica. A Figma usa APIs da OpenAI para potenciar o FigJam AI e a geração de imagens da sua plataforma. Separadamente, a Figma implementou o ChatGPT Enterprise internamente para a sua própria força de trabalho. Os cartões de aniversário do FigJam, em que colegas de equipa remisturam avatares, usam a edição de imagens da OpenAI.

Vale a pena afirmar isto claramente porque o artigo mistura integração de produto com construção de cultura interna. O Figma Make, o Dev Mode e o servidor MCP são superfícies de workflow próprias da Figma; a dependência da OpenAI aparece na geração de imagens e em funcionalidades de texto, não como o motor por detrás da história de geração de código. A implicação específica: uma equipa de frontend que avalie esta stack está, na realidade, a avaliar duas apostas separadas — o code layer editável da Figma como mecanismo de handoff, e a geração de imagem e texto a correr através de uma API de terceiros — e não deve assumir que ambas têm o mesmo perfil de fiabilidade ou governação.

Find this story relevant to you?

Contact us to find a unique solution

Contact us

Precisa de um parceiro de engenharia de IA que saiba executar?

Ajudamos equipas em Portugal a integrar IA em produtos, automatizar processos de alto valor e modernizar os sistemas que suportam o negocio.

Get in touch

Leitura relacionada

Mais análises sobre entrega de produto, AI operacional e o trabalho de sistemas que faz com que a implementação funcione na prática.

Jul, 134 min de leitura
Frontend

A DNP colocou o ChatGPT Enterprise diante de dez departamentos e tratou a janela de chat como interface

Jul, 134 min de leitura
Frontend

A AdventHealth implementa o ChatGPT em nove estados ao tratar a adoção como o produto

Jul, 13Leitura de 4 min
Frontend

A AP+ utiliza a Codex para criar prototípagens de pagamento funcionais, e não apenas ecrãs clicáveis