Camadas de código Figma e Specs: o que são, como funcionam e onde param14 min read

As camadas de código Figma colocam o código em execução na tela e Figma Specs colocam Markdown lá também. Ambos entraram em beta aberto em Config India em 15 de outubro de 2026, portanto, um arquivo de design agora pode conter frames, um protótipo funcional e o plano escrito a partir do qual um agente constrói.

Este guia é para designers, PMs e engenheiros front-end que estão decidindo se devem migrar protótipos e especificações para o Figma. Ele cobre o que cada recurso faz, como começar, quanto custa em créditos de IA e onde o trabalho deve sair do Figma para companheiros de equipe em Claude, ChatGPT ou Cursor.

Na era da IA, design é código. Para projetar diretamente em código com IA ou para transformar seus designs Figma em código, use Anima Playground: descreva uma tela ou comece com um design Figma e continue iterando em um aplicativo editável que você pode visualizar e publicar.

Projete diretamente no código com IA

Projete com IA: descreva uma tela ou transforme os designs do Figma em código.

O que o Figma foi lançado no Config India 2026?

Camadas de código e Specs foram a manchete, mas chegaram com um conjunto de recursos de agente ao seu redor. Aqui está o status atual da central de ajuda do Figma:

Ambos os betas serão lançados ao longo de várias semanas, então você poderá vê-los antes ou depois do resto da sua equipe.

O que são camadas de código Figma?

Uma camada de código é uma camada que contém código real em execução. Em vez de um protótipo que simula interações com links de quadros, você obtém um protótipo funcional baseado em código na tela ao lado de seus designs. Os colegas de equipe podem clicar nele, comentá-lo e duplicá-lo para tentar uma direção diferente lado a lado.

Figma oferece quatro maneiras de iniciar um:

• A partir de um desenho. Selecione os frames e peça ao agente Figma para transformá-los em uma camada de código.
• De um site ativo. Capture uma página com a extensão Figma Chrome e cole-a na tela.
• De um repositório. Importe uma base de código de prototipagem leve e compatível de GitHub ou de uma pasta local. Uma importação GitHub permanece conectada a esse repositório.
• Do zero. Adicione uma camada de código vazia e solicite ao agente a construção.

Você também pode trazer um protótipo construído em uma ferramenta de codificação para a tela por meio do servidor Figma MCP.

A edição acontece de três maneiras. Você avisa o agente, anota quadros para mostrar onde a alteração pertence ou abre o editor de código e altera o código você mesmo. Quando os detalhes visuais são mais importantes que o código, Extract designs transforma telas de uma camada de código novamente em quadros Figma editáveis. Quando o código estiver pronto para os engenheiros, você poderá enviá-lo para uma filial e abrir uma solicitação pull.

O que é Figma Specs?

Figma chama Specs de “um lar nativo para contexto”. Na prática, é um documento Markdown colaborativo que reside na tela de um arquivo Figma Design ou placa FigJam, ou como seu próprio arquivo Spec.

Começar é rápido:

1. Crie um Spec independente no navegador de arquivos ou vá para figma.com/spec/new.
2. Dentro de um arquivo Design ou placa FigJam, clique em Spec na barra de ferramentas ou pressione D.
3. Já tem um .md arquivo? Arraste-o para a tela e ele se tornará uma especificação.
4. Escreva com o Markdown que você já conhece: # para títulos, - para balas, [] para tarefas, > para aspas, três crases para código. Tipo / para imagens, incorporações e divisórias Figma.

O que torna uma especificação mais do que um arquivo Markdown é o que fica ao redor do texto. Você pode incorporar um quadro, uma placa FigJam ou qualquer nó da tela, para que o requisito e o design que ele descreve fiquem próximos um do outro. Os colegas de equipe comentam e o agente Figma pode ler e responder a esses comentários.

Specs também funciona fora do Figma. Os agentes de codificação conectados ao servidor Figma MCP podem ler, criar e atualizar especificações usando o figma-spec habilidade. Para resolver isso, você copia o link de especificação no prompt do seu agente de codificação, e os quadros vinculados, diagramas, camadas de código e trechos Code Connect vêm com ele.

Por que Markdown se tornou o formato de transferência

