Figma Make by Claude: Tutorial Completo do Design à Produção (2026)

Tutorial passo a passo do Figma Make com Claude: como gerar sites completos a partir de prompt, editar visualmente, publicar e versionar. Casos reais e limites do produto.

Por Angelo Venturi

O Figma Make é o produto da Figma que usa o Claude por baixo dos panos para transformar uma ideia em texto num site funcional, hospedado e editável em minutos. Se você já usou ChatGPT ou Lovable, a proposta é parecida — mas com uma diferença crítica: o output sai dentro do ecossistema Figma, com ponte direta para seus componentes, bibliotecas e brand tokens. Este tutorial leva você do zero ao primeiro site publicado.

O Que É Figma Make

Figma Make é uma superfície de vibe coding onde você descreve o que quer em linguagem natural e o Claude gera código React+Tailwind, renderiza o preview ao vivo e publica numa URL pública. Diferente de um Artifact no Claude.ai, aqui você tem:

  • Um editor visual com inspector de estilos (cor, espaçamento, tipografia)
  • Preview responsivo nativo (desktop, tablet, mobile)
  • Publicação em um clique para URL pública ou domínio próprio
  • Integração com arquivos Figma (importe designs existentes)
  • Design system da sua organização aplicado automaticamente

Pré-requisitos

  1. Conta Figma (o Free funciona para testar; Pro/Org destrava integrações avançadas)
  2. Acesso ao Figma Make em figma.com/make
  3. Opcional mas recomendado: um Design System da sua marca já configurado no Figma

Passo 1: Configurar Seu Design System no Figma Make

Antes de criar qualquer projeto, configure o contexto de marca (aquela tela "Set up your design system" que você viu). Os campos que mais impactam o resultado:

  • Company name and blurb: inclua público-alvo e tom. Exemplo: "Impero Solutions — consultoria B2B de IA e automação para empresas em crescimento. Tom profissional, direto, focado em ROI."
  • Upload .fig file: se tem um arquivo Figma com design system, suba aqui — é o que mais eleva a qualidade do output.
  • Fonts, logos, assets: suba o logo em SVG, fontes em .woff2, ícones principais.
  • Other notes: paleta em hex, tipografia, border-radius padrão, do-and-dont de marca.

Passo 2: Criar Seu Primeiro Site

Clique em New project e escreva um prompt. A diferença entre um prompt genérico e um prompt cirúrgico é enorme:

Prompt genérico (resultado medíocre):
"Crie uma landing page para minha empresa."

Prompt cirúrgico (resultado de produção):
"Crie uma landing page de 5 seções para Impero Solutions (B2B, IA e automação): (1) hero com headline, subheadline, CTA duplo e screenshot de dashboard, (2) três pilares de serviço em cards, (3) logos de clientes, (4) estudo de caso com número grande, (5) CTA final com formulário. Paleta: fundo #FAF9F6, texto #0F172A, accent #2563EB. Tipografia: sans-serif profissional. Responsivo mobile-first."

Passo 3: Editar Visualmente

Depois do primeiro render, use o editor visual:

  • Selecione qualquer elemento no canvas para abrir o inspector à direita
  • Ajuste estilos com controles visuais ou digite valores (padding, radius, cor)
  • Peça ajustes em chat: "aumente o espaçamento entre as seções", "troque a ordem dos cards", "adicione um degradê sutil no hero"
  • Use componentes do seu Figma: digite "/" e busque por um componente da sua biblioteca — ele é inserido preservando props

Passo 4: Testar Responsividade

Figma Make gera responsivo por padrão, mas sempre valide:

  1. Alterne as viewports no topo (desktop → tablet → mobile)
  2. Peça explicitamente: "no mobile, empilhe os cards da seção 2 e reduza o tamanho da headline para 32px"
  3. Teste touch targets: botões precisam ter pelo menos 44x44px em mobile

Passo 5: Publicar

Clique em Publish no topo direito. Você recebe uma URL pública do tipo nome-do-projeto.figma.site. Em planos pagos, conecte um domínio próprio em Settings → Domains.

Casos Em Que Figma Make Brilha

  • Landing de campanha: do briefing ao no ar em 2 horas
  • Protótipos navegáveis para reunião com cliente
  • Microsites de evento: página única, alta conversão
  • Páginas internas de documentação ou comunicação

Casos Em Que Figma Make Não É a Melhor Escolha

  • E-commerce com catálogo grande (use Shopify, WooCommerce)
  • Aplicações com backend complexo e autenticação customizada
  • Sites com SEO técnico agressivo (prefira Next.js em Vercel)
  • Projetos onde você precisa de controle total sobre bundle e performance

Integração Com Seu Site Principal

Para uso híbrido — protótipo no Figma Make, código final no seu stack — exporte o código pelo botão Export code. Você recebe um pacote React+Tailwind que cola direto em projetos Next.js ou Vite. É exatamente assim que rodamos projetos de web design na Impero: ideação e validação no Figma Make, produção no Vite+React do cliente.

Se sua empresa quer testar esse fluxo num projeto real, fale com a gente — estruturamos o workflow completo da ideação ao deploy.

Perguntas Frequentes

Figma Make é grátis?

Existe um tier gratuito com limite de projetos e sem domínio próprio. Para uso profissional (mais projetos, domínio customizado, integrações avançadas), os planos Pro e Organization da Figma incluem Make com limites maiores. Veja preços atualizados em figma.com/pricing.

Qual modelo do Claude o Figma Make usa?

A Figma não divulga oficialmente a versão exata, mas o Make roda na família Claude (Anthropic) e foi atualizado ao longo de 2025 e 2026 acompanhando os lançamentos de modelos mais capazes, incluindo o Opus 4.7 no topo da linha.

Posso editar o código gerado fora do Figma Make?

Sim. Exporte como pacote React+Tailwind e abra em qualquer IDE. O código é idiomático, com componentes separados e tokens de design em CSS variables — fácil de manter e evoluir.