Antes de começar
Quem pode usar esse recurso
O servidor remoto está disponível em todos os acessos e planos.
O servidor de desktop está disponível nos acessos Dev ou Full para todos os planos pagos.
Você deve usar um editor de código ou aplicativo compatível com servidores MCP (ou seja, VS Code, Cursor, Windsurf, Claude Code). Veja nosso catálogo MCP para uma lista completa de clientes suportados ->
Usuários no plano Iniciante ou com acessos Visualizar ou Collab em planos pagos estarão limitados a até 6 chamadas de ferramenta por mês.
Usuários com acessos Dev ou Full nos planos Profissional, Organização ou Enterprise têm limites de taxa por minuto, que seguem os mesmos limites da REST API do Figma de Nível 1. Assim como na REST API do Figma, o Figma reserva-se o direito de alterar os limites de taxa.
O servidor Figma MCP ajuda os desenvolvedores a implementar projetos com rapidez e precisão, fornecendo contexto importante para agentes de IA que geram código a partir de arquivos Figma Design, FigJam e Make. 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.
Observação: esta página é uma visão geral do servidor MCP do Figma. Para instruções detalhadas e exemplos de código, consulte a documentação do desenvolvedor do servidor MCP do Figma →
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.
-
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.
Configure o servidor MCP
Você pode conectar o servidor MCP do Figma de duas maneiras:
- Servidor MCP de desktop: funciona localmente através do aplicativo Figma para desktop.
-
Servidor MCP remoto: conecta-se diretamente ao endpoint hospedado do Figma em
https://mcp.figma.com/mcp.
Ativar o servidor MCP para desktop
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.
Na barra de ferramentas na parte inferior, alterne para Dev Mode ou use o atalho de teclado ShiftD.
Na seção Servidor MCP do painel de inspeção, clique em Ativar servidor MCP para desktop.
Uma mensagem de confirmação aparece na parte inferior da janela quando o servidor está em execução.
O servidor é executado localmente em http://127.0.0.1:3845/mcp. Mantenha esse endereço à mão para o seu arquivo de configuração na próxima etapa.
Conecte o servidor MCP ao seu editor
Siga as instruções do seu editor específico para se conectar ao servidor MCP do Figma, local ou remotamente:
| Cliente | Suporte para servidor desktop | Suporte para servidor remoto |
| Amazon Q | ✓ | |
| Android Studio | ✓ | ✓ |
| Claude Code | ✓ | ✓ |
| Codex da OpenAI | ✓ | ✓ |
| Cursor | ✓ | ✓ |
| Gemini CLI | ✓ | ✓ |
| Kiro | ✓ | |
| OpenHands | ✓ | |
| Replit | ✓ | |
| VS Code | ✓ | ✓ |
| Warp | ✓ | ✓ |
Dica: para a lista mais recente de editores e clientes compatíveis, confira nosso Catálogo MCP.
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.
Existem duas maneiras de fornecer o contexto do design no Figma ao seu cliente de IA:
Baseado em seleção (servidor para desktop apenas)
- 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.
Ferramentas e sugestões de uso
O servidor MCP do Figma inclui várias ferramentas que ajudam seu assistente de IA a gerar, adaptar e alinhar código ao seus designs. Cada ferramenta suporta diferentes fluxos de trabalho, desde a produção de código até o mapeamento de componentes ou a recuperação de tokens de design. Para saber mais sobre as ferramentas disponíveis e sugestões de uso, consulte a documentação de desenvolvedor do servidor MCP do Figma.
Ao usar o servidor Figma MCP, você poderá ver uma janela pop-up dentro do Figma solicitando seu feedback. Para nos fornecer feedback, use este formulário.