A própria postagem de lançamento do Figma diz isso claramente: Markdown é agora o formato de fato para compartilhar contexto com agentes. Todo agente de codificação lê. A maioria das equipes de produto já mantém planos, PRDs e instruções do agente em .md arquivos.

Minha leitura é que Specs é Figma aceitando que a transferência para um agente seja um texto e, em seguida, tornando esse texto multijogador. Um local AGENTS.md ou PRD nunca falhou devido ao formato. Ele falhou porque apenas uma pessoa o editou, ele se afastou dos designs e ninguém conseguiu ver qual versão o agente usou.

Dentro do Figma, o Specs corrige isso. A questão em aberto é o que acontece fora dela. As incorporações, comentários e referências de design ao vivo são recursos do Figma e os agentes os acessam por meio de clientes listados no catálogo Figma MCP. Se seus engenheiros, o ChatGPT do seu PM e o Claude da sua equipe de marketing precisam do mesmo plano, você ainda precisa decidir onde fica a cópia compartilhada.

Um fluxo de trabalho prático: do PRD à camada de código e ao pull request

Veja como os dois recursos se encaixam em um recurso real, usando apenas o que Figma documenta hoje.

1. Arraste seu PRD para a tela. Seu existente .md arquivo se torna uma especificação. Nada é reescrito e editá-lo manualmente não usa créditos de IA.
2. Incorpore os quadros de que fala. Usar / para adicionar os fluxos descritos pelo PRD. Os revisores agora veem o requisito e a tela juntos.
3. Transforme os quadros-chave em uma camada de código. Selecione-os e avise o agente. Se você já possui um repositório de protótipo, importe-o de GitHub.
4. Revise em um só lugar. Colete comentários sobre as especificações e a camada de código. Peça ao agente Figma para responder a cada comentário aberto com uma sugestão de correção enquanto as pessoas avaliam os mesmos tópicos.
5. Entregue as especificações. Cole o link de especificação em Codex, Claude Code ou Cursor conectado ao servidor Figma MCP. O agente obtém o Markdown mais o contexto de design vinculado.
6. Envie o código do protótipo. Envie as alterações da camada de código para uma ramificação e abra uma solicitação pull para que os engenheiros revisem antes da fusão.

A saída é uma especificação que seu agente de codificação pode ler e um protótipo funcional no qual sua equipe realmente clicou. Teste o código gerado como qualquer outro código. Um protótipo executado não é o mesmo que código pronto para produção.

Se a próxima etapa for transformar um design Figma em código que você pode executar ou projetar em código a partir de um prompt, esse é o trabalho do Anima Playground.

Quanto custam as camadas de código e Specs?

• As camadas de código usam créditos de IA. Em planos pagos, a geração e edição dentro de uma camada de código são gratuitas até 4 de novembro de 2026. O trabalho de outros agentes no mesmo prompt ainda usa créditos e, depois de 4 de novembro, todas as tarefas da camada de código usam créditos.
• Specs são livres para escrever. Digitar e editar uma especificação por conta própria não utiliza créditos. Usar o agente com uma especificação sim. Passe o mouse sobre o recibo após cada solicitação para ver quanto custou.
• Payload e diretrizes adicionam custos. Figma observa que ambos dão ao agente mais contexto e mais trabalho, de modo que o mesmo prompt pode usar mais créditos.

Limites a serem verificados antes de planejá-los

• Lançamento. Ambos os recursos são betas abertos lançados ao longo de semanas. Procure o ícone Código na barra de ferramentas Figma Design e a opção Spec no navegador de arquivos.
• Planos. Specs precisa de um plano pago. Os usuários iniciantes obtêm camadas de código, mas não Specs. Ambos precisam de acesso de edição para criar.
• Desativando. Somente administradores corporativos podem desativar as camadas de código, e somente desativando todos os recursos do Figma AI.
• Tamanho do repositório. A importação GitHub é para bases de código de prototipagem leve, não para um aplicativo de produção completo.
• Projetar código do sistema. Conectar seu código de componente real por meio de fontes de código ainda é uma versão beta fechada, portanto, as camadas de código ainda não podem usar seus componentes de produção.

Onde Figma para e onde Anima e AgentGrid.io se encaixam

