Figma MCP: do Claude Code ao design e de volta ao app

O que o Figma MCP captura no fluxo com Claude Code?

O fluxo do Claude Code para o Figma captura a interface em execução no navegador, seja em produção, no ambiente de homologação ou em localhost, o servidor de desenvolvimento no seu computador. Você pode capturar várias telas na mesma sessão e colocá-las na área de trabalho do Figma para comparar. Cada tela vira um frame editável que você pode reorganizar, duplicar, refinar e anotar. O anúncio do Figma detalha esses ambientes e os fluxos com várias telas.

Pense nisso como colocar as telas do seu app em funcionamento sobre uma mesa de edição. O navegador mostra a experiência à medida que alguém percorre o fluxo; o Figma dá espaço para analisar as etapas lado a lado.

MCP é a sigla de Model Context Protocol, o protocolo que permite ao Claude Code usar as ferramentas do Figma. A ferramenta de captura se chama generate_figma_design. Ela pode enviar camadas para um arquivo novo do Figma Design, para um arquivo Design existente ou para a área de transferência. Os novos arquivos gerados pela captura ficam nos rascunhos da sua equipe ou organização; o conteúdo enviado à área de transferência pode ser colado na área de trabalho. A referência de ferramentas do Figma explica esses destinos.

Como conectar o Claude Code ao Figma

Use o servidor remoto neste fluxo. Ele se conecta a https://mcp.figma.com/mcp e funciona sem o aplicativo do Figma para desktop. A documentação do Figma apresenta uma opção recomendada com plugin e outra de configuração manual. Escolha uma delas. Veja a configuração do servidor remoto.

Opção recomendada: instalar o plugin do Figma para Claude Code

Com o Claude Code já instalado, execute este comando no terminal:

claude plugin install figma@claude-plugins-official

Depois, siga o fluxo de autorização documentado pelo Figma:

1. Reinicie o Claude Code se ele estiver em execução.
2. Digite /plugin, abra Installed, selecione figma e inicie a autorização.
3. Continue no navegador e escolha Allow access para sua conta do Figma.
4. Volte a /plugin e confira se o Figma aparece como conectado em Installed.

O plugin inclui a configuração do MCP e skills, instruções reutilizáveis para tarefas comuns no Figma. Se a sua organização bloquear a instalação, a orientação do Figma é procurar os administradores do Claude. Consulte o guia de configuração do Claude Code com Figma.

Configuração manual: disponibilizar a conexão em todos os projetos

Para configurar manualmente uma conexão que possa ser reutilizada entre projetos, o Figma documenta exatamente este comando:

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

Inicie uma nova sessão do Claude Code, digite /mcp, selecione figma, escolha Authenticate e depois Allow Access. Confira a conexão com /mcp.

A opção --scope user disponibiliza a conexão em todos os seus projetos. O Figma também documenta o comando claude mcp add --transport http figma https://mcp.figma.com/mcp, cujo escopo padrão é o projeto atual. Veja os detalhes de configuração manual e escopo.

Qual plano ou tipo de licença do Figma é necessário?

Conectar o servidor, gravar frames e ler os designs de volta são operações com requisitos diferentes. Estas são as regras publicadas pelo Figma, conferidas em 12 de outubro de 2026:

Fontes: disponibilidade do MCP, permissões de captura e limites de leitura.

Usuários do plano Starter e das licenças View ou Collab têm direito a até 20 chamadas de ferramentas de leitura por mês. Cada chamada é uma solicitação individual, portanto essa cota não equivale a 20 ciclos completos de ida e volta. A ferramenta de captura generate_figma_design está isenta dos limites padrão de requisições do MCP. Consulte a cota de leitura e a isenção da captura.

Para uma avaliação mais ampla do produto e da contratação, veja nossa análise do Figma.

Na prática: um ciclo completo com três telas de onboarding

Imagine que seu app já funciona e tem três telas de onboarding: Boas-vindas, Convidar colegas e Primeiro projeto. Use este exemplo para percorrer as etapas de captura, revisão de design e implementação.

