Guia para o servidor MCP do Dev Mode – Figma Learn - Central de ajuda

🚧 Atualmente, o servidor MCP do Dev Mode está em versão beta aberta. Algumas funções e configurações podem não estar disponíveis. O recurso pode mudar e você pode encontrar bugs ou problemas de desempenho durante o período de versão beta.

Antes de começar

Quem pode usar esse recurso

O servidor MCP do Dev Mode está em versão beta aberta.

Disponível no acesso Full ou Dev nos planos Profissional, Organização ou Enterprise

Você deve usar um editor de código ou aplicativo compatível com servidores MCP (por exemplo, VS Code, Cursor, Windsurf, Claude Code)

Só é possível usar o servidor MCP do Dev Mode no app Figma para desktop. Baixe o app Figma para desktop →

O servidor MCP do Dev Mode integra o Figma diretamente ao seu fluxo de trabalho, fornecendo informações importantes de design e contexto para agentes de IA que geram código a partir de arquivos do Figma Design.

Os servidores MCP fazem parte de uma interface padronizada para que os agentes de IA possam interagir com fontes de dados usando Model Context Protocol.

Com o servidor ativado, você pode:

Gerar código a partir de quadros selecionados

Selecione um quadro do Figma e converta-o em código. É ótimo para equipes de produto que desenvolvem novos fluxos ou iteram em funcionalidades de aplicativos.
Extrair contexto de design

Integre variáveis, componentes e dados de layout diretamente ao seu IDE. É especialmente útil para design systems e fluxos de trabalho baseados em componentes.
Programar de um jeito mais inteligente com o Code Connect

Melhore a qualidade do resultado reutilizando seus componentes reais. O Code Connect mantém a consistência do código gerado com a sua base de código.

Saiba mais sobre o Code Connect →

Etapa 1: Ativar o servidor MCP

Abra o aplicativo Figma para desktop e confira se você atualizou para a versão mais recente.
Crie ou abra um arquivo do Figma Design.
No canto superior esquerdo, abra o menu do Figma.
Em Preferências, selecione Ativar servidor MCP no Dev Mode.

Você verá uma mensagem de confirmação na parte inferior da tela informando que o servidor está ativado e em execução.

O servidor é executado localmente em http://127.0.0.1:3845/sse. Mantenha esse endereço à mão para o seu arquivo de configuração na próxima etapa.

Etapa 2: Configurar o cliente MCP

Assim que o servidor estiver em execução localmente no aplicativo Figma para desktop, os clientes MCP poderão se conectar ao seu servidor. Para fazer isso, adicione o seguinte ao arquivo de configuração do servidor MCP:

{
  
    "mcpServers": {
    
      "Figma": {

        "url": "http://127.0.0.1:3845/sse"

    }

  }

}

Siga as instruções do seu cliente específico para adicionar o servidor MCP do Dev Mode.

Acesse Code → Settings → Settings ou use o atalho ⌘ ,
Na barra de busca, digite "MCP".
Selecione Edit in settings.json.

Adicione a seguinte configuração:

"chat.mcp.discovery.enabled": true,
 "mcp": {
   "servers": {
     "Figma Dev Mode MCP": {
       "type": "sse",
       "url": "http://127.0.0.1:3845/sse"
     }
   }
 },
 "chat.agent.enabled": true

Abra a barra de ferramentas do chat ⌥⌘B e mude para o modo Agent.
Abra o menu da ferramenta de seleção e procure uma seção chamada: MCP Server: Figma Dev Mode MCP. Se nenhuma ferramenta aparecer na lista, reinicie o aplicativo Figma para desktop e o VS Code.

Observação: você deve ter o GitHub Copilot ativado na sua conta para usar o MCP no VS Code.

Para saber mais, consulte a documentação oficial do VS Code.

Abra Cursor → Settings → Cursor Settings.
Acesse a aba MCP.
Clique em + Adicionar novo servidor MCP global.

Insira a configuração a seguir e salve:

{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

Para saber mais, consulte a documentação oficial do Cursor.

Abra Windsurf → Settings → Windsurf Settings ou use o atalho ⌘ ,.
Acesse Cascade settings e selecione Open plugin store.
Busque por Figma e instale o plugin.
Abra o Cascade. O servidor MCP do Figma e as ferramentas disponíveis serão exibidos.

Para saber mais, consulte a documentação oficial do Windsurf.

Atenção: no Windsurf, altere a propriedade url no arquivo de configuração para serverUrl para evitar erros.

Abra o terminal e execute:

claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse

Use os seguintes comandos para verificar as configurações do MCP e gerenciar servidores:
- Listar todos os servidores configurados
```
claude mcp list
```
- Obter detalhes de um servidor específico
```
claude mcp get my-server
```
- Remover um servidor
```
claude mcp remove my-server
```

Para saber mais, consulte a documentação oficial do Anthropic.

Depois de configurado, atualize ou inicie o servidor. Você deve ver uma conexão bem-sucedida e as ferramentas disponíveis. Se a conexão falhar ou se nenhuma ferramenta aparecer, verifique se o servidor está ativo no aplicativo Figma para desktop.

Etapa 3: Enviar um prompt ao cliente MCP

O servidor MCP do Dev Mode introduz um conjunto de ferramentas que auxiliam os LLMs na tradução de designs no Figma. Depois de conectado, você pode instruir seu cliente MCP a acessar um nó de design específico.

Existem duas maneiras de fornecer o contexto do design no Figma ao seu cliente de IA:

Com seleção

Selecione um quadro ou camada dentro do Figma usando o app para desktop.
Solicite ao seu cliente que ajude a implementar sua seleção atual.

Com links

Copie o link para um quadro ou camada no Figma.
Solicite ao seu cliente que ajude a implementar o design na URL selecionada.

Atenção: seu cliente não conseguirá acessar a URL selecionada, mas extrairá o node-id necessário para que o servidor MCP identifique sobre qual objeto deve retornar informações.

Ao utilizar o servidor MCP do Dev Mode, você pode ver um pop-up dentro do Figma pedindo seu feedback. Para nos fornecer feedback, use este formulário.