Entrar Ainda não tem acesso?

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

1
resposta

[Sugestão] Integração Claude Code + Figma via MCP utilizando plugin Desktop Bridge

Referente ao curso Engenharia de software na era da IA: como usar IA no fluxo real de desenvolvimento, no capítulo Front-end com IA e atividade Para saber mais: por que o MCP do Figma precisa de plugin

por RAFAELA KELLER ARAUJO DOS SANTOS
| 1.8k xp | 4 posts
Analista em Desenvolvimento de Sistemas

Integração Claude Code + Figma via MCP

Pré-requisitos

  • Claude Code instalado (claude --version para confirmar)
  • Figma Desktop
  • Node.js 18+ instalado (node --version)
  • Token de acesso do Figma

Configuração

Passo 1 — Gerar o token no Figma

  1. Acesse figma.com e faça login
  2. Clique no avatar (canto superior esquerdo) → Settings
  3. Aba Security → Personal access tokens
  4. Clique em Generate new token, dê um nome e copie o token gerado
  5. Guarde o token — ele só aparece uma vez
  6. Link para documentação

Passo 2 — Instalar o plugin Desktop Bridge no Figma

Pré-requisitos

  • Figma Desktop instalado
  • Acesso a um projeto com plugins habilitados
    • Importante: use um Draft (rascunho pessoal), pois é onde há permissão para instalar plugins de desenvolvimento

2.1 — Baixar o plugin

Acesse o repositório e baixe o arquivo figma-console-mcp.zip:

https://github.com/southleft/figma-console-mcp

Extraia o .zip em um local de fácil acesso.

2.2 — Abrir um projeto no Figma Desktop

Abra o Figma Desktop e acesse um Draft (seus rascunhos pessoais).

2.3 — Importar o plugin

No menu superior do Figma, acesse:

Plugins → Development → Import plugin from manifest…

2.4 — Selecionar o manifest

Na janela que abrir, navegue até a pasta extraída e selecione o arquivo:

figma-console-mcp-main/figma-desktop-bridge/manifest.json

Após a importação, o plugin Desktop Bridge estará disponível em Plugins → Development e poderá ser executado para estabelecer a conexão com o Claude.

Passo 3 — Registrar o MCP no Claude Code

Abra o terminal bash e rode:

claude mcp add figma-console \ -e FIGMA_ACCESS_TOKEN=seu_token_aqui \ -e ENABLE_MCP_APPS=true \ -- npx -y figma-console-mcp@latest

Substitua seu_token_aqui pelo token gerado no Passo 1.

Isso grava a configuração globalmente para o seu usuário.

Passo 4 — Verificar se foi registrado

claude mcp list

Deve aparecer algo como:

figma-console: npx -y figma-console-mcp@latest - ✓ Connected

Passo 5 — Testar a conexão

Inicie uma nova sessão do Claude Code. No VSCode:

Ctrl + Shift + P → Reload Window

Dentro da nova sessão, pergunte algo como:

check figma status

ou até:

Liste os componentes do arquivo Figma com ID: <seu-file-id>

O ID do arquivo fica na URL do Figma:

figma.com/file/**ABC123xyz**/Nome-do-Arquivo

1 resposta
por Monalisa Meyrelle de Sousa Silva
| 4235k xp | 9785 posts
Alura Scuba Team

Olá, Rafaela! Como vai?

Agradeço por compartilhar esse guia detalhado sobre a integração Claude Code com o Figma via MCP utilizando o plugin Desktop Bridge. Esse tipo de contribuição é muito valioso para a comunidade.

Você organizou os pré-requisitos e os passos de configuração de forma bastante didática, cobrindo desde a geração do token de acesso no Figma até o teste da conexão com o Claude Code. A atenção ao detalhe de usar um Draft pessoal para instalar o plugin de desenvolvimento é um ponto importante que muita gente acaba ignorando e que pode causar frustração durante o processo. Da mesma forma, a instrução para importar o manifest correto da pasta extraída do figma-console-mcp deixa o caminho muito mais claro para quem está seguindo o passo a passo pela primeira vez.

A dica de verificar o status com o comando claude mcp list antes de testar a conexão também demonstra uma preocupação com boas práticas, algo que faz diferença na hora de identificar problemas de configuração mais cedo.

Continue contribuindo com esse nível de qualidade, pois o fórum se fortalece com experiências reais como a sua.

Você chegou a encontrar algum erro ou comportamento inesperado durante algum dos passos da configuração, e se sim, como resolveu? Com certeza ajudará outros alunos!

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA