Design no Figma com Claude Code: o caminho mais curto e gratuito
Configure o MCP do Figma com um único comando, sem editar JSON, e use no seu fluxo de design.
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
Setup Interativo: Figma MCP + Claude Code
Siga os passos abaixo para configurar sua ponte bidirecional. Clique em "Próximo" ao concluir cada etapa.
Antes de começarmos, é importante destacar que esse processo funciona somente com o Claude Desktop (e consequentemente, o Figma Desktop). A versão online não permite conexão local.
- Claude Desktop: Onde você vai rodar a IA.
- Figma Desktop: Onde os arquivos de design serão editados.
- Node.js (18+): O motor que fará a ponte funcionar nos bastidores. Se não tiver certeza se você tem isso no computador, baixe e instale a versão "LTS" recomendada no site oficial do Node.js.
Como testar se já instalou:
node -v
Cole no seu Terminal. Se responder algo como
v18.x.xou maior, você está pronto!
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.