Deutsch 
Español 
Français 
日本語 
한국어 
Polski 
Weblify vs CSS Peeper
Alternativa ao CSS Peeper. Transforme a referência de um site em camadas de design editáveis.
Compare o CSS Peeper com a extensão gratuita do Weblify para Chrome para referências de sites. O Weblify copia uma página ou um elemento selecionado como camadas editáveis do Figma; o CSS Peeper foca em inspecionar os detalhes de design de uma página web existente.
Extensão gratuita do Weblify para Google Chrome
Thanks so much, Adam!... saved me many, many hours of manual work.
CSS Peeper ou Weblify?
Compare o fluxo de trabalho e escolha a ferramenta ideal para o seu próximo projeto.
| CSS Peeper |  Com o Weblify |
|---|---|
| Inspeção visual de sites O CSS Peeper oferece um fluxo de inspeção visual para páginas web. | Extensão do Chrome de site para Figma Copie uma página inteira ou escolha um elemento no Chrome e cole no Figma como camadas editáveis com a extensão gratuita do Weblify. Leia o guia do Weblify |
| Exploração de estilos O produto ajuda a inspecionar as propriedades de design de uma página. | De Figma para HTML, Tailwind, React e Vue Selecione uma camada do Figma e inspecione o HTML, Tailwind, React ou Vue gerado ao lado do design. Depois, copie ou baixe a implementação. Leia o guia do Weblify |
| Inspeção de assets O CSS Peeper inclui a exploração de assets de sites nas suas ferramentas. | Prévia de código ao vivo no Figma Renderize o código web gerado em diferentes tamanhos de viewport dentro do Weblify e confira o resultado antes da entrega ou do download. Leia o guia do Weblify |
Extensão gratuita para o Google Chrome. Copie sua primeira página ou elemento para o Figma.
Baixe a extensão gratuita para ChromeEscolha seu fluxo de trabalho
Escolha a ferramenta certa para cada trabalho.
Veja na prática
O que você pode fazer com o Weblify.
Conheça os recursos por trás do fluxo de trabalho, com demonstrações e guias de configuração.
Copie qualquer site para o Figma com a extensão gratuita para Chrome.
Copie uma página inteira ou escolha um único elemento no Chrome e cole no Figma como camadas editáveis com a extensão gratuita do Weblify.
- Cópia de páginas inteiras
- Seleção de um único elemento
- Camadas editáveis no Figma
Inspecione qualquer camada do Figma como HTML, Tailwind, React ou Vue.
Selecione uma camada do Figma e inspecione o código HTML, Tailwind, React ou Vue gerado ao lado do design; depois, copie ou baixe a implementação.
- Inspeção de HTML e CSS
- Saída em Tailwind
- Saída em React e Vue
Veja o resultado renderizado enquanto inspeciona o código no Figma.
Renderize o código web gerado em diferentes tamanhos de viewport dentro do Weblify e confira o resultado antes do handoff ou do download.
- Renderização ao vivo no navegador
- Pré-visualizações responsivas
- Pré-visualização ao lado do design no Figma
Teste com um projeto real
Leve o fluxo de trabalho para o Weblify.
Comece com um arquivo representativo antes de mudar o processo da equipe.
Weblify ProO que verificar antes de trocar.
Esta página compara a captura de sites com a inspeção visual. As camadas reconstruídas no Figma precisam de revisão, e a extensão gratuita de captura não inclui o fluxo separado de inspeção de código do Weblify Pro.
Leia o guia do fluxo de trabalho- Comece com um elemento web com tipografia, imagens e layout aninhado. Abra no Chrome o site que você quer copiar.
- Copie a página ou escolha um elemento.
- Cole o resultado em um arquivo do Figma novo ou existente. Esta página compara a captura de sites com a inspeção visual.
Perguntas frequentes
O que saber antes de começar.
Quando devo escolher o Weblify em vez do CSS Peeper?
Designers que querem continuar trabalhando na referência de um site dentro do Figma.
Quando o CSS Peeper é a melhor opção?
Quem busca uma ferramenta visual de inspeção de sites para estilos e assets.
O que devo verificar antes de trocar?
Esta página compara a captura de sites com a inspeção visual. As camadas reconstruídas no Figma precisam de revisão, e a extensão gratuita de captura não inclui o fluxo separado de inspeção de código do Weblify Pro.
A captura de sites do Weblify está incluída em um plano pago do Figma?
A extensão do Weblify para Chrome que captura páginas e elementos é gratuita e separada da inspeção de código do Weblify Pro. Use a extensão para colar o resultado compatível no seu próprio arquivo do Figma.
Posso testar o Weblify antes de fazer upgrade?
Extensão gratuita do Weblify para Google Chrome. A extensão para Chrome é separada da inspeção de código do Weblify Pro.
Orçamento em PDF ↗ 
