---
url: "/pt/weblify/advanced/import-website.md"
description: "Use a extensão gratuita do Weblify para Chrome e copie páginas ou elementos para o Figma em tamanhos desktop, tablet, celular ou personalizados."
---

# Importar um site para o Figma

> Use a extensão gratuita do Weblify para Chrome e copie páginas ou elementos para o Figma em tamanhos desktop, tablet, celular ou personalizados.

O plugin Weblify para Figma leva à [extensão gratuita do Weblify para Chrome](https://chromewebstore.google.com/detail/weblify-copy-websites-to/dfdmkfjpaoomaiobpaggkkkbhcjccjbb?utm_source=weblify_docs&utm_medium=documentation&utm_campaign=weblify_chrome_extension) para importar sites. A extensão funciona direto no seu navegador, inclusive em páginas que usam o seu login ou a sua sessão atual do navegador.

## Importar um site {#import-a-website}

1. Instale a [extensão do Weblify para Chrome](https://chromewebstore.google.com/detail/weblify-copy-websites-to/dfdmkfjpaoomaiobpaggkkkbhcjccjbb?utm_source=weblify_docs&utm_medium=documentation&utm_campaign=weblify_chrome_extension).
2. Abra no Chrome a página que você quer copiar.
3. Selecione o ícone da extensão do Weblify para abrir a barra de ferramentas dela na página.
4. Mantenha **Current Window Size** ou abra o controle de tamanho para escolher um ou mais tamanhos de captura.
5. Escolha **Copy page** para copiar a página inteira ou **Pick element** para selecionar um elemento.
6. Espere a confirmação **Copied to clipboard**. Ao copiar uma página, deixe o Weblify terminar de rolar e preparar o conteúdo.
7. Volte para o seu arquivo do Figma e cole com Command + V no macOS ou Ctrl + V no Windows.

> **Tip:** Você também pode escolher **Import website** no menu **⋯** do plugin Weblify para Figma e selecionar **Download the Chrome Extension**.

## Escolher os tamanhos de captura {#choosing-capture-sizes}

Abra o controle de tamanho ao lado do logotipo do Weblify para ver **Capture sizes**. O controle mostra o tamanho selecionado ou uma contagem, como **2 sizes**, quando vários estão selecionados.

| Tamanho | Viewport do navegador |
| --- | --- |
| **Current Window Size** | A largura e a altura do conteúdo da janela atual do navegador. As dimensões são atualizadas quando você redimensiona a janela. |
| **Desktop** | 1440 × 900 pixels |
| **Tablet** | 768 × 1024 pixels |
| **Mobile** | 390 × 844 pixels |
| **Custom** | Insira uma largura de 280 a 2560 pixels e uma altura de 320 a 2400 pixels. |

Marque várias caixas de seleção para copiar frames separados e nomeados, lado a lado, para o Figma. Pelo menos um tamanho fica sempre selecionado. Suas escolhas continuam selecionadas quando você usa **Restart**, até você recarregar a página.

**Copy page** inclui a altura completa da página em cada largura selecionada. A configuração de altura controla a viewport usada para montar o layout da página; ela não corta o resultado nessa altura. **Pick element** copia o elemento selecionado do jeito que ele aparece em cada tamanho escolhido.

> **Tip:** Use **Current Window Size** sozinho para capturar a página ao vivo exatamente com o layout atual. Os outros tamanhos remontam o layout de uma cópia da página, então o conteúdo controlado por JavaScript, o conteúdo incorporado ou os gráficos em canvas podem ficar diferentes.

## Carregar o conteúdo antes de copiar {#loading-content-before-copying}

**Copy page** rola a página automaticamente antes de capturá-la. Isso dá às imagens com carregamento lento (lazy loading) e às seções que aparecem com a rolagem a chance de carregar. Depois, o Weblify restaura a posição de rolagem original e captura a página preparada nos tamanhos selecionados.

A preparação tem um limite de tempo e de rolagem para que páginas com feed infinito não fiquem carregando para sempre. Conteúdo muito lento, itens mais adiante em um feed infinito ou conteúdo que o site remove conforme você rola ainda podem ficar de fora. **Pick element** não rola a página automaticamente antes.

Se algo estiver faltando, role até lá você mesmo, espere aparecer e tente **Pick element** com apenas **Current Window Size** selecionado.

## Escolher um elemento {#choosing-an-element}

[Video](/assets/videos/weblify/inspect/chrome-element-inspect.mp4)

Selecione **Pick element**, passe o mouse sobre a página e clique no elemento que você quer copiar. Use os controles para cima e para baixo para passar a um elemento pai ou filho antes de copiar.

Se o elemento selecionado estiver oculto em algum dos tamanhos escolhidos, o Weblify mostra um erro em vez de copiar um frame vazio. Escolha um tamanho em que o elemento esteja visível e tente de novo.

Depois de copiar com sucesso, selecione **Restart** para voltar à barra de ferramentas mantendo as escolhas de tamanho, ou feche o aviso de confirmação.

> **Warning:** As páginas internas do navegador e a Chrome Web Store não permitem que extensões insiram controles na página. Abra uma aba com um site comum antes de selecionar o ícone da extensão do Weblify.