Usando o Claude Code pra criar interface no Figma

Vou começar pelo passo a passo pra quem estiver afim de testa — porque funciona de verdade, e ignorar isso seria desonesto.

Pra começo de conversa, é interessante conhecer um pouco de código — vou julgar que você sabe o básico, assim como eu. Essa mágica só é possível graças ao MCP (Model Context Protocol), é ele que permite que o Claude Code “fale” com ferramentas externas. Atualmente, é possível conectar a vários softwares, mas o foco desse conteúdo é o Figma.

Mas Anna, o Figma Make não cria interfaces e código? Sim, leitora(or) atento. Você pode ficar à vontade pra seguir esse caminho, a diferença aqui é que você vai usar seu terminal e, no final do processo — ai, vou chamar assim mesmo, gente, sempre que falar Claudia, lembre-se que estou falando do Claude Code, voltando — Claudia vai te entregar a interface e um protótipo HTML em uma pasta do seu computador. Já o Figma Make faz tudo no servidor do próprio Figma em React, pra você ter acesso é preciso baixar o código e instalar as dependências necessárias pra rodar no seu computador. Mas aí você faz o que mais te convém. Lembrando que essas funcionalidades estão disponíveis nos planos pagos, tanto do Claude como do Figma — eeeehhh amores… toda mágica tem um preço.

Sem mais delongas, bora pro tutorial.

Primeiro, você precisa ter duas coisas prontas:

• Claude Code configurado e funcionando. Caso ainda não tenha feito isso, nessa página eles mostram o passo a passo de como fazer isso no seu terminal.

• Sua conta no Figma logada (de preferência com acesso ao plano Pro, que é onde a ponte brilha mais).

Sem isso, nada anda.

Ainda no terminal, execute o comando claude. Deve aparecer algo parecido com isso:

Execute o comando abaixo:

claude mcp add --transport http figma-remote-mcp <https://mcp.figma.com/mcp>

Mais informações, veja a documentação do MCP do Claude Code. Que mostra inclusive o comando de outros softwares que conversão com Claudia.

Agora execute o comando para instalar o plugin do Figma.

/plugin install figma@claude-plugin-directory

Então, ainda no terminal, digite o comando /plugin, selecione Installed e clique no plugin do Figma pra autenticá-lo. No final deve ficar como na imagem abaixo:

6. Para mais detalhes, veja a documentação da dona Figma nesse link.

7. Pra garantir, abra seu Figma no Dev Mode e certifique-se de que o módulo MCP esteja ativado. Esse link também mostra como fazer isso

   

8. Pronto, essa é a parte mais chatinha. Terminando aqui, parabéns! Você criou a ponte “Claude Code ↔ Figma”.

Comece pedindo pra Claudia criar o que você tem em mente. Um prompt como esse já é suficiente pra começar:

Crie uma tela de onboarding para um app de bem-estar feminino. Tipografia: Cormorant + DM Sans. Paleta: #24272B, #F7F6F1, #ECDDFE. Tom: editorial, íntimo, premium. Para [insira aqui o link do seu projeto que fica em Compartilhar > Compartilhar link do Dev Mode]

Depois de muitas perguntas, alguns minutos — inclusive aproveite pra beber água, fazer uns alongamentos e passar um creminho na mão enquanto vai clicando em YES — ele vai ter criado o código em HTML em uma pasta e um layout igual será desenhado no Figma cujo link você ofereceu no prompt.

Olha só como criar algo que precisa ser rapidamente validado ficou mais rápido. Entre falhas e erros — porque nem tudo são flores — essas quatro telas ficaram prontas em mais ou menos seis minutos.

O resultado ficou realmente bom! Há alguns meses eu teria torcido o nariz pra qualidade da entrega, mas hoje (março de 2026) dou meu braço de designer há mais de 10 anos a torcer. Enquanto esperava o processo, levantei pra esticar as pernas, fiz uns agachamentos e um carinho na minha gatinha. Podia ter ido fazer um café ou um chá. Mas sabe uma coisa que não fiz? Pensar. E isso me preocupa.

O tempo salvo é real. Mas não consigo evitar de pensar o que acontecia naquelas horas que agora não acontece mais? Eu iria pesquisar referencias, ver soluções semelhantes implementadas, pesquisar comentários de pessoas reais que usaram algo parecido, cometeria erros, faria ajustes, eu estimularia minha mente e alimentaria minha criatividade.

Criatividade não é o resultado. É o processo de chegar lá — com todos os desvios, impasses e descobertas acidentais que esse caminho inclui.

Existe um fenômeno em neuropsicologia cognitiva chamado atrofia por desuso. Quando você para de exercitar uma habilidade, ela deteriora. Vale pra memória, pra coordenação motora, e vale — cada vez mais — pra intuição de design. Dê uma olhada nesse trecho onde o médico, neurocientista e pesquisador Miguel Nicolelis fala sobre o assunto.

O olhar de qualquer profissional que se preze está treinado por um rico arquivo mental que reúne milhares de micro-decisões, erros bem documentados e padrões reconhecidos ao longo de anos. A atrofiação disso me preocupa porque sabemos que nós tendemos a usar atalhos. Estou mentindo? Nada contra otimizar tempo, o problema é quando essa economia mata nosso processo criativo.

Quando você terceiriza “qual espaçamento faz sentido aqui?” repetidamente, você não economiza tempo apenas. Você interrompe o processo que constrói o julgamento estético. E julgamento estético — o que faz uma designer boa se tornar insubstituível — não tem atalho. Entende?

Há quem diga que não há como usar IA de forma ética e saudável. Super entendo essas pessoas e desejo, de todo coração, boa sorte pra elas. Porque dificilmente vamos voltar pra um mundo onde elas serão abolidas pela sociedade. Principalmente sabendo que vivemos em um mundo que coloca lucro na frente de quase tudo. Achar que vai atravessar o mercado de trabalho atual (principalmente se você está na área de tecnologia, marketing e afins) ignorando as ferramentas de IA vai exigir dessa pessoa uma carreira muito, mas muito bem consolidada — dificilmente isso vai se aplicar pra quem tem menos de 20 anos de carreira nas costas.

Nesse exato momento, enquanto reviso este texto, estou usando uma IA pra corrigir meus erros de português, porque tenho dislexia e me sinto muito mais segura colocando meu texto pra revisão. Poderia contratar alguém pra isso, mas no momento estou sem grana. Entende o dilema?

Precisamos encarar o mundo como ele é e não como a gente gostaria que fosse.

Dito isso, a resposta não é “não use”. É “use com consciência do que está trocando”. Use para visualização rápida de uma ideia, não para o produto final que vai para usuários. Ou para apresentações preliminares, onde o cliente precisa ver estrutura antes de você investir tempo refinando.

Mas lembre de priorizar seu toque, sua visão de mundo, que é e sempre será única. Impossível de ser copiada por qualquer IA. Faça com que as decisões estratégicas e criativas sejam suas. Não por romantismo, mas por higiene criativa.

Anteriormente falei que devemos navegar no mundo como ele realmente é e não como gostaríamos que fosse. Nesse caso, esteja a par da ferramenta que você use. Mas lembre-se sempre: ferramentas não desenvolvem intuição e criatividade. Só você pode fazer isso — e só se continuar exercitando. Nenhuma máquina ou tecnologia pode pensar como você.

Por hoje é isso.
Nos vemos em breve.

Com carinho
Anna.