Capture o fluxo em um único arquivo

Abra o projeto no Claude Code e informe a URL do app e o destino da captura. Por exemplo:

Se quiser um arquivo novo, peça ao Claude para criá-lo. Se o app não estiver em execução, peça para iniciar o servidor local. No fluxo de captura, o cliente prepara o script necessário e abre o navegador. Uma captura inicial é feita quando essa janela se abre. Veja as instruções de captura do Figma.

Confira se a tela Boas-vindas foi capturada e avance pelo app. Nas telas Convidar colegas e Primeiro projeto, use Entire screen na barra de ferramentas de captura. Para capturar uma parte menor, use Select element. Conclua com Open file. Consulte as etapas da barra de ferramentas e de conclusão.

Minha recomendação: mantenha o mesmo tamanho de viewport nessa primeira rodada e registre qual estado foi capturado. Uma tela com erro de validação e a mesma tela com dados válidos merecem nomes distintos.

Revise a jornada no Figma

Mantenha uma linha com as capturas originais e duplique-a para trabalhar nas alterações propostas. Dê nomes claros aos frames e tome uma decisão concreta para cada tela:

Essas alterações são hipóteses de design. Desenhar uma opção para pular uma etapa, em particular, não implementa a lógica de permissões ou de roteamento por trás dela. Registre essa decisão ao lado do frame aprovado e inclua-a no briefing de implementação.

Confira as camadas capturadas antes de tratá-las como elementos do seu design system. Segundo o Figma, as capturas chegam como camadas simples, sem associação automática aos componentes ou estilos da sua biblioteca. A ferramenta pode vincular variáveis compatíveis do arquivo ou de uma biblioteca adicionada, como valores reutilizáveis de cores e espaçamento. Adicionar bibliotecas publicadas exige um plano pago. Veja o comportamento das capturas e variáveis.

Envie os frames aprovados de volta ao Claude Code

Em cada frame aprovado, clique com o botão direito e escolha Copy link to selection. Cole esses links no Claude Code junto com o pedido de implementação. Esse é o fluxo remoto documentado pelo Figma. Veja como usar os links dos frames.

Um briefing útil para este exemplo seria:

A ferramenta get_design_context do Figma fornece informações de design ao agente. No prompt, você pode indicar o framework e o diretório dos componentes existentes. Ao usar o servidor remoto, forneça links de frames ou camadas; apenas selecionar um elemento na área de trabalho não envia esse contexto ao servidor remoto. Consulte as ferramentas de design para código.

Por fim, execute o app atualizado e percorra a mesma jornada. Compare o layout e os textos, depois confira o comportamento ao pular etapas, a validação e a navegação por teclado. Capture as telas revisadas quando uma nova revisão de design for útil. Essa verificação é responsabilidade da equipe: o Figma fornece o contexto, enquanto o agente de programação faz a implementação. Veja o papel do MCP e o do agente.

Cinco situações em que esse fluxo pode valer a pena

Comece pelos casos em que várias pessoas precisam decidir algo sobre uma interface que já existe. Estes são usos propostos, ordenados pelo potencial de reduzir retrabalho de forma mais direta.

Para equipes que estão formalizando instruções reutilizáveis de design, nosso kit de design system com skills personalizadas para Figma Make é uma leitura complementar sobre esse outro fluxo, específico do Figma Make.

Como calcular o retorno: meça o trabalho de reconstruir telas

Os custos a examinar são a preparação do design e o retrabalho na implementação. Se a equipe hoje recria telas já implementadas antes de revisá-las, compare esse esforço com o de capturar e ajustar as telas:

Valor líquido por revisão = (horas de preparação e retrabalho no processo anterior − horas de captura, ajustes e retrabalho no novo processo) × custo interno por hora − custos adicionais de ferramentas.

Use os tempos registrados pela própria equipe. Inclua qualquer revisão extra de implementação que esse fluxo gerar. Para uma equipe que já usa Claude Code e as licenças necessárias do Figma, as assinaturas existentes entram nos dois lados da comparação; só os gastos adicionais mudam o resultado. O Figma separa o acesso por tipo de licença das permissões de arquivo, e o custo da assinatura Professional depende da quantidade de licenças e da periodicidade de cobrança. Veja a explicação do Figma sobre cobrança.

