Figma Context MCP — Casos de uso, Instalar & Demo ao vivo

Por que usar

Principais recursos

Retorna dados do Figma em uma forma YAML/JSON eficiente em tokens, não o monstro da API bruta
Resolve instâncias de componentes e suas substituições
Expõe tokens de design (cores, estilos de texto, espaçamento) pelo nome
Exportação de imagem de nós selecionados para referência visual
Somente leitura — nunca escreve novamente no seu arquivo do Figma

Demo ao vivo

Como fica na prática

figma.replay ▶ pronto

0/0

Instalar

Escolha seu cliente

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Cursor usa o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Clique no ícone MCP Servers na barra lateral do Cline, depois "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "figma",
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  ]
}

O Continue usa um array de objetos de servidor em vez de um map.

~/.config/zed/settings.json

{
  "context_servers": {
    "figma": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "figma-developer-mcp"
        ]
      }
    }
  }
}

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

claude mcp add figma -- npx -y figma-developer-mcp

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

Casos de uso

Usos do mundo real: Figma Context

Gerar código React/SwiftUI/Tailwind a partir de um frame do Figma

👤 Desenvolvedores frontend implementando uma tela projetada ⏱ ~30 min intermediate

Quando usar: Você tem um frame do Figma para uma tela/componente e quer que os primeiros 80% do código sejam gerados fielmente.

Pré-requisitos

Token de acesso pessoal do Figma — figma.com → Configurações → Tokens de acesso pessoal; escopo para file_read
URL do arquivo Figma — Copie a URL do arquivo Figma; o MCP pode extrair a chave do arquivo e o id do nó

Fluxo

Extrair os dados do frame

Obtenha o nó do Figma em <colar URL do Figma com node-id>. Retorne seu layout, conteúdo de texto, cores e estrutura filha.✓ Copiado

→ Dados do nó hierárquico com valores reais — não 'incapaz de buscar'
Gerar código fundamentado nos dados

Gere um componente React + Tailwind que corresponda exatamente a isto. Use as cores hex reais e valores de pixel dos dados do Figma, não aproximações.✓ Copiado

