Coleção Figma MCP: Como configurar o servidor remoto MCP do Figma – Figma Learn - Central de ajuda

Este vídeo aborda como configurar o servidor remoto MCP do Figma. Veja as instruções para configurar o servidor desktop MCP do Figma em vez disso →

O servidor remoto MCP do Figma permite que você se conecte diretamente a um servidor MCP hospedado pelo Figma. Então, você pode usar o contexto dos seus arquivos do Figma Design para melhorar seus fluxos de trabalho nas suas ferramentas favoritas de desenvolvimento de IA e criar mais rapidamente.

Usar o servidor MCP remoto é uma ótima opção se você preferir usar o Figma no navegador ou se não conseguir usar o aplicativo Figma para desktop. Se você prefere usar o app para desktop, confira nossa aula sobre como configurar o servidor desktop MCP.

Independentemente da versão do servidor MCP que você escolher usar, você terá acesso às ferramentas necessárias para alinhar seu código com suas especificações de design.

Nesta lição, vamos orientá-lo sobre como configurar o servidor remoto MCP do Figma nestas ferramentas de desenvolvimento. Em seguida, vamos mostrar como usar o servidor MCP do Figma para passar contexto dos seus arquivos do Figma Design. Vamos começar!

Configurar

Configurar o servidor remoto MCP do Figma requer que você configure suas ferramentas de desenvolvimento preferidas.

Não importa qual ferramenta você use, você só precisará configurar o servidor MCP usando este URL https://mcp.figma.com/mcp onde a Figma hospeda o servidor MCP.

//A configuração correta do servidor MCP remoto
{
	"mcpServers": {
		"FigmaRemoteMcp": {
			"url": "<http://mcp.figma.com/mcp>"
		}
	}
}

Para começar:

Crie ou abra um arquivo do Figma Design no navegador.
Com nada selecionado na tela de trabalho, mude para o Dev Mode.
No painel de inspeção à direita, clique em “Configurar um cliente MCP”.

Aqui, você encontrará as configurações para configurar diferentes ferramentas de desenvolvimento, incluindo VS Code, Claude Code e Cursor. Vamos passar por cada uma delas neste vídeo.

Sinta-se à vontade para pular para qualquer ferramenta que planeja usar. E lembre-se de instalar VS Code ou Cursor no seu computador se optar por usá-los como sua ferramenta de desenvolvimento. Para Claude code, vamos configurar o servidor MCP do Figma usando o terminal, mas não se esqueça de executar npm install para instalar o Claude code no seu computador previamente.

Cursor

Para configurar o servidor MCP remoto no Cursor:

No menu de configuração do Dev Mode MCP, selecione Cursor na barra lateral.
Clique no botão Adicionar, que o levará à página de configurações do Cursor MCP.
Verifique se o URL está correto https://mcp.figma.com/mcp, então clique em Instalar.
Clique em Conectar para passar pelo processo de autenticação.
Clique em Abrir se o Cursor lhe pedir para confirmar.

Você deve então ver que o servidor MCP da Figma está habilitado no Cursor e pronto para uso!

Baixar Cursor →

VS Code

Para configurar o servidor MCP remoto no VS Code:

No menu de configuração de Dev Mode MCP, selecione VS Code na barra lateral.
Clique no botão Adicionar, que o levará à página de instalação do servidor MCP Figma no VS Code.
Verifique se o URL está correto https://mcp.figma.com/mcp, então clique em Instalar.
Complete o processo de autenticação com sua conta Figma para permitir que o VS Code a acesse.
Após a autenticação, o servidor MCP do Figma é instalado no VS Code.
Abra a paleta de comando e procure por “MCP: Open User Configuration”.
Selecione-o para abrir o arquivo mcp.json, e você deverá ver que o servidor agora está funcionando.

{
  "inputs": [],
  "servers": {
    "figmaRemoteMcp": {
      "url": "<https://mcp.figma.com/mcp>",
      "type": "http"
    }
  }
}

Baixar VS Code →

Claude Code

Por último, vamos configurar o servidor MCP no Claude Code.

Primeiro, abra seu terminal e execute este comando de adição MCP em seu terminal para adicionar o Figma MCP ao Claude Code.

claude mcp add --transport http figma-remote-mcp <https://mcp.figma.com/mcp>

Em seguida, reinicie o Claude Code se ele estiver em execução.
Você pode digitar /mcp no Claude para gerenciar todos os seus servidores MCP.
Pressione Enter para fazer login no Figma se o servidor figma-remote-mcp mostrar que está atualmente desconectado.
Pressione Enter e, em seguida, clique em Permitir acesso para autenticar e permitir que o Claude Code acesse sua conta Figma.
Após concluir a autenticação, você deverá ver uma mensagem de confirmação no Claude Code.
Para confirmar que o servidor MCP remoto do Figma está conectado, use o comando /mcp novamente.

O servidor figma-remote-mcp agora deve estar exibido como conectado. Parabéns! Você está pronto para começar a fazer prompts no Claude Code.

Baixar o Claude Code →

Usando o servidor MCP

Para começar a usar o servidor MCP, você precisa:

Um acesso completo ou um acesso Dev (outros acessos podem ter limites de uso com o servidor MCP)
Um arquivo do Figma Design, Figma Make ou FigJam
Edite ou visualize apenas permissões para esse arquivo. Se outra pessoa for proprietária do arquivo que sua equipe deseja usar, peça a ela para compartilhá-lo com você primeiro.

O servidor MCP do Figma remoto é baseado em link. Isso significa que você precisa fornecer o contexto do link ou seleção que deseja que o servidor MCP use, copiando de um arquivo e colando na ferramenta de sua escolha.

Para obter o link para um objeto, selecione uma camada ou quadro em qualquer um dos seus arquivos do Figma Design:

Clique com o botão direito do mouse em uma camada.
Escolha copiar link para a seleção. Você também pode copiar o URL dessa camada na barra de endereço do seu navegador. Isso incluirá o ID do nó para o objeto no seu arquivo.
Em seguida, cole a URL na sua ferramenta de desenvolvimento para delimitar seu prompt para aquele nó.

Você também pode usar o URL completo do arquivo se não tiver nada selecionado na tela de trabalho, e copiar o URL da barra de endereços. Fazer isso permite que você extraia o contexto de todo o arquivo de design Se você estiver usando o servidor MCP com Figma Make, provavelmente você vai querer passar o URL completo do arquivo usando este método.

Conclusão

Agora que você configurou o servidor remoto MCP do Figma em seu editor de código, está pronto para começar a construir e codificar com contexto e informações adicionais diretamente de seus arquivos do Figma Design.

Tentando configurar o servidor MCP do Figma em outros editores de código? Consulte nossa documentação de desenvolvedores para saber mais.

Os servidores MCP do Figma funcionam melhor com o Code Connect para manter sua base de código consistente com seu design system. Confira nossa documentação do Code Connect para saber mais.

Teste seus conhecimentos!