Meu critério: mantenha o fluxo se ele levar a equipe a uma alteração aprovada com menos esforço somado de design e engenharia. Uma importação mais rápida que exige muitos ajustes depois traz pouco ganho.

Duas soluções específicas que você poderia criar

A oportunidade está em organizar o processo de revisão em torno da conexão nativa. Estas são hipóteses de produto. As estimativas do DataForSEO para buscas em inglês nos Estados Unidos, conferidas em 12 de outubro de 2026, medem buscas mensais, não clientes pagantes.

A mais promissora: um kit de revisão de onboarding

Uma equipe de produto ou pequena agência poderia pagar por um processo repetível que transforme o onboarding em execução em uma revisão organizada e um briefing de implementação. Os sinais de demanda em temas próximos são 590 buscas mensais por “claude code to figma” e 260 por “website to figma”. Pode haver sobreposição entre esses públicos.

A versão inicial poderia reunir um checklist de captura específico do projeto, um modelo de revisão no Figma, uma convenção de nomes para os frames e prompts reutilizáveis que associem links dos frames aprovados às decisões de comportamento. Comece com um serviço acompanhado para observar onde as equipes precisam de ajuda.

Essa é a oportunidade mais promissora porque a entrega inclui decisões sobre o fluxo do próprio cliente. O ponto de atenção: o Figma já oferece a captura, então uma ferramenta que apenas a reembala agrega pouco. A disposição de pagar pelo kit de revisão ainda precisa ser validada.

Um verificador de briefing de implementação

Uma equipe que envia alterações do Figma ao Claude Code com frequência poderia usar um pequeno verificador para apontar links de frames ausentes, destinos pouco claros e falta de orientações sobre componentes antes da implementação. “Figma to code” tem uma estimativa de 720 buscas mensais, um sinal amplo de interesse na tarefa, sem comprovar demanda por esse verificador.

A versão inicial poderia analisar um briefing estruturado com links aprovados, caminhos dos componentes e critérios de aceitação, e gerar uma lista de questões em aberto. A limitação é semântica: a ferramenta pode apontar que falta descrever a regra para pular uma etapa, mas não pode decidir se os usuários devem ter essa opção. Essa decisão continua com a pessoa responsável pelo produto.

O que esse ciclo de ida e volta não resolve

Trate esse fluxo como um ciclo intencional de captura, edição e implementação. O Figma descreve o MCP como uma fonte de contexto estruturado de design e um ponto de partida para o código; o agente ainda precisa das convenções do projeto e de instruções claras. Isso não garante código pronto nem corrige automaticamente problemas de implementação. Veja a explicação do Figma sobre esses limites.

A qualidade da captura também varia. O Figma aponta animações intensivas em JavaScript, renderização em canvas e listas virtualizadas, que renderizam apenas parte de uma lista longa por vez, como possíveis fontes de problemas. Quando a captura da página inteira não ficar boa, tente capturar um elemento específico. Nomes embaralhados de variáveis CSS também podem impedir a correspondência entre variáveis; uma captura no servidor de desenvolvimento pode preservar os nomes legíveis. Consulte as limitações conhecidas da captura.

Eu dispensaria esse ciclo para uma correção simples de texto que não envolva uma decisão de design. Eu o usaria quando comparar o fluxo inteiro tiver chance de mudar o que a equipe vai construir. Se a própria área de trabalho compartilhada do Figma não atender às suas necessidades, nossa comparação de alternativas ao Figma trata dessa escolha mais ampla.

Para começar na segunda-feira: escolha um onboarding de três telas, capture o fluxo, combine uma melhoria com a equipe e leve essa decisão de volta ao app. Complete esse ciclo antes de ampliar o processo para o restante do produto.

Se você quer adaptar esse fluxo de revisão ao produto da sua equipe, podemos ajudar a automatizá-lo.