Se você encontrou isto pesquisando por "figma mcp server not connecting" ou "where is the MCP toggle in Figma," está no lugar certo. A maioria das primeiras tentativas de configurar o servidor MCP do Figma falha pelos mesmos dois motivos: pré-requisitos ausentes e a etapa de autenticação ignorada após a configuração. Talvez o botão que você procura nem apareça ainda, e isso não tem nada a ver com a ferramenta que você está usando.
Configurar corretamente o servidor MCP do Figma, seja remoto ou desktop, exige uma sequência específica e alguns pré-requisitos não tão óbvios que a maioria dos guias de configuração simplesmente deixa de fora. É por isso que tantas primeiras tentativas falham.
O botão não aparecerá até você ler isto
- Comece pelo servidor MCP remoto — ele funciona em todos os planos e elimina a necessidade do aplicativo desktop.
- O bloqueio mais comum: o Dev Mode é pago, e a autenticação do servidor MCP remoto precisa ser concluída no navegador antes que qualquer conexão funcione.
- Contas gratuitas do Figma não podem acessar os recursos do servidor MCP do Dev Mode — este é o pré-requisito que a maioria dos guias esconde ou ignora.
O que o servidor MCP do Figma realmente faz pelo seu fluxo
O servidor MCP do Figma é uma implementação do Model Context Protocol, um padrão aberto que permite que clientes de IA consumam contexto estruturado de ferramentas externas. Na prática, ele leva o Figma diretamente ao fluxo de desenvolvimento, dando às ferramentas de programação com IA compatíveis com MCP acesso estruturado aos seus arquivos de design — não a capturas de tela ou exportações, mas a árvores reais de componentes, tokens de design, restrições de layout e dados de variantes.
Sem ele, um assistente de programação com IA precisa adivinhar com base no que você cola. Com ele, a ferramenta consegue visualizar o contexto real do design e ajudar os LLMs a gerar código orientado pelo design que reflita seu verdadeiro sistema de design. Essa é a diferença. A diferença entre "gere um componente React" e "implemente este frame como um componente React usando os tokens e o layout que consigo ler agora" é a diferença entre um código que precisa de três rodadas de revisão e um código que, em grande parte, funciona logo na primeira tentativa. A Don't Panic Labs documentou claramente essa mudança: sair de suposições para contexto estruturado é a transformação real que o MCP traz para a passagem de design para código.
O que você precisa antes de conectar o servidor MCP do Figma
Antes de tocar em qualquer arquivo de configuração, verifique todos estes itens. Deixar um deles de fora pode custar 45 minutos depurando algo que, na verdade, não está quebrado.
Um plano pago do Figma qualificável para recursos do desktop/Dev Mode
Usuários do plano gratuito do Figma não podem acessar o Dev Mode, o que significa que a opção de servidor MCP desktop simplesmente não está disponível. Se você está em um plano gratuito e quer conectar o Figma a uma ferramenta de IA, o servidor remoto é sua única opção.
O aplicativo desktop do Figma instalado e atualizado para a opção de servidor local
O servidor MCP desktop é executado dentro do aplicativo desktop do Figma. Se você usa apenas a versão para navegador, o botão do servidor local não existe para você. Primeiro, baixe e atualize o Figma desktop.
Um cliente MCP compatível para a opção de servidor remoto
Nem toda ferramenta de programação com IA oferece suporte ao Model Context Protocol. As que oferecem incluem Claude Code, Cursor, VS Code com GitHub Copilot ativado e Codex. Se suas ferramentas atuais de programação não estão nessa lista, o servidor não terá a que se conectar.
Permissões da conta Figma para acessar o arquivo Figma de destino
A etapa de autenticação OAuth falhará silenciosamente se sua conta não tiver, no mínimo, acesso de visualização ao arquivo que você está tentando referenciar. Verifique as permissões do arquivo antes de depurar a conexão.
GitHub Copilot ativado no VS Code antes de adicionar o Figma MCP
Este ponto pega muita gente. A pessoa desenvolvedora precisa ter o Copilot ativo — não apenas instalado — para que o servidor MCP do Figma funcione no VS Code. A conexão parece ser bem-sucedida, mas as chamadas de ferramenta não retornam nada.
Como ativar o Dev Mode e o servidor MCP no Figma
A sequência importa mais aqui do que a maioria dos guias deixa transparecer. O botão do servidor MCP no Figma não fica no menu principal de configurações. Ele aparece apenas dentro de um arquivo que está ativamente no Dev Mode — e somente depois que você muda esse arquivo para o Dev Mode. Vejo esse padrão o tempo todo: alguém abre as preferências do Figma procurando uma seção de MCP, não encontra nada, conclui que o recurso não está disponível no plano e abre um chamado. Normalmente, o arquivo só ainda não está no Dev Mode.
Esta é a ordem correta:
Etapa 1: abra o arquivo Figma de destino. Vá até o arquivo onde estão seus designs, aquele a partir do qual sua pessoa desenvolvedora trabalhará.
Etapa 2: mude para o Dev Mode. Na barra de ferramentas no canto superior direito, procure o botão que alterna entre o Design Mode e o Dev Mode. Clique nele. A interface muda: você verá painéis voltados ao código, ferramentas de anotação e metadados orientados a desenvolvedores. Se o botão não estiver lá, sua conta ou plano não tem acesso ao Dev Mode. Esta é a barreira paga. Não há contorno para a opção desktop.
Etapa 3: localize o botão do servidor MCP. Agora que você está no Dev Mode, procure nas configurações do painel ou na seção de ferramentas para desenvolvedores. O servidor MCP do Figma oferece um botão específico para ativar o endpoint MCP — ele só fica visível depois que o Dev Mode está ativo no arquivo. Ative-o.
A localização desse botão não é óbvia. Ele não aparece nas configurações da conta, nos menus de plugins nem em qualquer outro lugar onde as pessoas esperam encontrar uma configuração de servidor. O Figma o colocou na visualização do arquivo no Dev Mode porque o servidor MCP é limitado a conteúdos específicos no Figma, e não à sua conta inteira. Isso é, na verdade, uma decisão de design sensata. Só não corresponde ao lugar onde as pessoas procuram na primeira vez que precisam dele para as ferramentas de programação.
Ativando o servidor MCP desktop e copiando a URL do servidor local
Depois que o botão é ativado no Dev Mode, o aplicativo desktop do Figma gera uma URL de servidor local. Ela se parece com http://127.0.0.1:[port], com um número de porta específico atribuído em tempo de execução. Você precisa copiar essa URL e colá-la na configuração MCP do seu editor de código.
Esta é a etapa que costuma ser ignorada. O servidor MCP desktop começa a ser executado, tudo parece certo dentro do Figma, mas nada conecta na IDE. O motivo: a configuração do seu servidor MCP na IDE ainda não sabe onde procurar. Copie a URL completa do servidor local no painel do Dev Mode do aplicativo desktop do Figma, abra a configuração do editor e cole-a como endpoint do servidor. Sem essa etapa, você está conectado ao MCP do Figma apenas em teoria. A ferramenta de programação e o Figma estão funcionando em universos separados.
Configurando o servidor MCP remoto: o caminho recomendado
Para a maioria das configurações, comece por aqui. O servidor remoto em https://mcp.figma.com/mcp é o caminho recomendado pelo Figma porque não exige o aplicativo desktop do Figma, funciona com qualquer cliente compatível com MCP e está disponível em mais tipos de plano do que a opção desktop/Dev Mode.
O padrão geral para adicioná-lo é: na sua ferramenta compatível com MCP, adicione uma nova entrada de servidor MCP apontando para https://mcp.figma.com/mcp. A forma de fazer isso depende da ferramenta — Claude Code, Cursor, VS Code e Codex têm interfaces um pouco diferentes para isso, abordadas abaixo. Mas o padrão é o mesmo em todas: adicione a URL, inicie a autenticação e conclua-a no navegador.
Essa última parte não é opcional. Adicionar a URL não é o mesmo que conectar o servidor. A autenticação é uma etapa obrigatória separada, realizada em uma janela do navegador após a configuração. No Claude Code, por exemplo, execute /mcp depois de adicionar o servidor para confirmar o status da conexão. Se você vir o servidor MCP do Figma listado sem erros de autenticação, está conectado. Se ele aparecer com status desconectado ou pendente, a autenticação no navegador ainda não foi concluída.
Para ferramentas agênticas como o Claude Code, o agente de IA usa o Figma como uma ferramenta que pode chamar durante uma sessão. Depois de conectado e autenticado, ele consegue ver o servidor MCP do Figma na lista de ferramentas disponíveis e consultar o contexto de design diretamente. Novas entradas de servidor MCP aparecem no painel de ferramentas imediatamente após uma autenticação bem-sucedida. A autenticação ausente é o principal motivo de falha aqui — e é o que a maioria dos guias de configuração trata como uma caixa de seleção, em vez de uma etapa sequencial obrigatória.
🤔 Espere.
Adicionar a URL do servidor à sua configuração não significa que o servidor está conectado. A autenticação precisa ser concluída no navegador durante a mesma sessão — o servidor MCP do Figma permanece desconectado até que o OAuth seja aprovado, independentemente de quão corretamente a URL foi inserida. A configuração e a conexão são coisas diferentes. A maioria das falhas na primeira tentativa acontece na lacuna entre elas.
Configurando Cursor, VS Code e Codex para usar o servidor MCP do Figma
Cada ferramenta de programação com IA tem um caminho de configuração um pouco diferente. A exigência de autenticação é idêntica nas três — o que muda é onde você adiciona o servidor e como é a interface. Pense em “cliente MCP” como o conceito central: qualquer coisa que fale o Model Context Protocol pode se conectar, mas cada cliente no seu código-base tem seu próprio ritual de configuração. Ferramentas com IA que não oferecem suporte nativo a MCP não vão conectar, independentemente do que você configurar.
Adicionando o servidor MCP do Figma no Cursor
No Cursor, o caminho mais rápido é usar o método de plugin. Digite /add-plugin figma na barra de comandos ou use o deep link direto da documentação da ferramenta MCP do Figma. Qualquer um dos métodos configura automaticamente o servidor MCP e registra o catálogo de habilidades de agente do Figma MCP para que agentes de IA interajam diretamente com o contexto de design do Figma a partir do editor. Você não precisa editar manualmente um arquivo de configuração nesse caminho.
Importante: a autenticação ainda é necessária após a instalação do plugin. O plugin configura o lado do cliente. O lado do Figma ainda precisa da aprovação do OAuth. Não presuma que a instalação do plugin concluiu a conexão. Não concluiu. Execute uma consulta de teste e observe se aparece uma solicitação de autenticação no navegador antes de considerar tudo pronto.
Configurando o servidor MCP do Figma no VS Code
O Model Context Protocol é um padrão aberto, e a implementação do VS Code usa um arquivo de configuração JSON para registrar servidores. Abra a paleta de comandos e execute MCP: Open User Configuration para acessar mcp.json. Adicione uma entrada para o Figma usando a URL remota HTTPS como endereço do servidor. Salve o arquivo e clique em Start no painel MCP. O VS Code solicitará que você aprove o acesso em uma janela do navegador — aprove.
Há um requisito não óbvio: o GitHub Copilot deve estar ativado para que o servidor MCP do Figma funcione no VS Code. A interface padronizada fornecida pelo Model Context Protocol exige o Copilot como camada de cliente. Sem o Copilot ativo, a entrada do servidor aparece na configuração, mas as ferramentas de programação nunca a chamam de fato. Esta é uma daquelas situações em que um protocolo ser um padrão aberto não significa que “compatível” e “funcionando” sejam a mesma coisa sem verificar primeiro os pré-requisitos.
Conectando o Figma MCP no Codex
No Codex, use a interface de Plugins ou o método por CLI: codex mcp add figma --url https://mcp.figma.com/mcp. Isso registra o servidor e expõe o Figma como uma ferramenta para a qual os agentes podem criar consultas. As ferramentas do Figma aparecem na interface de chat somente depois que a autenticação é concluída — a mesma etapa de OAuth no navegador exigida por todos os outros clientes. Se você digitar um prompt relacionado a design logo após executar o comando de adição e não receber nada útil, verifique primeiro a autenticação antes de assumir que o comando falhou.
Como delimitar prompts com URLs de nós do Figma para melhorar a geração de código
É aqui que a maioria das pessoas que conecta o servidor com sucesso ainda obtém resultados medianos. O servidor MCP do Figma pode ler todos os seus arquivos de design no Figma. Isso não significa que você deva pedir que ele faça isso. Dar uma URL de arquivo completo para uma ferramenta de IA é como entregar a alguém um documento de 200 páginas e pedir para “implementar aquilo”. A saída da geração de código reflete o que o LLM realmente consegue analisar — e um arquivo completo pode sobrecarregar a janela de contexto ou retornar um resultado genérico que ignora o frame específico que importa para você.
A abordagem correta é: clique com o botão direito no frame, componente ou camada específica que deseja implementar, selecione "Copy link to selection" ou copie a URL da barra de endereços do navegador com o ID do nó anexado, e cole essa URL específica do frame do Figma no seu prompt. A URL do nó informa exatamente à ferramenta conectada ao MCP qual parte do componente ou layout do Figma ela deve ler. A geração de código resultante reflete as restrições reais de layout, os tokens de design e a hierarquia de componentes daquele nó específico — e não uma média estatística de tudo que está no arquivo.
Para encontrar o ID do nó: no Figma, clique em um frame ou camada. A URL no navegador será atualizada para incluir um parâmetro node-id. Copie a URL inteira. Essa é sua referência delimitada. No aplicativo desktop do Figma, clique com o botão direito em qualquer elemento selecionado e escolha "Copy link to selection". O resultado é o mesmo.
Ao escrever prompts de código com isso, inclua a URL diretamente no texto do prompt. A ferramenta de IA chamará o servidor MCP com essa referência específica de nó e escreverá o código com base no que realmente visualizar.
📊 Na prática:
Um prompt como "Implemente o design em [URL do Figma específica do nó] como um componente React usando nossos tokens do sistema de design" gera código que reflete valores reais de espaçamento, tokens de fonte e estrutura de componentes. Um prompt como "Gere um componente React para um card" gera o que quer que o modelo ache que um card deve ser. A única diferença é a URL. A geração de código que corresponde ao seu design depende quase inteiramente dessa única decisão de delimitação.
Esse é o segredo completo. Delimite pelo nó, não pelo arquivo.
Como verificar se o servidor MCP do Figma está realmente funcionando
Um servidor conectado e um servidor funcionando não são a mesma coisa. Veja como “funcionando” realmente se parece, para que você não precise adivinhar.
Verificação 1: o cliente MCP lista "figma" sem erros de autenticação. No Claude Code, execute /mcp. No VS Code, abra o painel MCP. No Cursor, verifique o status do plugin na barra lateral. O servidor MCP expõe uma lista de ferramentas ao cliente — se você vê ferramentas do Figma listadas sem status de desconexão ou erro, a conexão está ativa. Se a listagem mostrar um aviso de autenticação ou status cinza, volte ao navegador e conclua o OAuth antes de qualquer outra coisa.
Verificação 2: execute uma consulta de teste com uma URL de nó. Cole uma URL de frame específica do Figma em um prompt e peça ao agente de IA para descrever o layout. Se ele retornar contexto de design real — valores de espaçamento, nomes de componentes, referências a tokens, sintaxe de cores — a integração está lendo dados reais do arquivo Figma. Se retornar uma descrição genérica ou disser que não consegue acessar o arquivo, algo na cadeia de autenticação ou permissões ainda está quebrado.
Verificação 3: a saída de código reflete o sistema de design real. O código gerado deve fazer referência a componentes reais, tokens de design reais e à estrutura de layout do seu design no Figma. Se a saída poderia ter sido gerada sem nenhum contexto do Figma, o servidor MCP não está sendo chamado. Este é o teste prático mais importante para ajudar LLMs a gerar código orientado pelo design: a saída do código muda quando você delimita o prompt para outro frame? Se sim, o MCP está funcionando. Se a saída for idêntica independentemente da URL de frame enviada, a ferramenta não está lendo o contexto.
Para configurações desktop: o Figma mostra uma confirmação de "server enabled and running" no painel do Dev Mode. Procure por ela antes de testar pelo lado do editor. Se ele indicar que está em execução, mas o editor não consegue conectar, confirme se você copiou e colou a URL do servidor local na configuração do editor, e não a URL remota mcp.figma.com.
[O changelog do GitHub sobre o Figma MCP também observa que, com VS Code e Copilot, você pode criar e modificar conteúdo nativo do Figma diretamente no editor — enviando a interface renderizada de volta como um frame editável. Se esse ciclo bidirecional é seu objetivo, ele já é real, e a mesma conexão que você acabou de configurar oferece suporte a ele.]
Vale conhecer um padrão: se você está criando pipelines de design para código mais complexos e com várias etapas — aqueles em que o código é revisado, enviado para um repositório e verificado em relação ao sistema de design em uma programação definida — uma ferramenta como a Latenode pode ficar ao redor da conexão MCP e orquestrar o que acontece depois que o código é gerado. O AI Agent Builder da Latenode pode coordenar um agente “leitor”, que consulta o contexto do Figma, e um agente “redator”, que produz o código, com um nó JavaScript pós-processando a saída para aplicar convenções de nomenclatura antes que qualquer coisa chegue ao código-base. A cobrança por execução significa que um fluxo de 6 etapas como esse conta como uma execução, não seis. Vale saber se você já passou da etapa de configuração individual e está entrando na automação em escala de equipe.
