O plugin Weblify para Figma leva à extensão gratuita do Weblify para Chrome 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
- Instale a extensão do Weblify para Chrome.
- Abra no Chrome a página que você quer copiar.
- Selecione o ícone da extensão do Weblify para abrir a barra de ferramentas dela na página.
- Mantenha Current Window Size ou abra o controle de tamanho para escolher um ou mais tamanhos de captura.
- Escolha Copy page para copiar a página inteira ou Pick element para selecionar um elemento.
- Espere a confirmação Copied to clipboard. Ao copiar uma página, deixe o Weblify terminar de rolar e preparar o conteúdo.
- Volte para o seu arquivo do Figma e cole com Command + V no macOS ou Ctrl + V no Windows.
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
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.
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
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
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.
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.