Ilustração 11. O que é necessário para trabalhar
O Claude Code pode ser conectado diretamente ao Figma para criar um sistema de design completo do zero: variáveis, tokens, componentes e telas prontas. Neste guia, analisaremos todo o processo passo a passo — da instalação à tela final de login.
Antes de começar, certifique-se de que você possui:
- Claude Code desktop app — aplicativo com três modos: Chat, Code e Agentic.
- Assinatura ativa do Claude — uma conta gratuita não é adequada para este fluxo de trabalho.
- Conta Figma — com pelo menos um arquivo de trabalho aberto.
- Tempo — 30–45 minutos sem distrações para percorrer o fluxo de trabalho completo.
Este fluxo de trabalho consome os limites de uso do Claude. A montagem de um componente complexo, como um botão com mais de 120 variantes, pode consumir uma parte significativa do seu limite horário. Comece com tarefas mais simples para entender o processo antes de abordar grandes projetos.
O que é necessário para trabalhar — Ilustração 22. Instalando o Claude Code
Acesse claude.ai/download e baixe o Claude Code desktop app para o seu SO (macOS ou Windows).
Após a instalação, o aplicativo solicitará autenticação — faça login com os dados da sua assinatura do Claude. Em seguida, será aberta a interface com três modos:
- Chat — o Claude conversacional padrão.
- Code — para tarefas de escrita de código.
- Agentic — onde ocorre o trabalho principal com o Figma.
Para trabalhar com o Figma, utiliza-se o modo Agentic: é ele que permite ao Claude executar ações autônomas, incluindo o trabalho direto no seu canvas do Figma.
O que é necessário para trabalhar — Ilustração 33. Conectando o Claude ao Figma via MCP
Este é o passo crucial que torna todo o fluxo de trabalho possível. O Claude conecta-se ao Figma através de um servidor MCP (Model Context Protocol).
Ordem de conexão:
- No aplicativo Claude Code, vá para Settings.
- Abra a seção MCP Servers.
- Clique em «Add MCP Server».
- Selecione Figma na lista de integrações disponíveis.
- Autentique-se através da sua conta Figma (fluxo OAuth).
- Após a conexão, o Figma aparecerá na lista de servidores MCP ativos.
Como verificar se tudo está funcionando:
Abra qualquer arquivo do Figma no navegador e faça uma pergunta simples ao Claude:
Se o Claude descrever o conteúdo do seu arquivo — a conexão foi estabelecida. Caso contrário — verifique a configuração do servidor MCP e certifique-se de que o arquivo do Figma esteja aberto.
Antes de começar a trabalhar, crie um arquivo separado no Figma ou uma página destacada dentro de um existente. Isso isola os experimentos dos materiais de produção.
Passo 3 — Criando um sistema completo de variáveis com IA — Ilustração 44. Criando um sistema completo de variáveis com IA
Em vez de criar manualmente dezenas de variáveis de cor, tipografia e espaçamento, o Claude monta toda a arquitetura de tokens por conta própria.
Prompt para criar o sistema de variáveis:
O que o Claude cria como resultado:
O Claude começa a trabalhar autonomamente no arquivo do Figma. Após alguns minutos, o painel Variables exibe:
- Primitive Colors — um conjunto completo de escalas de cores, organizado corretamente por coleções.
- Semantic Colors — todos referenciando corretamente a coleção primitiva (não valores hex hardcoded, mas vínculos reais).
- Tokens de Interface — fundo, texto, ícones e bordas com estados hover e active.
- Sistema Tipográfico — estilos de texto vinculados às variáveis correspondentes.
- Tokens de Dimensão — escalas de espaçamento e raio, prontos para uso.
Os tokens semânticos estão corretamente aliasados aos primitivos — isso significa que alterar uma cor primitiva propaga automaticamente por todo o sistema. É assim que se constrói um sistema de design robusto manualmente, só que aqui leva minutos, não horas.
Após a geração, verifique os valores de cor conforme as diretrizes da sua marca. A IA escolhe defaults inteligentes, mas provavelmente o tom específico da sua marca difere do gerado. Altere os primitivos — e toda a camada semântica será atualizada automaticamente.
5. Criando um componente de botão complexo: 120+ variantes
O verdadeiro teste de estresse do fluxo de trabalho é um componente de botão não simplificado, mas com todo o rigor de um sistema de design.
Prompt para criar o componente:
A geração leva consideravelmente mais tempo e consome uma parte significativa do limite de uso. O resultado é um conjunto completo de componentes com mais de 120 variantes.
O que funciona muito bem:
- Estrutura de auto-layout correta: padding e gap adequados, tudo vindo dos tokens de dimensão.
- Cores atribuídas precisamente: botões primary usam cores primary, danger usa error-reds, tudo vindo dos tokens semânticos.
- Estilos de texto: aplicados corretamente a todas as variantes.
- Propriedades do componente: configuradas para alternância conveniente de estados.
- Convenção de nomenclatura: totalmente respeitada.
O que exigirá ajustes manuais:
- Ícones: O Claude tem dificuldade em criar ícones reais. São geradas formas placeholder, mas nem sempre precisas. É melhor especificar uma forma simples concreta («use a star shape» ou «use an arrow») ou substituir o vetor manualmente.
- Estado de carregamento (Loading state): o posicionamento do spinner pode ficar desalinhado devido ao posicionamento absoluto — requer um ajuste manual rápido.
- Pequenas divergências no padding: algumas variantes podem ter valores de espaçamento diferentes (a correção leva 2–3 minutos).
Para um componente cuja montagem manual do zero normalmente leva 2–3 horas — com variantes, tokens e auto-layout — o Claude executa cerca de 85% do trabalho corretamente. Os 15% restantes são um refinamento manual rápido.
6. Montando uma tela baseada no sistema de design
Teste final: o Claude conseguirá montar uma tela completa usando o sistema de design que acabou de criar? A condição chave — não gerar tudo novamente, mas usar os componentes e variáveis existentes.
Prompt para criar a tela de login:
O que o Claude monta como resultado:
Uma tela de login pronta com estrutura correta. O layout geral é consistente — split-screen adequado, formulário bem organizado, design-tokens utilizados em toda a tela.
O que impressiona:
- Reutilização do sistema: O Claude usa exatamente o componente de botão criado, em vez de desenhar um novo retângulo estilizado como botão.
- Hierarquia tipográfica: heading styles, body text, caption — tudo retirado do sistema de tokens.
- Espaçamentos consistentes: alinhados exatamente pela escala de dimensões.
- Composição geral: profissional e pronta para handoff para desenvolvimento.
- Auto-layout aplicado corretamente: tornando a tela responsiva.
O que exigirá refinamento:
- Polimento visual dos botões de login social.
- O placeholder da ilustração no painel esquerdo é básico (isso é esperado).
- Pequenos ajustes de alinhamento nos espaçamentos internos do formulário.
O resultado não é um protótipo descartável, mas uma base sólida para o desenvolvimento futuro do produto.
7. Análise honesta: onde a IA brilha e onde falha
Onde Claude + Figma funciona excepcionalmente bem:
- Sistemas de variáveis e tokens: Aqui a IA mostra seu melhor. Uma arquitetura completa de tokens, que levaria horas manualmente, é montada em minutos, e a estrutura sai correta.
- Scaffolding de componentes: A geração do esqueleto de componentes complexos com auto-layout correto, properties configuradas e tokens economiza uma enorme quantidade de tempo.
- Composição de telas: A criação de layouts estruturados que utilizam componentes existentes e tokens do sistema de design gera resultados realmente úteis.
- Consistência do sistema de design: Como as regras são definidas previamente no prompt, o Claude mantém a consistência de forma mais rígida do que a maioria dos designers faz manualmente.
Onde a IA ainda não atinge o nível:
- Nuances visuais: A IA não possui gosto artístico. Os resultados são estruturalmente corretos, mas carecem das sutilezas que tornam o design verdadeiramente sofisticado.
- Ícones e ilustrações: O Claude lida mal com a geração de ícones decentes. Sempre forneça ícones de referência ou use plugins especializados.
- Limites de uso: Componentes complexos esgotam rapidamente os limites do Claude. Planeje suas sessões com antecedência.
- Posicionamento: absolute positioning e tratamento de overflow às vezes necessitam de limpeza manual.
Resumo: este workflow não substitui o pensamento de design. Mas comprime radicalmente a fase de execução. O Claude assume 70–85% do trabalho mecânico de montagem do sistema de design, liberando tempo para decisões que realmente importam: estratégia, cenários de usuário, edge cases e polimento visual.
8. Dicas de prompts: padrões que funcionam
Após praticar com este workflow, foram identificados padrões que consistentemente trazem melhores resultados:
- Indique explicitamente o uso de tokens: Escreva sempre «use the variable tokens we created», caso contrário o Claude pode hardcodar valores diretamente.
- Defina a convenção de nomenclatura: O Claude segue qualquer padrão de nomeação que você definir. Seja específico, senão obterá nomes inconsistentes.
- Divida tarefas complexas em etapas: Não peça para criar variáveis, componentes e telas em um único prompt. Faça isso sequencialmente.
- Referencie elementos existentes: Escreva «use our button component», em vez de «create a button», se quiser reutilizar o que já foi criado.
- Defina dimensões explicitamente: «40px height with 12px vertical padding and 16px horizontal padding» funciona melhor do que «medium size».
- Sempre verifique o resultado: Revise o Variables panel, Layers panel e propriedades dos componentes. A IA constrói a estrutura corretamente, mas os detalhes precisam do olhar humano.