Figma

Guia do Servidor MCP do Figma

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

[!NOTE] Limites de taxa se aplicam às ferramentas do servidor MCP do Figma que leem dados do Figma. Algumas ferramentas, como aquelas que escrevem em arquivos do Figma, estão isentas dos limites de taxa.

Usuários no plano Starter ou com assentos de Visualização ou Colaboração em planos pagos terão um limite de até 6 chamadas de ferramenta por mês.

Usuários com um assento Dev ou Full nos planos Professional, Organization ou Enterprise têm limites de taxa por minuto, que seguem os mesmos limites do Figma REST API Nível 1. Assim como na API REST do Figma, o Figma reserva o direito de alterar os limites de taxa.

Para o conjunto completo de documentação do servidor MCP do Figma, consulte nossa documentação para desenvolvedores. Ao usar o servidor MCP do Figma e os recursos relacionados (incluindo estas habilidades), você concorda com os Termos de Desenvolvedor do Figma. Estas habilidades estão atualmente disponíveis como um recurso Beta.

Recursos

• Escrever no canvas (somente servidor remoto): Crie e modifique conteúdo nativo do Figma diretamente do seu cliente MCP. Com as habilidades certas, os agentes podem criar e atualizar frames, componentes, variáveis e auto layout em seus arquivos do Figma usando seu sistema de design como fonte da verdade.

  Observação: Estamos melhorando rapidamente a forma como o Figma suporta agentes de IA. O recurso de escrever no canvas será eventualmente um recurso pago baseado em uso, mas atualmente está disponível gratuitamente durante o período beta.

• Gerar código a partir de frames selecionados

  Selecione um frame do Figma e transforme-o em código. Ótimo para equipes de produto que estão construindo novos fluxos ou iterando em recursos de aplicativos.

• Extrair contexto de design

  Traga variáveis, componentes e dados de layout diretamente para sua IDE. Isso é especialmente útil para sistemas de design e fluxos de trabalho baseados em componentes.

• Codifique de forma mais inteligente com o Code Connect

  Aumente a qualidade da saída reutilizando seus componentes reais. O Code Connect mantém seu código gerado consistente com sua base de código.

  Saiba mais sobre o Code Connect →

• Gerar designs do Figma a partir de páginas da web (em implementação)

  Capture, importe ou converta uma página da web em um design do Figma diretamente do seu agente de codificação de IA.

Instalação e Configuração

Conectar-se ao servidor MCP do Figma

Diferentes clientes MCP exigem configurações ligeiramente diferentes. Siga as instruções abaixo para seu cliente específico para se conectar ao servidor MCP do Figma.

VS Code

1. Use o atalho ⌘ Shift P para pesquisar por MCP:Add Server.
2. Selecione HTTP.
3. Cole a URL do servidor https://mcp.figma.com/mcp na barra de pesquisa. Em seguida, pressione Enter.
4. Quando for solicitado um ID de servidor, insira figma.
5. Selecione se deseja adicionar este servidor globalmente ou apenas para o workspace atual. Uma vez confirmado, você verá uma configuração como esta no seu arquivo mcp.json:

