Claude MCP + Figma: Integração Design-to-Code Passo a Passo (2026)

O Model Context Protocol (MCP) é o padrão aberto que permite o Claude ler e interagir com sistemas externos — e o Figma MCP é a ponte que conecta seus arquivos Figma diretamente ao Claude Code, Claude.ai ou qualquer cliente compatível. Este guia passo a passo cobre o setup, os casos de uso que realmente mudam produtividade e as armadilhas que ninguém conta.

O Que É MCP

MCP é um protocolo aberto lançado pela Anthropic que permite modelos de IA se conectarem a fontes de dados e ferramentas externas de forma padronizada. Documentação completa em modelcontextprotocol.io. Em termos práticos: você instala um MCP server, autoriza acesso, e o Claude ganha a habilidade de ler/escrever naquele sistema.

O Que O Figma MCP Permite

• Ler arquivos Figma: componentes, frames, tokens, estilos
• Extrair código: snippets React, SVG, HTML de elementos específicos
• Consultar bibliotecas: componentes de design system, variants, props mapeadas
• Integrar Code Connect: mapear componentes Figma → componentes do seu codebase
• Gerar diagramas em FigJam: fluxogramas, arquitetura, jornadas

Pré-requisitos

1. Claude Code instalado (recomendado) ou Claude.ai com suporte a MCP ativo
2. Plano Figma Professional ou superior
3. Personal Access Token do Figma — gere em figma.com/settings

Passo 1: Instalar O Figma MCP Server

No terminal, dentro do projeto onde você quer usar:

claude mcp add figma

O Claude Code guia o fluxo: pede o token do Figma, valida a conexão, armazena local. Alternativamente, o setup manual edita ~/.claude/mcp.json incluindo o server Figma com config apropriada.

Passo 2: Verificar Conexão

Abra o Claude Code no projeto e peça:

"Liste as ferramentas MCP ativas e me mostre os 3 primeiros arquivos Figma que eu tenho acesso."

Se o Claude listar corretamente, setup está ok. Se der erro de autenticação, verifique o token em figma.com/settings e certifique-se de que tem escopo de leitura de arquivos.

Passo 3: Casos De Uso Práticos

Caso 1: Extrair Componente Como React

No Figma, copie a URL de um frame. No Claude Code:

"Leia este frame do Figma: [URL]. Crie componente React em src/components/, tipado, com Tailwind, respeitando tokens do meu tailwind.config.ts."

Caso 2: Auditar Design System

"Leia o arquivo Figma [URL do arquivo de design system]. Liste todos os componentes e identifique: (1) quais têm variants inconsistentes, (2) quais não têm states documentados, (3) quais usam cores hardcoded em vez de variables."

Caso 3: Gerar Storybook A Partir Do Figma

"Para cada componente da página 'UI' do arquivo [URL], crie um .stories.tsx correspondente com stories para cada variant e state visíveis no frame."

Caso 4: Mapear Figma ↔ Codebase (Code Connect)

O MCP inclui ferramentas específicas para Code Connect: mapeie o componente Button do Figma ao Button do seu repositório para que toda geração futura use automaticamente o componente correto.

"Crie Code Connect mapping entre o Button do Figma [URL] e meu ButtonPrimary em src/components/ButtonPrimary.tsx."

Caso 5: Diagramas No FigJam

"Gere um fluxograma no FigJam descrevendo o fluxo de checkout deste sistema [descreva o fluxo]. Inclua decision points, states de erro e integração com gateway."

MCP vs Figma Make vs Claude Artifacts

Ferramenta	Onde Roda	Melhor Para
Claude MCP + Figma	Claude Code / Claude.ai	Dev sério com codebase existente
Figma Make	Figma Web	Designer criando protótipo visual
Claude Artifacts	Claude.ai	Prototipagem rápida standalone

Não são concorrentes — são ferramentas especializadas. Equipes maduras usam as três para momentos diferentes do fluxo.

Armadilhas Comuns

• Token sem escopo suficiente: gere Personal Access Token com File Content (read) e Library Content se for usar Code Connect
• Arquivo Figma privado: o token precisa ter acesso via workspace/team. Arquivos de outros workspaces retornam 403
• Nodes inexistentes: URLs de frames antigos ou deletados dão erro. Sempre copie URL atual
• Limites de API: MCP usa a API do Figma, que tem rate limit. Batch muito grande pode travar — quebre em chunks

Segurança E Governança

• O token fica local na sua máquina (claude config)
• Revogue o token em figma.com/settings se compartilhar máquina
• Em equipe, prefira tokens de conta "de máquina" (bot) em vez de tokens pessoais para rotação mais simples
• Auditoria: a API do Figma registra cada leitura — bom para compliance em empresas reguladas

Workflow De Produção (Recomendado)

1. Design aprovado no Figma
2. Design tokens exportados via Figma Variables
3. Claude Code lê tokens e atualiza tailwind.config + CSS variables no repo
4. Claude Code lê cada componente aprovado e gera/atualiza .tsx correspondente
5. Pipeline CI roda testes visuais (Chromatic, Percy)
6. PR aberto automaticamente para revisão humana

Latência típica do Figma ao PR: 5-15 minutos, dependendo do tamanho do batch.

Custo

MCP em si é gratuito (protocolo aberto). O custo é o plano Claude (US\$ 20+/mês) + plano Figma (US\$ 15/mês Professional). Stack completo: US\$ 35/mês por designer/dev. Comparado ao ganho de produtividade, o payback é trivial.

Próximos Passos

Implementar MCP bem é trabalho de 1-2 dias para setup e documentação interna. O retorno aparece já no primeiro sprint. Nossos projetos de web design e automação com IA incluem setup de MCP, Code Connect e pipeline CI/CD completo — fale com a gente.

Perguntas Frequentes

MCP funciona com outras ferramentas além do Figma?

Sim. MCP é protocolo aberto com servers para Slack, GitHub, Notion, Linear, Supabase, Postgres, Google Drive, ClickUp e muitos outros. Lista mantida em modelcontextprotocol.io/servers.

Posso usar MCP sem o Claude Code?

Sim. MCP é cliente-agnóstico. Roda em Claude Code, Claude.ai (com suporte ativado), Cursor, Continue e outros IDEs com cliente MCP. A experiência é um pouco diferente em cada cliente, mas a capacidade é a mesma.

Qual a diferença entre MCP e plugin de Figma?

Plugin do Figma roda dentro do editor Figma, acessível só durante edição visual. MCP roda no seu ambiente de desenvolvimento (ou chat Claude), conectando Figma a workflows mais amplos (codebase, PRs, CI). Casos de uso complementares.