Voltar

Capturar site no Figma

Guia passo a passo.

1

Instalar extensão Chrome

Acesse o Chrome Web Store, clique 'Adicionar ao Chrome'.

2

Capturar página inteira

  1. Navegue até a página.
  2. Clique no ícone PixelSync.
  3. Clique 'Capturar página inteira'.
  4. Copiado automaticamente.
💡Role primeiro para lazy-loading.
3

Selecionar elemento

Modo 'Selecionar elemento':

  1. Ícone PixelSync.
  2. 'Selecionar elemento'.
  3. Clique no elemento.
💡Ideal para componentes.
4

Colar no Figma

Figma, ⌘V (ou Ctrl+V).

Sem plugin.

5

Capturar designs IA ⭐ Destaque

O modo mais rápido de trazer designs IA para o Figma. Funciona em qualquer página web.

Claude

Artifacts Claude do navegador.

ChatGPT

Canvas, HTML/CSS, páginas renderizadas.

v0

Páginas ou componentes v0.

Bolt

Apps Bolt ou seções.

Lovable

Páginas Lovable em camadas Figma.

💡Forte para iteração de design.
6

Limpeza inteligente

Ative 'Limpeza inteligente' antes de capturar.

💡Para HTML aninhado.
7

Páginas com login

Captura tudo no navegador — páginas autenticadas incluídas.

Credenciais nunca saem do dispositivo.

8

Layouts mobile/tablet

Captura o viewport atual. Para mobile:

  1. DevTools (F12) ou redimensionar.
  2. Largura desejada (375px).
  3. Recarregar.
  4. Capturar.
9

Modo escuro/claro

Captura prefers-color-scheme atual. Para ambos os temas:

  1. Capturar no tema atual.
  2. Trocar aparência do sistema.
  3. Recarregar e recapturar.
10

Dicas

  • •Role primeiro.
  • •Seleção para páginas complexas.
  • •Limpeza inteligente.
  • •Fontes em font-family.
  • •CSS complexo simplificado.
  • •Imagens cross-origin vazias.
  • •Ponto de partida.
  • •Sem scroll automático.

Pronto para testar?

Grátis — 15 capturas/mês.

Instalar grátis