Xikota.ai
Entrar Conhecer a mentoriaMentoria

Recursos

Tutorial Em destaque 10 min de leitura

Figma com Claude: MCP oficial remoto e opção local

Conecte o Claude ao MCP remoto oficial do Figma em 5 passos, sem PAT, Node.js ou plugin bridge. A rota Desktop oficial fica como alternativa para casos específicos.

O Figma recomenda o MCP remoto oficial. Ele conecta o Claude ao endpoint hospedado pelo próprio Figma, usa autorização da sua conta e dispensa token pessoal, Node.js e plugin bridge.

O servidor remoto está disponível em todos os planos e tipos de licença do Figma, com limites de uso diferentes. No Claude, você pode usar o conector no navegador ou no Desktop. No Claude Code, a instalação oficial inclui o servidor MCP e instruções para os fluxos mais comuns.

Fluxo oficial e links críticos verificados em 13 de agosto de 2026. O Figma ainda trata a escrita direta no canvas como beta e informa que ela poderá virar um recurso pago por uso.

Antes de começar

  • Uma conta do Figma com acesso de visualização ou edição ao arquivo.
  • Claude no navegador, Claude Desktop ou Claude Code.
  • Permissão da sua organização para instalar conectores ou plugins, quando houver bloqueio administrativo.

O que você vai conseguir

  • Ler componentes, variáveis, Auto Layout e contexto de um frame a partir do link.
  • Gerar código com o design e o Code Connect como referência.
  • Criar ou modificar conteúdo nativo no Figma pelos clientes compatíveis. Esse recurso usa o MCP remoto e está em beta.

Setup guiado

MCP oficial do Figma em 5 passos

Escolha onde usa o Claude. O fluxo remoto funciona sem Figma Desktop, PAT ou pacote de terceiros; seu progresso fica salvo neste navegador.

Onde você usa o Claude?

Rota recomendada pelo Figma. O endpoint é https://mcp.figma.com/mcp. A autorização acontece na página do Figma, sem colar credenciais no chat ou em arquivo de configuração.

Passos

Passo 1 de 5

Confirmar acesso

Abra o arquivo e confirme que sua conta pode visualizá-lo.

O MCP remoto funciona em todos os planos e tipos de licença do Figma. Os limites variam conforme plano, licença e uso. Arquivos de outra pessoa precisam estar compartilhados com a conta que você vai autorizar.

Abrir o guia oficial do Figma MCP (abre em nova aba)

Validação

Claude ou Claude Desktop

Passo 2 de 5

Conectar o Figma

Use o conector remoto. Ele também fica disponível no navegador.

  1. No Claude, abra Customize → Connectors.
  2. Procure Figma e clique em Connect.
  3. Se o conector não aparecer no diretório, escolha Add custom connector e informe https://mcp.figma.com/mcp.
  4. Entre no Figma e revise as permissões antes de autorizar.

Conectores MCP remotos estão disponíveis nos planos Free, Pro, Max, Team e Enterprise do Claude. No plano Free, a Anthropic limita a conta a um conector personalizado.

Ver instruções oficiais do Claude (abre em nova aba)

Validação

Claude Code

Passo 2 de 5

Instalar o plugin oficial

O plugin instala o MCP remoto e as instruções de trabalho mantidas para Claude Code.

No terminal, rode:

No terminal
claude plugin install figma@claude-plugins-official
  1. Reinicie o Claude Code se ele já estava aberto.
  2. Rode /plugin e abra a aba Installed.
  3. Selecione figma, inicie a autorização e permita o acesso na página que abrir.
  4. Volte ao terminal e confirme que o servidor aparece conectado.

Se a instalação for bloqueada, sua organização pode ter desativado plugins. Peça liberação ao administrador; não contorne a política com um pacote comunitário.

Ver o passo a passo oficial do Figma para Claude Code (abre em nova aba)

Validação

Passo 3 de 5

Copiar o link do recorte

O MCP remoto usa o link para saber qual arquivo, frame ou camada deve ler.

  1. No Figma, selecione uma camada ou um frame.
  2. Clique com o botão direito e escolha Copy link to selection.
  3. Para usar o arquivo inteiro, copie a URL sem manter uma camada selecionada.

Validação

Passo 4 de 5

Pedir contexto

Cole o link no Claude e diga qual decisão precisa tomar.

Prompt no Claude
Leia este frame do Figma: [cole o link]

Liste os componentes, variáveis e regras de Auto Layout que preciso preservar na implementação. Separe o que veio do arquivo do que é recomendação sua.

Para criar ou atualizar conteúdo nativo, peça a mudança e revise o resultado no canvas. A escrita direta depende do MCP remoto, está em beta e pode ter limites conforme o cliente e o plano.

Validação

Passo 5 de 5

Validar antes de confiar

Uma conexão ativa não prova que a leitura ou a alteração está correta.

  • Compare nomes de componentes e valores de variáveis com o painel do Figma.
  • Confirme que o Claude usou o node-id do recorte pedido.
  • Se houve escrita no canvas, revise estrutura, Auto Layout, variantes e conteúdo antes de publicar.
Algo travou? Diagnóstico rápido
  • O servidor não aparece

    Desconecte e conecte o Figma novamente. No Claude Code, reinicie o processo e confira a aba Installed de /plugin.

  • O arquivo não abre

    Confirme que o arquivo foi compartilhado com a mesma conta autorizada no conector.

  • O Claude leu o frame errado

    Copie novamente o link com a camada selecionada e confira se a URL contém node-id.

  • A organização bloqueou o conector

    Peça ao administrador para autorizar o Figma. Não use PAT ou pacote de terceiros para contornar a política.

Validação final

Conectado e conferido. Agora use o link do Figma como contexto explícito em cada tarefa.

Quando a rota local faz sentido

O Figma mantém um servidor MCP no app Desktop para casos específicos de organizações e empresas. Ele exige Figma Desktop e uma licença Dev ou Full em plano pago. O servidor remoto continua sendo a recomendação oficial e tem o conjunto mais amplo de recursos.

  1. No Figma Desktop, abra um arquivo e ative o Dev Mode.
  2. No painel direito, habilite o servidor MCP e copie a URL exibida.
  3. No Claude Code, registre o endpoint local:
No terminal
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

Essa alternativa oficial não pede PAT, Node.js nem plugin bridge. Use-a quando sua organização exigir o servidor Desktop. Para escrita direta no canvas e o conjunto mais amplo de recursos, volte ao MCP remoto.

Ver a configuração Desktop oficial (abre em nova aba)

Próximos passos

Comece por um frame pequeno e uma pergunta verificável. Depois, avance para auditoria de design system, implementação com Code Connect ou edição assistida no canvas.

A documentação oficial do Figma MCP mantém a lista atual de clientes, recursos e limites.

#Figma#Claude Desktop#Claude Code#MCP#Tutorial

Continue lendo

Ver todos os recursos →

Depois de aplicar isso

Se quiser fazer no seu caso, com alguém olhando junto, a mentoria 1:1 é individual e trabalha em cima do seu material. Se preferir seguir sozinho, o handbook e os sete métodos são abertos.

Conhecer a mentoria Ler o handbook