Deutsch 
Español 
Français 
日本語 
한국어 
Polski 
Weblify vs CSS Scan
Alternativa ao CSS Scan. Leve a referência do site para um arquivo editável no Figma.
O Weblify é uma alternativa ao CSS Scan quando a tarefa é copiar a referência de um site para o Figma como camadas editáveis. Copie uma página inteira ou selecione um elemento com a extensão gratuita do Chrome e cole o resultado no arquivo de design.
Extensão gratuita do Weblify para Google Chrome
Thanks so much, Adam!... saved me many, many hours of manual work.
CSS Scan ou Weblify?
Compare o fluxo de trabalho e escolha a ferramenta ideal para o seu próximo projeto.
| CSS Scan |  Com o Weblify |
|---|---|
| Inspeção do CSS de sites O CSS Scan oferece ferramentas para inspecionar os estilos de uma página 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 |
| Cópia de CSS O produto foca em obter o CSS de elementos de páginas existentes. | 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 |
| Fluxo voltado a desenvolvedores O fluxo serve para inspecionar sites já implementados. | 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.
Inspecionar CSS e capturar um site de forma editável são tarefas diferentes. A extensão gratuita do Weblify para Chrome é separada da inspeção de código Pro, e as camadas capturadas não recuperam os componentes originais do Figma nem a lógica de aplicação do site.
Leia o guia do fluxo de trabalho- Comece com uma seção de uma página web pública de que você precisa como referência de design editável. 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. Inspecionar CSS e capturar um site de forma editável são tarefas diferentes.
Perguntas frequentes
O que saber antes de começar.
Quando devo escolher o Weblify em vez do CSS Scan?
Designers que precisam de uma referência de site editável no Figma, e não apenas do CSS inspecionado.
Quando o CSS Scan é a melhor opção?
Desenvolvedores que precisam inspecionar e copiar o CSS de uma página web já implementada.
O que devo verificar antes de trocar?
Inspecionar CSS e capturar um site de forma editável são tarefas diferentes. A extensão gratuita do Weblify para Chrome é separada da inspeção de código Pro, e as camadas capturadas não recuperam os componentes originais do Figma nem a lógica de aplicação do site.
Copiar um site recupera o design system original dele?
Não. O Weblify reconstrói camadas editáveis compatíveis a partir da página. Revise o resultado e recrie a estrutura reutilizável do design system quando necessário; a lógica da aplicação e os componentes originais do código-fonte são outra coisa.
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 ↗ 