Se toda a sua equipe trabalha em Figma, as camadas de código e Specs são um padrão forte. O protótipo, o plano e os comentários ficam no mesmo arquivo, e o agente do Figma e os clientes do MCP podem trabalhar neles.

Duas situações comuns ainda estão fora desse arquivo.

A ideia começou em outro lugar. Um protótipo Claude Design, uma página HTML gerada por ChatGPT ou um site ativo com o qual você deseja aprender. O servidor MCP do Figma agora tem um html_to_figma ferramenta para HTML gerado pelo agente. Buddy da Anima, nosso agente de design de IA dentro do Figma, também vira HTML, artefatos de Claude, imagens e URLs em camadas Figma editáveis, o que é útil quando você deseja continuar projetando nessas camadas com seu sistema de design.

O resultado precisa sair de Figma. Sua especificação ou protótipo deve ser revisado por pessoas fora da equipe Figma, editado por agentes de vários fornecedores ou publicado como um link ativo. Esse é o trabalho que o AgentGrid.io, construído por Anima, faz. Um artefato Markdown em AgentGrid.io é um documento ativo e de salvamento automático que pessoas e agentes conectados, como Claude, ChatGPT, Cursor e Grok Bot, podem editar, com cada alteração atribuída por nome no histórico de versões. Um artefato HTML é uma página em execução na qual você pode comentar e publicar em uma URL pública quando for aprovada. Você também pode importar um quadro Figma para AgentGrid.io como um artefato de aplicativo. Essa importação é unidirecional, portanto, as edições posteriores do Figma não são sincronizadas.

Os dois não estão competindo pela mesma etapa. Figma possui a tela de design. AgentGrid.io é onde o Markdown e os artefatos HTML desaparecem quando o trabalho cruza ferramentas e equipes.

Experimente AgentGrid.io para manter uma especificação ou protótipo que cada agente da sua equipe possa editar e publicar.

Use cada ferramenta quando

• Use camadas de código Figma quando as partes interessadas precisam clicar em um protótipo funcional próximo aos designs e comparar as instruções lado a lado.
• Usar Figma Specs quando o plano deve ficar ao lado dos frames e ser lido por um agente de codificação através do servidor Figma MCP.
• Usar Anima Playground quando você deseja projetar diretamente em código com IA ou transformar um design Figma em um aplicativo editável que você pode visualizar e publicar.
• Usar Buddy quando o ponto inicial está fora de Figma e você deseja camadas editáveis na tela. Para uma comparação mais completa entre a construção em Figma e um construtor de navegador, consulte Figma Make vs Anima Playground.
• Usar AgentGrid.io quando a especificação ou protótipo deve ser editado por pessoas e agentes em todas as ferramentas, revisado com comentários e publicado como um link ativo.

Perguntas frequentes

O que são camadas de código em Figma?

Uma camada de código é uma camada na tela Figma que contém código real em execução. Você pode criar um a partir de frames selecionados, um site ativo capturado com a extensão Figma Chrome, um repositório de prototipagem GitHub ou um prompt em branco e, em seguida, clicar nele, comentar e duplicá-lo para comparar as direções.

Figma Specs é apenas Markdown?

Specs usa Markdown para seu texto e você pode arrastar qualquer arquivo .md para a tela para criar um. Ele adiciona recursos Figma em torno desse texto: quadros incorporados e placas FigJam, comentários e um agente que pode ler e responder a esses comentários.

As camadas de código Figma custam créditos de IA?

Sim. Em planos pagos, a geração e edição dentro de uma camada de código são gratuitas até 4 de novembro de 2026. O trabalho de outros agentes no mesmo prompt ainda usa créditos e, depois de 4 de novembro, todas as tarefas da camada de código usam créditos de IA.

Claude Code, Codex ou Cursor pode ler um Figma Spec?

Sim, se estiverem conectados ao servidor Figma MCP. Os agentes de codificação podem ler, criar e atualizar especificações com a habilidade figma-spec, e você pode colar um link de especificação em seu prompt para transmitir seu contexto de design vinculado.

Quais planos Figma incluem Specs?

Specs está em versão beta aberta em planos pagos: Profissional, Organização, Empresarial e Educação, além de Governo, de acordo com o artigo Config India de Figma. Não está no plano Starter gratuito. As camadas de código estão sendo implementadas em todos os planos, incluindo o Starter.