→ Código que referencia valores reais, por exemplo bg-[#1A2B3C] não bg-blue-500
Verificação cruzada com uma exportação

Exporte o mesmo frame como PNG. Compare com a renderização esperada do seu componente gerado e destaque quaisquer diferenças.✓ Copiado

→ Diffs específicos (ícone ausente, preenchimento incorreto) em vez de 'parece semelhante'

Resultado: Um primeiro esboço fiel aos pixels que você pode refinar em vez de reconstruir.

Armadilhas

Auto-layout vs posicionamento absoluto mapeia diferentemente para flex/grid — Diga ao Claude para preferir flexbox quando o frame do Figma usa auto-layout; absoluto quando não usa
Ícones vetoriais voltam como caminhos SVG que Claude insere literalmente — Peça para extrair ícones separadamente para /icons/*.svg e referenciá-los como componentes

Combine com: filesystem · github

Sincronizar tokens de design do Figma para seu código

👤 Mantenedores do sistema de design ⏱ ~20 min intermediate

Quando usar: Designers atualizaram paleta/tipografia no Figma e você precisa que o JSON do token seja atualizado para corresponder.

Fluxo

Extrair os estilos publicados

Do arquivo Figma <chave>, liste todos os estilos de cor publicados, estilos de texto e estilos de efeito. Agrupe por categoria.✓ Copiado

→ Lista completa de tokens com nomes e valores
Diferenciar contra o código

Leia /design-tokens/tokens.json. Mostre-me quais tokens mudaram no Figma desde a última sincronização deste arquivo (adicionado, removido, valor alterado).✓ Copiado

→ Diff por token com antigo/novo
Aplicar e abrir PR

Atualize tokens.json para corresponder ao Figma. Abra um PR intitulado 'sync: design tokens YYYY-MM-DD' com o diff na descrição.✓ Copiado

→ PR aberto com diff revisável

Resultado: Tokens do lado do código permanecem em sincronia com Figma; sem mais tickets de 'por que a cor da marca está ligeiramente diferente'.

Armadilhas

Tokens renomeados parecem delete+add — Peça ao Claude para detectar renomeação heuristicamente (mesmo valor, nome semelhante) e destacar para revisão humana

Combine com: filesystem · github

Extrair especificações de desenvolvimento (espaçamento, tamanho, conteúdo) de um arquivo Figma

👤 Engenheiros triando um handoff do Figma sem Dev Mode ⏱ ~15 min beginner

Quando usar: Você não tem Figma Dev Mode mas precisa de especificações de pixel para uma tela.

Fluxo

Obter a tela

Para o nó Figma <id>, me dê uma lista simples de cada elemento folha com sua posição absoluta, tamanho e qualquer conteúdo de texto.✓ Copiado

→ Despejo tabular de elementos com x/y/l/a
Pedir um documento de especificação

Transforme isso em uma especificação voltada para desenvolvedores: seção por seção, com valores de espaçamento (margem/preenchimento) inferidos das posições.✓ Copiado

→ Documento de especificação com valores equivalentes a CSS concretos
Verificar casos extremos

O que acontece quando um texto excede a largura projetada? O design especifica comportamento de quebra, truncamento ou crescimento? Se não especificado, sinalize para o designer.✓ Copiado

→ Lista de perguntas abertas, não suposições silenciosas

Resultado: Uma especificação construível sem comprar uma licença Dev Mode para todos.

Armadilhas

Designer usou espaçamento arbitrário (13px, 17px) em vez de valores de token — Peça ao Claude para arredondar para o valor de token mais próximo, mas registre o desvio, para que os designers possam limpar

Combine com: filesystem

Combinações

Combine com outros MCPs para 10× de alavancagem

figma + filesystem

Gere código a partir do Figma e escreva-o diretamente no seu arquivo de componente

Extraia o nó Figma <id>. Gere um componente React correspondendo exatamente, escreva-o para src/components/Card.tsx usando filesystem MCP.✓ Copiado

figma + github

Abra um PR com o novo componente mais um link do Figma na descrição para revisores

Gere o componente Card a partir do Figma <url>, commit, push e abra um PR com a alteração de código e o link do Figma de origem.✓ Copiado

figma + chrome-devtools

Construa, renderize no navegador, faça uma captura de tela e compare visualmente contra a exportação do Figma

Construa o novo componente. Renderize-o em localhost:3000/preview/card. Faça uma captura de tela. Compare visualmente contra a exportação PNG do Figma e liste quaisquer diferenças visuais.✓ Copiado

Ferramentas

O que este MCP expõe

Ferramenta	Entradas	Quando chamar	Custo
get_figma_data	fileKey: str, nodeId?: str, depth?: int	Extraia um frame ou arquivo inteiro em forma amigável ao agente	1 chamada da API Figma (camada gratuita: 1500/min)
download_figma_images	fileKey: str, nodes: [{nodeId, fileName}], localPath: str, format?: 'png'\|'svg', scale?: number	Exporte ativos de design (ícones, ilustrações, capturas de tela) localmente	1 chamada de renderização Figma por nó

Custo e limites

O que custa rodar

Cota de API: Plano gratuito do Figma: 1.500 requisições/min. Bastante para uso interativo.
Tokens por chamada: O modo compacto mantém payloads em ~1-5k tokens por frame. Arquivos completos podem inchar — restrinja por nodeId.
Monetário: MCP é gratuito. O acesso à API Figma é gratuito com qualquer conta Figma.
Dica: Sempre passe um nodeId quando puder — buscar um arquivo inteiro é desperdiçador.

Segurança

Permissões, segredos, alcance

Escopos mínimos: file_read

Armazenamento de credenciais: Token de acesso pessoal na variável de ambiente FIGMA_API_KEY. Nunca faça commit.

Saída de dados: Todas as chamadas para api.figma.com

Nunca conceda: file_write — o MCP não precisa disso; usar um token capaz de escrita arriscará edições acidentais

Tokens de acesso pessoal são poderosos — use um token com escopo somente leitura e rotacione periodicamente.
Conteúdo do arquivo Figma (seus designs) é enviado para seu provedor de LLM como contexto. Se o arquivo for sensível, prefira buscas com escopo de nó sobre arquivo inteiro.

Solução de problemas

Erros comuns e correções

403 Proibido

O token não tem acesso a esse arquivo. Verifique se o arquivo está em um time/espaço de trabalho que seu token pode ver. Para arquivos da comunidade compartilhados, use um token diferente.

Verificar: curl -H 'X-Figma-Token: $FIGMA_API_KEY' https://api.figma.com/v1/me

Não foi possível extrair a chave do arquivo da URL

Use o formato https://www.figma.com/file/<KEY>/... ou https://www.figma.com/design/<KEY>/.... Passe fileKey explicitamente se o parsing da URL falhar.

A resposta é enorme e estoura o contexto

Passe nodeId para escopear para um frame, ou depth: 2 para limitar a travessia.

A exportação de imagem falha com 'tipo de nó não suportado'

Alguns tipos de nó (seções, fatias) não podem ser exportados. Selecione um frame ou componente real em vez disso.

Alternativas

Figma Context vs. outros

Alternativa	Quando usar	Troca
Figma official Dev Mode MCP (beta)	Você tem Figma Dev Mode e quer a integração oficial	Mais novo, requer assinatura Dev Mode; suporte a recursos Figma mais profundo ao longo do tempo
Figma REST API directly via shell	Você quer a superfície completa da API (variáveis, branches, comentários)	As respostas da API bruta são enormes e difíceis para um LLM digerir

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills