Design no Figma com Claude: setup guiado (Desktop ou terminal)
Conecte o Figma ao Claude por MCP e peça auditorias de tokens, frames e variantes por prompt. Setup guiado em 5 passos, com checklist de validação em cada um.
Peça em português e o Claude cria frames, lê seus componentes e aponta variáveis de cor sem uso, direto no seu arquivo do Figma. Este guia liga essa ponte na sua máquina, em 5 passos curtos com checklist de validação em cada um.
A ponte tem duas peças: o MCP (Model Context Protocol), um canal local que deixa o Claude conversar com o Figma Desktop, e um plugin leve, o plugin bridge, que você importa no Figma no passo 4. Por ser local, funciona no app Claude Desktop ou no Claude Code (o Claude no terminal); a versão claude.ai no navegador não serve. Você não precisa ser dev: cada comando vem pronto pra copiar, e o guia escolhe os comandos certos pro seu sistema.
Antes de começar #
- Figma Desktop (o app instalado, não o navegador)
- Node.js 18 ou maior (o passo 1 mostra onde baixar)
- Um cliente do Claude: Claude Desktop funciona em qualquer plano, inclusive o gratuito. Claude Code (terminal) pede plano pago (Pro, Max ou Team)
- Permissão pra instalar programas na sua máquina (em notebook de empresa, pode precisar do time de TI)
- Uns 20 minutos. Faz uma vez só; depois é abrir e usar
O que você vai conseguir #
- Auditar design tokens por prompt: "quais variáveis de cor não estão sendo usadas?"
- Criar e modificar frames, textos e instâncias conversando com o Claude
- Fazer tudo isso com um único plugin, a ponte do passo 4, em vez de um plugin novo pra cada tarefa
Setup guiado
Figma MCP + Claude em 5 passos
O MCP (Model Context Protocol) é o canal que deixa o Claude ler e mexer no seu Figma. Você liga esse canal uma vez, em uns 20 minutos, e ele fica pronto. Funciona no app Claude Desktop ou no Claude Code (terminal). Comece escolhendo o seu cliente; seu progresso fica salvo neste navegador.
Como você usa o Claude?
claude.ai no navegador não conecta.Seu sistema operacional
Resumo rápido em 5 linhas · Claude Desktop
- Instale Node.js 18 ou maior, Figma Desktop e Claude Desktop.
- Gere token no Figma (começa com figd_).
- No Claude Desktop: Settings → Developer → Edit Config.
- Cole o JSON MCP, salve e feche e reabra o Claude Desktop por completo.
- No Figma, importe o plugin bridge e rode o prompt de status.
Passos
Passo 1 de 5 · ~5 min
Instalar o que precisa
Baixe Node.js, Figma Desktop e Claude Desktop.
Os 2 apps que todo mundo precisa
E o cliente: Claude Desktop
Esse caminho funciona em qualquer plano do Claude, inclusive o gratuito (com limites de uso menores).
Sua empresa bloqueia instalar o app? Volte em Como você usa o Claude? lá em cima e escolha Claude Code (terminal). Faz a mesma coisa, sem instalar app.
Validação no terminal
Só rode depois de instalar o Node.js. A versão precisa ser 18 ou maior.
No terminal
node -v
No terminal
npx -v
Validação. Marque o que você já vê
Próximos passos #
Terminou o setup? Abra um arquivo seu de verdade e peça: "Liste as variáveis de cor que não estão sendo usadas neste arquivo". É o primeiro caso real em que a ponte se paga.
Depois disso, o que você faz com ela 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 mais de 100 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.
Continue lendo
Vocabulário de frontend para designers
134 termos de CSS, layout, acessibilidade e rendering organizados por camada do problema, com exemplos de prompt pra dirigir agentes de código.
Ferramentas de IA para designers
Catálogo de ferramentas que designer usa hoje pra trabalhar com IA, com filtro por categoria, busca e opinião.