Design no Figma com Claude Code: o caminho mais curto e gratuito - Thiago Xikota

A maioria dos tutoriais sobre AI no design pede que você abra claude_desktop_config.json, edite à mão e reinicie o app. Designer não tem por que aprender a editar JSON pra desbloquear isso.

Esse aqui usa o Claude Code, que tem CLI nativa pra adicionar servidores MCP. Resultado: um comando, copia e cola, conexão pronta. O resto do trabalho fica entre você, seus arquivos no Figma e os prompts.

O que você vai conseguir

Ler dados do seu arquivo Figma direto do terminal: páginas, componentes, variáveis, estilos
Criar e modificar nodes via prompt: frames, textos, instâncias
Auditar design tokens sem instalar plugin de terceiros

Pré-requisitos

Três coisas. Cada uma com link oficial e o motivo de estar na lista.

Claude Code instalado. docs.claude.com/claude-code. É a CLI que vai falar com o Figma. Confira a versão com claude --version.
Figma Desktop. figma.com/downloads. O servidor MCP conversa com o app via plugin local. Versão web não serve.
Node.js 18 ou superior. nodejs.org. É o runtime do servidor MCP. Confira com node --version.

Se travar em qualquer um, resolve antes de seguir.

Passo 1: gerar o token Figma

Abre Manage personal access tokens no help do Figma.
Clica em "Generate new token".
Descrição: Figma Console MCP (ou o que você quiser lembrar depois).
Escopos mínimos: File content (Read), Variables (Read), Comments (Read and write).
Copia o token. Começa com figd_. Você vê uma vez só. Salva agora num gerenciador de senhas.

Por que escopos mínimos? Token vazado vira problema. Não dá "All scopes" se o que você vai fazer é leitura de design e edição de comentários.

Passo 2: instalar o Claude Code

Se ainda não tem instalado:

npm install -g @anthropic-ai/claude-code

Depois, abre um terminal novo e roda:

claude --version

Se aparecer um número (algo como 2.1.x), está OK.

Passo 3: conectar o Figma com um único comando

Cola esse comando no terminal, troca figd_SEU_TOKEN_AQUI pelo token do Passo 1:

claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_SEU_TOKEN_AQUI -e ENABLE_MCP_APPS=true -- npx -y figma-console-mcp@latest

O que cada parte faz:

claude mcp add figma-console: registra um servidor MCP chamado figma-console.
-s user: instala no escopo do seu usuário, vale pra todo projeto sem precisar repetir.
-e FIGMA_ACCESS_TOKEN=...: passa o token como variável de ambiente.
-e ENABLE_MCP_APPS=true: liga o modo de criação e edição. Sem essa flag, só leitura.
-- npx -y figma-console-mcp@latest: o -- separa os argumentos do claude dos argumentos do servidor. O npx baixa e roda a versão atual do figma-console-mcp.

Confere com:

claude mcp list

Se o figma-console aparece marcado como Connected, o registro funcionou.

Passo 4: importar o plugin Figma Desktop Bridge

Antes de importar, garante que o pacote já criou o diretório do plugin. Roda:

npx figma-console-mcp@latest --print-path

Esse comando imprime o caminho do manifest.json e cria o diretório se ainda não existe. Em mac, é /Users/SEU_USUARIO/.figma-console-mcp/plugin/manifest.json.

Agora no Figma:

Abre o Figma Desktop.
Abre qualquer arquivo (de teste ou real).
Vai em Plugins → Development → Import plugin from manifest....
Escolhe o manifest.json no caminho que o --print-path mostrou.
Roda o plugin pelo menu Plugins → Development → Figma Desktop Bridge.

Deixa o plugin aberto enquanto você usa o Claude Code. Se fechar, a conexão cai.

Passo 5: validar

No terminal, abre o Claude Code com claude e digita:

Figma status

Quando está tudo conectado, a resposta menciona transporte WebSocket ativo, token válido e os escopos disponíveis. Se o Claude responde com busca na web em vez de dados do Figma, ou diz que nenhum plugin está conectado, é sinal pra voltar pro Passo 4 e checar se o plugin está rodando no arquivo aberto.

(Esse passo é o que eu recomendo capturar você mesmo num screenshot na primeira vez. O output exato muda entre versões.)

Três prompts pra começar

Cola um por vez no Claude Code, com o plugin do Figma rodando no arquivo de teste:

1. Mapear páginas. "Lista as páginas do arquivo Figma aberto." Volta a árvore de páginas no nome exato que aparece na sidebar.

2. Auditar cores em textos. "Quais cores únicas estão sendo usadas em textos da página atual? Lista por hex." Bom pra encontrar drift de design tokens em arquivos antigos.

3. Criar um frame. "Cria uma nova página chamada Sandbox e adiciona um frame de 1440 por 900 pixels com fundo #0F0F12." Confirma que a permissão de escrita está ligada pela flag ENABLE_MCP_APPS=true do Passo 3.

Troubleshooting

O Claude respondeu com busca na web em vez de dados do Figma. O plugin não está aberto, ou o Figma está em outro arquivo. Volta pro Figma Desktop, abre o arquivo, roda Plugins → Development → Figma Desktop Bridge.

command not found: claude. Claude Code não está instalado, ou o npm global não está no PATH. Roda npm install -g @anthropic-ai/claude-code, abre um terminal novo, tenta de novo.

Figma status retorna erro de auth. O token está errado, vencido ou com escopos restritos demais. Volta no Manage personal access tokens, gera outro com File content (Read), Variables (Read) e Comments (Read and write). Atualiza com:

claude mcp remove figma-console
claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_NOVO_TOKEN -e ENABLE_MCP_APPS=true -- npx -y figma-console-mcp@latest

Não acho manifest.json. Roda npx figma-console-mcp@latest --print-path. Ele imprime o caminho exato e cria o diretório se ainda não existe.

Próximos passos

Esse setup é a base. O que você faz com ele depende do seu fluxo: auditoria de design system, geração assistida de variantes, documentação de componentes. A documentação oficial do figma-console-mcp cobre os 94+ tools disponíveis.

E se você está chegando aqui pelo livro: Design na Era da IA é onde discuto critério, ética e fluxo no dia a dia.