Criar Componentes React a Partir do Figma Com Claude Code (Tutorial 2026)

Passo a passo para transformar designs do Figma em componentes React+Tailwind production-ready usando Claude Code e o Figma MCP. Tutorial prático para devs e designers.

Por Angelo Venturi

Transformar um frame do Figma em componente React production-ready costumava ser tarefa manual chata — medir pixels, copiar cores, escrever classes utilitárias. Em 2026, com Claude Code + Figma MCP, o handoff vira comando: "crie o componente com base neste frame". Este tutorial mostra o setup completo e as armadilhas comuns.

O Que Você Vai Precisar

  • Claude Code instalado (CLI) — claude.ai/code
  • Plano Claude Pro ou superior
  • Arquivo Figma com componentes bem estruturados (Auto Layout, nomes claros)
  • Projeto React+Tailwind local (Vite, Next.js ou similar)

Passo 1: Configurar O Figma MCP

No terminal do projeto:

claude mcp add figma

Siga o fluxo de autenticação. Você autoriza o Claude Code a ler seus arquivos Figma via token pessoal. O token fica armazenado localmente.

Passo 2: Obter URL Do Frame

No Figma, selecione o frame do componente, clique direito → Copy link. A URL vem no formato:

https://www.figma.com/design/FILE_KEY/NOME?node-id=XXX-YYY

O Claude extrai file key e node ID automaticamente.

Passo 3: Primeiro Comando

No Claude Code, dentro do projeto:

"Leia este frame do Figma: [cole URL]. Crie um componente React em src/components/ButtonPrimary.tsx usando Tailwind. Respeite tokens do meu tailwind.config.ts. Componente com props: variant, size, disabled, loading, onClick, children. Tipagem TypeScript."

O Claude:

  1. Lê o frame via MCP
  2. Identifica tokens (cor, spacing, radius)
  3. Mapeia contra seu tailwind.config.ts
  4. Gera componente idiomático
  5. Respeita a API de props que você pediu

Passo 4: Revisão Crítica

Não confie cegamente. Valide:

  • Classes Tailwind: usa tokens (bg-primary) ou literais (bg-[#0F172A])? Literais indicam que o modelo não encontrou o token no seu config
  • Acessibilidade: ARIA attributes em componentes interativos? focus states com outline?
  • Estados: hover, active, disabled, loading implementados conforme design?
  • Props: API consistente com resto do seu design system?

Passo 5: Iterar

Ajustes pontuais por chat:

  • "Troque todas as classes literais por tokens do meu config"
  • "Adicione variante 'ghost' que não tem fundo e só mostra border no hover"
  • "Exporte também um tipo ButtonPrimaryProps em types/ui.ts"
  • "Adicione story do Storybook em ButtonPrimary.stories.tsx"

Workflow Avançado: Batch De Componentes

Em projeto novo, você tem 20+ componentes para criar. Em vez de um por um:

"Leia todos os frames da página 'Components' do arquivo [URL]. Para cada frame, crie um arquivo .tsx em src/components/ seguindo o padrão do ButtonPrimary que criamos antes. Liste ao final quais foram criados e quais tiveram problema."

O Claude Code processa em sequência, cria arquivos, reporta problemas. Economiza dias de trabalho.

Armadilhas Comuns

  • Frame mal estruturado no Figma: sem Auto Layout, com nomes tipo "Frame 123" — o output fica pior. Invista em qualidade do Figma primeiro
  • Tailwind config desatualizado: se seu config não reflete os tokens do design, o Claude adivinha — e adivinha mal
  • Componentes muito complexos: um componente com 15 variantes e 10 estados sai melhor se você quebrar em passos (esqueleto primeiro, variantes depois, estados por último)
  • Não testar visualmente: o código parece certo mas o render tem diferença sutil. Sempre compare side-by-side Figma x browser

Integração Com CI/CD

Times maduros rodam o Claude Code como parte do pipeline: ao detectar mudança em arquivo Figma monitorado, uma action chama o Claude para regenerar componentes afetados e abrir PR. Latência típica: 5-10 minutos do update no Figma ao PR no GitHub.

Quando Não Usar

  • Componentes com lógica de negócio complexa (formulários com validação condicional de 10 campos) — escreva à mão, o Claude assiste mas não conduz
  • Animações com timeline precisa (GSAP, Framer Motion avançado) — gere esqueleto, refine animação manualmente
  • Integração profunda com state management (Redux, Zustand global) — Claude acerta setup básico, lógica de estado merece revisão dev sênior

Próximos Passos

Estabelecer pipeline Figma → Claude Code → GitHub bem calibrado é o investimento mais alto de retorno em frontend em 2026. Na Impero, implementamos esse fluxo em projetos de web design B2B — reduzimos tempo de build de landing em 70%. Se quer esse stack na sua empresa, fale com a gente.

Perguntas Frequentes

Claude Code é o mesmo que Claude.ai?

Não. Claude.ai é o chat no browser. Claude Code é a CLI para desenvolvedores, com acesso ao sistema de arquivos, execução de comandos, integração com MCP servers. Usa os mesmos modelos, mas workflow e capacidades são diferentes.

Preciso saber código para usar esse fluxo?

Parcialmente. Precisa conhecer React e Tailwind o suficiente para ler e revisar o que o Claude gerou. Para designers sem background em código, o Figma Make (interface visual) é alternativa mais acessível, embora com menos controle.

O Figma MCP funciona com todos os planos Figma?

Funciona com plano Professional e superiores. No Free, existem limitações de API que impactam a leitura de arquivos grandes. Para uso profissional com MCP, Professional é o mínimo.