Coleção Figma MCP: Como configurar o servidor MCP do Figma para desktop

O servidor MCP da Figma traz contexto dos seus arquivos Figma e seu design para suas ferramentas de desenvolvimento favoritas – como VS Code, Claude Code e Cursor– para manter seu código alinhado às suas especificações de design.

Nesta lição, vamos orientá-lo nos passos para configurar o servidor desktop MCP do Figma.

Para usar o servidor MCP para desktop da Figma, você precisará do aplicativo Figma para Desktop. Então vá em frente e baixe o aplicativo para desktop se ainda não o fez. E se você já o possui, certifique-se de estar na última versão.

A Figma também tem um servidor MCP remoto se preferir usar o Figma no navegador. De qualquer forma, você terá as ferramentas necessárias para alinhar seu código com seus designs.

Agora vamos aprender como configurar o servidor MCP!

Configurar o servidor MCP para desktop

Para começar a configurar o servidor MCP para desktop, siga estas etapas no Figma:

1. Instale e abra o app Figma para desktop.
2. Abra um arquivo do Figma Design.
3. Com nada selecionado na tela de trabalho, clique no interruptor na barra de ferramentas para alternar para o Dev Mode.
4. Depois, clique para habilitar o servidor MCP na barra lateral direita.
5. O Figma exibirá uma mensagem de confirmação na parte inferior da tela informando que o servidor está ativado e em execução, e você verá um botão para copiar o endereço do servidor.
6. Clique em copiar URL e mantenha-o à mão para sua configuração na próxima etapa.

Agora, vamos passar por como adicionar o servidor MCP da Figma a algumas ferramentas de desenvolvimento, incluindo Cursor, VS Code e Claude Code. Certifique-se de instalar as ferramentas em seu computador antes da configuração. Sinta-se à vontade para pular para qualquer ferramenta que planeja usar.

Cursor

Para configurar o servidor MCP para desktop da Figma com o Cursor:

1. Abra a paleta de comandos.
   • macOS: Shift Command P
   • Windows: Shift Ctrl P
2. Procure por "Configurações de Cursor".
3. Clique na aba MCP.
4. Clique em Adicionar MCP Personalizado.
5. Copie a configuração abaixo.
6. Em seguida, salve o arquivo e volte para as configurações.

{
  "mcpServers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

Você deve ver a ferramenta MCP da Figma habilitada no Cursor. Isso significa que está tudo configurado e pronto para começar a usar o servidor MCP.

Baixar Cursor →

VS Code

Para configurar o servidor MCP do Figma para desktop no VS Code:

1. Certifique-se de ter o GitHub co-pilot habilitado. Isto é necessário para usar o servidor MCP do Figma.
2. Abra a paleta de comandos e procure por “Adicionar servidor”.
   • macOS: Shift Command P
   • Windows: Shift Ctrl P
3. Selecione HTTP.
4. Cole o URL do servidor `http://127.0.0.1:3845/mcp na barra de busca e pressione Enter.
5. Digite “Figma MCP” quando precisar informar um ID de servidor e pressione Enter.
6. Se você tiver uma área de trabalho aberta, selecione se deseja adicionar o servidor globalmente ou apenas para a área de trabalho. 
7. Assim que confirmado, você verá uma configuração assim em seu arquivo mcp.json.

Baixar VS Code →

Claude Code

Para configurar o servidor MCP do Figma para desktop no Claude Code:

1. Abra seu terminal e execute o comando MCP add para o Claude CLI claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp.
2. Reinicie o Claude Code para garantir que as alterações na configuração sejam aplicadas.
3. Então, você deverá ver novos comandos Figma disponíveis, assim como o servidor MCP do Figma quando executar o comando /mcp.

A partir daqui, você pode começar a fazer prompts ou usar ferramentas diretamente do Claude code.

Baixar o Claude Code →

Usando o servidor MCP para desktop

Agora que você configurou o servidor MCP para desktop, aqui estão algumas dicas de como ele funciona.

O servidor MCP é baseado em seleção. Isso significa que ele pode entender quais camadas você selecionou dentro de um arquivo Figma.

Tente selecionar uma camada em seu arquivo de design a partir do app para desktop e insira um prompt para pedir à ferramenta que gere um componente react baseado na seleção. A ferramenta de agente de desenvolvimento lerá sua seleção no arquivo Figma e gerará código com base no design.

Se você está começando agora e não tem arquivos de design para usar com as ferramentas disponíveis, pode encontrar arquivos de exemplo na Comunidade do Figma, ou pegar uma cópia do oficial do Figma em Design System Simples para experimentar mais ferramentas.

Conclusão

Com o servidor MCP do Figma para desktop configurado, você está pronto para trazer o contexto de todos os seus designs diretamente para suas ferramentas de desenvolvimento.

Tentando configurar o servidor MCP do Figma para editores de código não abordados neste vídeo? Confira o catálogo completo de clientes suportados aqui.

E você sabia que os servidores MCP da Figma funcionam melhor com o Code Connect? O Code Connect faz a ponte entre sua base de código e o Dev Mode e habilita a exibição do código do componente do design system real no Figma. Você encontrará muito sobre Code Connect na documentação para desenvolvedores da Figma.