{
  "servers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

6. Abra a barra de ferramentas de chat usando ⌥⌘B ou ⌃⌘I e mude para o modo Agente.
7. Com o chat aberto, digite #get_design_context para confirmar que as ferramentas do servidor MCP do Figma estão disponíveis. Se nenhuma ferramenta for listada, reinicie o VS Code.

[!NOTE] Você deve ter o GitHub Copilot habilitado em sua conta para usar MCP no VS Code.

Para mais informações, consulte a documentação oficial do VS Code.

Cursor

A maneira recomendada de configurar o servidor MCP do Figma no Cursor é instalando o Plugin do Figma, que inclui configurações do servidor MCP, bem como Habilidades de Agente para fluxos de trabalho comuns.

Instale o plugin digitando o seguinte comando no chat de agente do Cursor:

/add-plugin figma

O plugin inclui:

• Configuração do servidor MCP para o servidor MCP do Figma
• Habilidades para implementar designs, conectar componentes via Code Connect e criar regras de sistema de design
• Regras para o manuseio adequado de assets do servidor MCP do Figma

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Claude Code

A maneira recomendada de configurar o servidor MCP do Figma no Claude Code é instalando o Plugin do Figma, que inclui configurações do servidor MCP, bem como Habilidades de Agente para fluxos de trabalho comuns.

Execute o seguinte comando para instalar o plugin do marketplace oficial de plugins da Anthropic.

claude plugin install figma@claude-plugins-official

Saiba mais sobre os Plugins do Claude Code e Habilidades de Agente da Anthropic.

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

Gemini CLI

Instale a extensão do Figma para o Gemini CLI executando o seguinte comando:

gemini extensions install https://github.com/figma/mcp-server-guide

Após a instalação, autentique-se com o Figma executando gemini e, em seguida, execute o seguinte comando dentro da CLI:

/mcp auth figma

Para desinstalar a extensão:

gemini extensions uninstall figma

Outros editores

Outros editores de código e ferramentas que suportam Streamable HTTP também podem se conectar ao servidor MCP do Figma.

Se você estiver usando um editor ou ferramenta diferente, verifique sua documentação para confirmar se ele suporta comunicação baseada em Streamable HTTP. Se suportar, você pode adicionar manualmente o servidor MCP do Figma usando esta configuração:

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Dando instruções ao seu cliente MCP

O servidor MCP do Figma introduz um conjunto de ferramentas que ajudam LLMs a traduzir designs no Figma. Uma vez conectado, você pode instruir seu cliente MCP a acessar um nó de design específico.

Para fornecer contexto de design do Figma ao seu cliente de IA:

1. Copie o link para um frame ou camada no Figma.
2. Instrua seu cliente a ajudá-lo a implementar o design na URL selecionada.

[!NOTE] Seu cliente não conseguirá navegar até a URL selecionada, mas extrairá o node-id necessário para que o servidor MCP identifique qual objeto deve retornar informações.

Ferramentas e habilidades

O Figma mantém uma lista de ferramentas fornecidas pelo servidor MCP do Figma na documentação para desenvolvedores.

Você também pode aprender mais sobre as habilidades incluídas no plugin do Figma para agentes suportados na Central de Ajuda do Figma. Dependendo do agente, você também pode ver os termos connector, extension ou power; estes incluem o mesmo conjunto de habilidades.

Este repositório também contém habilidades de fluxo de trabalho independentes que não são agrupadas com o plugin do Figma:

• workflow-skills/video-interaction-mapper: Transforma gravações de UI em storyboards anotados do Figma
• workflow-skills/generate-project-plan: Transforma um PRD (mais base de código opcional) em um quadro de planejamento de projeto no FigJam

Melhores práticas do MCP

A qualidade do código gerado depende de vários fatores. Alguns controlados por você, e outros pelas ferramentas que você está usando. Aqui estão algumas sugestões para uma saída limpa e consistente.

Estruture seu arquivo do Figma para um código melhor

Forneça o melhor contexto para sua intenção de design, para que o MCP e seu assistente de IA possam gerar código claro, consistente e alinhado com seu sistema.

• Use componentes para qualquer coisa reutilizada (botões, cards, inputs, etc.)
• Vincule componentes à sua base de código via Code Connect. Esta é a melhor maneira de obter reutilização consistente de componentes no código. Sem isso, o modelo está adivinhando.
• Use variáveis para espaçamento, cor, raio e tipografia.
• Nomeie camadas semanticamente (ex.: CardContainer, não Group 5)
• Use Auto layout para comunicar intenção responsiva.

[!TIP] Redimensione o frame no Figma para verificar se ele se comporta como esperado antes de gerar código.

• Use anotações e recursos de desenvolvimento para transmitir intenção de design que é difícil de capturar apenas com recursos visuais, como como algo deve se comportar, alinhar ou responder.

Escreva instruções eficazes para guiar a IA

O MCP fornece dados estruturados do Figma ao seu assistente de IA, mas sua instrução direciona o resultado. Boas instruções podem:

• Alinhar o resultado com seu framework ou sistema de estilos
• Seguir a estrutura de arquivos e convenções de nomenclatura
• Adicionar código a caminhos específicos (ex.: src/components/ui)
• Adicionar ou modificar código em arquivos existentes em vez de criar novos
• Seguir sistemas de layout específicos (ex.: grid, flexbox, absolute)

Exemplos:

• "Gere código SwiftUI para iOS a partir deste frame"
• "Use Chakra UI para este layout"
• "Use componentes src/components/ui"
• "Adicione isso a src/components/marketing/PricingCard.tsx"
• "Use nosso componente de layout Stack"

Pense nas instruções como um briefing para um colega de equipe. Intenção clara leva a melhores resultados.

Acione ferramentas específicas quando necessário

O MCP suporta diferentes ferramentas, e cada uma fornece ao seu assistente de IA um tipo diferente de contexto estruturado. Às vezes, o assistente não escolhe automaticamente a ferramenta certa, especialmente à medida que mais ferramentas se tornam disponíveis. Se os resultados estiverem errados, tente ser explícito em sua instrução.

• get_design_context fornece uma representação estruturada em React + Tailwind da sua seleção no Figma. Este é um ponto de partida que seu assistente de IA pode traduzir para qualquer framework ou estilo de código, dependendo da sua instrução.
• get_variable_defs extrai as variáveis e estilos usados na sua seleção (cor, espaçamento, tipografia, etc.). Isso ajuda o modelo a referenciar seus tokens diretamente no código gerado.

Por exemplo, se você está recebendo código bruto em vez de tokens, tente algo como:

• "Obtenha os nomes e valores das variáveis usadas neste frame."

Adicione regras personalizadas

Defina orientações em nível de projeto para manter a saída consistente—assim como notas de integração para um novo desenvolvedor. Estas são coisas como:

• Primitivas de layout preferidas
• Organização de arquivos
• Padrões de nomenclatura
• O que não codificar de forma fixa

Você pode fornecer isso no formato que seu cliente MCP usa para arquivos de instrução.

Exemplos:

Garanta uma saída consistentemente boa

## Figma MCP Integration Rules
These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change.

### Required flow (do not skip)
1. Run get_design_context first to fetch the structured representation for the exact node(s).
2. If the response is too large or truncated, run get_metadata to get the high‑level node map and then re‑fetch only the required node(s) with get_design_context.
3. Run get_screenshot for a visual reference of the node variant being implemented.
4. Only after you have both get_design_context and get_screenshot, download any assets needed and start implementation.
5. Translate the output (usually React + Tailwind) into this project's conventions, styles and framework.  Reuse the project's color tokens, components, and typography wherever possible.
6. Validate against Figma for 1:1 look and behavior before marking complete.

### Implementation rules
- Treat the Figma MCP output (React + Tailwind) as a representation of design and behavior, not as final code style.
- Replace Tailwind utility classes with the project's preferred utilities/design‑system tokens when applicable.
- Reuse existing components (e.g., buttons, inputs, typography, icon wrappers) instead of duplicating functionality.
- Use the project's color system, typography scale, and spacing tokens consistently.
- Respect existing routing, state management, and data‑fetch patterns already adopted in the repo.
- Strive for 1:1 visual parity with the Figma design. When conflicts arise, prefer design‑system tokens and adjust spacing or sizes minimally to match visuals.
- Validate the final UI against the Figma screenshot for both look and behavior.

Cursor

---
description: Figma MCP server rules
globs:
alwaysApply: true
---
- The Figma MCP server provides an assets endpoint which can serve image and SVG assets
- IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly
- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided

Claude Code

# MCP Servers

## Figma MCP server rules

- The Figma MCP server provides an assets endpoint which can serve image and SVG assets
- IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly
- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided

Regras gerais de qualidade

- IMPORTANT: Always use components from `/path_to_your_design_system` when possible
- Prioritize Figma fidelity to match designs exactly
- Avoid hardcoded values, use design tokens from Figma where available
- Follow WCAG requirements for accessibility
- Add component documentation
- Place UI components in `/path_to_your_design_system`; avoid inline styles unless truly necessary

Adicionar isso uma vez pode reduzir drasticamente a necessidade de instruções repetitivas e garante que colegas ou agentes sigam consistentemente as mesmas expectativas.

Certifique-se de verificar a documentação da sua IDE ou cliente MCP sobre como estruturar regras, e experimente para descobrir o que funciona melhor para sua equipe. Orientação clara e consistente muitas vezes leva a um código melhor e mais reutilizável, com menos idas e vindas.

Divida seleções grandes

Divida telas em partes menores (como componentes ou blocos lógicos) para resultados mais rápidos e confiáveis.

Seleções grandes podem tornar as ferramentas lentas, causar erros ou resultar em respostas incompletas, especialmente quando há contexto demais para o modelo processar. Em vez disso:

1. Gere código para seções menores ou componentes individuais (ex.: Card, Header, Sidebar)
2. Se parecer lento ou travado, reduza o tamanho da sua seleção

Isso ajuda a manter o contexto gerenciável e os resultados mais previsíveis, tanto para você quanto para o modelo.

Se algo na saída não parecer certo, geralmente ajuda revisitar o básico: como o arquivo do Figma está estruturado, como a instrução foi escrita e qual contexto está sendo enviado. Seguir as melhores práticas acima pode fazer uma grande diferença e muitas vezes leva a um código mais consistente e reutilizável.

Trazendo contexto Make para seu agente

A integração Make + MCP facilita levar protótipos do design à produção. Ao conectar projetos do Make diretamente ao seu agente via MCP, você pode extrair recursos e reutilizá-los no seu código. Isso reduz o atrito ao estender protótipos para aplicações reais e garante que a intenção do design seja fielmente levada à implementação.

Com esta integração, você pode:

• Buscar contexto do projeto diretamente do Make (arquivos individuais ou o projeto inteiro)
• Solicitar o uso de componentes de código existentes em vez de começar do zero
• Estender protótipos com dados reais para validar e colocar designs em produção mais rapidamente

Como funciona

[!NOTE] Esta integração utiliza o recurso de resources do MCP, que permite que seu agente busque contexto diretamente de projetos do Make. Está disponível apenas em clientes que suportam resources do MCP.

Etapas para buscar recursos do Make

1. Peça ao seu agente para buscar contexto fornecendo um link válido do Make
2. Receba uma lista de arquivos disponíveis do seu projeto no Make
3. Baixe os arquivos que deseja buscar quando solicitado

Exemplo de fluxo de trabalho

Objetivo: Implementar um componente de popup no seu código de produção que corresponda ao design e comportamento definidos no Make.

1. Compartilhe o link do seu projeto no Make com seu agente.
2. Peça ao agente: "Quero obter o comportamento e os estilos do componente popup deste arquivo do Make e implementá-lo usando meu componente popup."

Seu agente buscará o contexto relevante do Make e o orientará na extensão do seu componente popup existente com a funcionalidade e os estilos do protótipo.

Diretrizes de Ícones

Consulte as Diretrizes de Uso da Marca Figma para exibir quaisquer ícones contidos neste repositório.