Plugin Figma · local e grátis

Do Gemini direto pro Figma, como camadas de verdade

Cole o HTML gerado pelo Gemini — ou de qualquer site publicado — e o plugin recria tudo como frames, textos e formas editáveis, no tamanho real do layout. Sem redesenhar do zero.

Baixar plugin (.zip) Ver como funciona

Roda 100% no Figma Desktop · Import plugin from manifest · nenhum dado sai do seu computador

Converta aqui mesmo
Teste sem abrir o Figma
Solte um HTML (ou cole o código) e baixe o .json pronto — depois é só arrastar esse arquivo dentro do plugin no Figma.
Como funciona

Dois jeitos de levar um layout pro Figma

O plugin sempre lê o HTML já renderizado — o que muda é de onde você tira esse HTML.

Fluxo 1 — Direto do Gemini

Mais simples

O Gemini já entrega o código pronto, é só pegar e colar.

  1. No Gemini, gere a página (Canvas ou código)
  2. Copie o código HTML completo que o Gemini mostrou
  3. Abra o Figma → rode o plugin Gemini para Figma
  4. Cole o código na caixa de texto (ou salve como .html e arraste)
  5. Clique em Converter automaticamente
Direto ao ponto: não precisa abrir navegador nem devtools — o próprio Gemini já te dá o HTML final.

Fluxo 2 — De um site publicado

Um passo a mais

Funciona com qualquer link ao vivo — Vercel, Netlify, ou outro.

  1. Abra o site publicado no Chrome (ex: uma LP no Vercel)
  2. Abra o DevTools (F12) → aba Elements
  3. Clique com o botão direito na tag <html> → Copy → Copy outerHTML
  4. Cole esse HTML na caixa de texto do plugin
  5. Clique em Converter automaticamente
Por quê o passo extra: um site no ar não te entrega um arquivo .html pronto — o "outerHTML" pega a página exatamente como o navegador renderizou, com CSS e JS já aplicados.
Resumindo a diferença: o Gemini exporta código-fonte direto — você já recebe o HTML pronto. Um site publicado já foi processado pelo navegador, então em vez do código-fonte você precisa da árvore renderizada (outerHTML); senão estilos aplicados via JavaScript ou CSS externo ficam de fora da conversão.
Instalação

Como instalar (uma vez só)

O plugin roda localmente — não está na Figma Community, então a instalação é manual.

  1. Baixe o Gemini-para-Figma.zip acima e descompacte numa pasta

  2. Abra o Figma Desktop

  3. Menu Plugins → Development → Import plugin from manifest…

  4. Selecione o arquivo manifest.json dentro da pasta descompactada

  5. Pronto — o plugin fica disponível em Plugins → Development → Gemini para Figma