Guia para o servidor MCP do Figma

O servidor Figma MCP ajuda os desenvolvedores a explorar e implementar designs de maneira rápida e precisa:

• Obtenha contexto de design e código dos seus designs no Figma, FigJam e arquivos Make
• Capture sua UI ao vivo como camadas de design, trazendo as interfaces renderizadas pelo seu código para arquivos de Figma Design
• Melhore a maneira como você trabalha com componentes de design e com o Code Connect

As ferramentas dentro do servidor MCP do Figma trazem contexto adicional do Figma para o seu fluxo de trabalho, para que seu código não apenas corresponda aos seus sistemas existentes, mas também ao seu 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.

Confira nossa Coleção MCP do Figma para saber mais sobre o servidor MCP e como integrar o Figma ao seu fluxo de trabalho →

Com o servidor ativado, você pode:

• Gere designs a partir da interface do usuário ao vivo dos seus apps e sites web

  Transforme a UI ativa do seu navegador (produção, staging ou localhost) em camadas de design editáveis no Figma. Envie páginas, elementos ou fluxos inteiros para o Figma Design para exploração, alinhamento e refinamento.

  Nota: Este recurso requer o servidor remoto Figma MCP e atualmente é suportado apenas para Claude Code, Codex por OpenAI e VS Code.

  Este recurso está sendo continuamente melhorado. Se você encontrar problemas, pode relatar os problemas usando Fig, nosso chatbot de suporte ou enviando um email para o suporte (planos pagos).

  Saiba mais sobre gerar designs a partir das suas interfaces

• 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.

• Recuperar recursos do FigJam

  Acesse conteúdo de seus diagramas do FigJam e use-o em seu fluxo de trabalho de geração de código. Incorpore ideias iniciais, fluxos ou mapas de arquitetura diretamente no desenvolvimento.

• Recupere recursos do Make

  Reúna recursos de código dos arquivos Make e forneça-os ao LLM como contexto. Isso pode ajudar à medida que você passa do protótipo para o aplicativo de produção.

• Mantenha seus componentes do design system consistentes 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

Configure o servidor MCP

Você pode conectar o servidor MCP do Figma de duas maneiras:

• Servidor MCP remoto: conecta-se diretamente ao endpoint hospedado do Figma em https://mcp.figma.com/mcp. Saiba como instalar o servidor remoto MCP.
• Servidor MCP de desktop: funciona localmente através do app Figma para desktop. Saiba como instalar o servidor MCP para desktop.

Conecte o servidor MCP ao seu editor

Siga as instruções do seu editor específico para se conectar ao servidor MCP do Figma, localmente ou remotamente. Alguns clientes também suportam Skills, que adicionam instruções de nível de agente que ajudam ferramentas de IA a trabalhar de forma mais eficaz com Figma Designs:

Sobre Skills

As Skills fornecem orientação sobre como um agente deve completar tarefas específicas, usando uma combinação de chamadas de ferramentas MCP e instruções detalhadas.

Embora o servidor Figma MCP exponha ferramentas individuais, as Skills ajudam os agentes a entender quais ferramentas usar, como sequenciá-las e como aplicar os resultados ao trabalhar com designs do Figma.

Habilidades podem guiar os agentes por fluxos de trabalho, como:

• Conecte componentes de design do Figma a componentes de código usando o Code Connect
• Gere regras de design system alinhadas à sua base de código 
• Transforme designs em código pronto para produção 

As Skills não substituem conexões MCP nem adicionam novas capacidades MCP. Elas reduzem a configuração e as suposições ao agrupar fluxos de trabalho recomendados em instruções reutilizáveis.

Solicite ao seu cliente MCP

O servidor MCP do Figma 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.

Para uma lista completa de ferramentas e exemplos, consulte Ferramentas e Prompts.

Primeiro, siga as instruções para instalar o servidor Figma MCP para o cliente MCP de sua preferência. Fornecemos instruções para:

• Claude Code
• Codex da OpenAI
• Cursor
• VS Code

Para outros clientes MCP, siga as instruções na documentação do seu cliente para adicionar servidores MCP. Veja a tabela em Conecte o servidor MCP ao seu editor para links.

Exemplo: Obter contexto de design

Obter contexto de design e código a partir de arquivos é baseado em links. Para obter contexto de design:

1. No Figma Design, selecione a camada para a qual deseja obter contexto de design.
2. Na barra de endereços do seu navegador, copie o link para um quadro ou camada no Figma.

3. No seu cliente MCP, cole o URL e solicite ao cliente que o ajude a implementar o design.

   

Exemplo: Enviar UI para o Figma

Enviar a UI ao vivo do seu app ou site para o Figma é feito através de conversa com seu cliente MCP:

1. Solicite ao seu cliente MCP: "Inicie um servidor local para meu app e capture a UI em um novo arquivo Figma."
2. Siga os passos que o seu cliente fornecer. Seu cliente abrirá uma janela do navegador para você ou fornecerá um link para seguir.
3. Use a barra de ferramentas de captura para capturar páginas, elementos e estados do seu app ou site.
4. Informe ao seu cliente quando você terminar. Seu cliente lhe dará um link para abrir o arquivo Figma que foi criado.

Melhorando a saída do servidor MCP

Para a melhor saída, recomendamos configurar regras para orientar o agente. Para começar, temos algumas regras de exemplo úteis.