Deutsch 
Español 
Français 
日本語 
한국어 
Polski 
Crie sites no Figma.
Exporte em HTML.
Crie páginas responsivas a partir de camadas editáveis do Figma, copie sites existentes com a extensão gratuita para Chrome, visualize cada rota e exporte HTML e CSS estáticos. Junte-se a mais de 21.200 usuários do Figma que unem design e produção web em um só fluxo de trabalho.
Pro a partir de $17/mês Garantia de reembolso de 30 dias • Cancele quando quiser
Clique em qualquer camada e inspecione-a como HTML, Tailwind, React ou Vue, para passar do design ao código front-end muito mais rápido. Veja como o resultado gerado se comporta enquanto você trabalha, para validar com mais facilidade a estrutura, os estilos e o layout antes do handoff. Leve o código gerado direto para o seu fluxo de trabalho no Dev Mode e ofereça a designers e desenvolvedores uma forma mais clara de revisar juntos os detalhes de implementação. Baixe o resultado gerado para o framework que você usa e deixe a passagem do design para o desenvolvimento muito mais simples e rápida. Inspecione camadas, pré-visualize o código e exporte um código front-end mais limpo direto do Figma com o Weblify.
Thanks so much, Adam!... saved me many, many hours of manual work.
-
Crie páginas responsivas a partir de templates, seções, elementos e estilos reutilizáveis. -
Copie para o Figma sites públicos ou com login usando a extensão gratuita para Chrome. -
Visualize o resultado responsivo e faça uma verificação prévia antes de exportar. -
Exporte HTML e CSS estáticos, rotas, imagens e design tokens em um único ZIP. -
Inspecione as camadas selecionadas como HTML, Tailwind, React ou Vue para o handoff aos desenvolvedores. -
Conte com a ajuda de uma pessoa de verdade: o suporte responde em até 24 horas.
Usado por equipes de empresas de primeira linha
Leve o design para o código sem começar do zero.
Inspecione a marcação e os estilos gerados, pré-visualize o resultado e dê ao seu desenvolvedor um ponto de partida.
| Processo atual |  Com o Weblify |
|---|---|
| Escrever o layout e os estilos do zero Ler as propriedades do design e recriar a marcação e os estilos camada por camada. | Gere um ponto de partida para o código da página. Selecione camadas do Figma e use o resultado gerado pelo Weblify como ponto de partida para a implementação. Revise a estrutura e a integração com o seu código. Conversão do Figma para HTML, Tailwind, React e Vue |
| Levar o código para outro lugar para ver como fica Copiar o resultado em outro lugar para descobrir como ele é renderizado e o que acontece em larguras diferentes. | Pré-visualize o código ao lado do design. Use a renderização ao vivo no navegador e as pré-visualizações responsivas para inspecionar o resultado enquanto trabalha. Teste com conteúdo real e com os breakpoints antes de levar para produção. Pré-visualização do código ao vivo no Figma |
| Pedir ao designer outro arquivo ou outra entrega Pedir outra entrega ou esperar o designer só para inspecionar as camadas e os estilos. | Inspecione o design no Dev Mode do Figma. O plugin permite que os desenvolvedores inspecionem no Dev Mode com acesso somente leitura. Os requisitos de acesso e de assentos do Figma continuam valendo. Inspeção de código no Dev Mode do Figma |
| Importar o design em outro projeto hospedado Importar o design em um projeto online separado e manter outra cópia atualizada. | Inspecione o design no Figma e baixe o código. O fluxo de inspeção privada do Weblify mantém a inspeção do código no Figma e oferece downloads locais diretos. A cópia de sites usa a extensão gratuita para o navegador, que é separada. Inspeção privada de código do Figma |
25 testes Pro grátis incluídos. Sem cartão de crédito.
Teste o Weblify no seu próprio arquivoCopie qualquer site para o Figma com a extensão gratuita para Chrome.
Abra no Chrome um site público ou com login, copie com o Weblify e cole a página no Figma como camadas editáveis.
Conheça a extensão do Chrome para copiar sites para o Figma
Inspecione qualquer camada como HTML, Tailwind, React ou Vue.
Inspecione suas camadas do Figma no mesmo framework do seu ambiente de desenvolvimento.
Conheça a conversão do Figma para HTML, Tailwind, React e Vue Veja o resultado renderizado enquanto inspeciona o código.
Veja na hora, com um clique, como seu código vai aparecer no navegador em diferentes tamanhos de tela, direto no plugin do Figma.
Conheça a pré-visualização do código ao vivo no Figma Inspecione o código direto no Dev Mode do Figma.
Deixe seus desenvolvedores usarem o Weblify sem precisar de acesso de edição (“Edit”) ao seu design do Figma, com a integração nativa ao painel “Dev Mode” do Figma.
Conheça a inspeção de código no Dev Mode do Figma Mantenha seu conteúdo do Figma dentro do plugin.
A criação de sites, a inspeção de código, as visualizações e as exportações em ZIP rodam dentro do Weblify. A extensão opcional para Chrome converte a página no seu navegador e a copia para a área de transferência, sem enviar o conteúdo dos seus arquivos do Figma.
Conheça a inspeção privada de código do Figma Crie e exporte sites sem sair do Figma.
Teste por 30 dias. Não viu valor? Devolvemos todo o seu dinheiro.
Ciclo de cobrança
Comece grátis
Teste o Weblify Pro primeiro
$ 0 Inclui
25 testes Pro grátis
-
1 usuário O suficiente para você mesmo testar o fluxo Pro. - Teste todos os recursos Pro Inclui 25 usos de teste Pro completos.
- Recursos limitados O fluxo gratuito continua disponível depois dos testes.
- Suporte de autoatendimento Documentação para configuração e solução de problemas.
- Inspeções de HTML/CSS ilimitadas
- Sem cartão de crédito Instale pelo Figma e comece a testar.
Teste grátis
Sem cartão de crédito
Mais popular
Weblify Pro
Licença de plugin para Figma
$20 por mês Você economiza $41 por ano
$ 17 Por usuário
Por mês, cobrado anualmente
Gere código HTML, CSS, Tailwind, React e Vue Garantia de reembolso de 30 dias Suporte em até 24 horas
Thanks so much, Adam!... saved me many, many hours of manual work.
- 1 usuário Ajuste o número de licenças antes de pagar.
- Acesso a todos os recursos Tudo do Weblify Pro, desbloqueado.
- Suporte ao cliente incluído Resolvemos qualquer problema em até 24 horas.
- Inspeções de React ilimitadas
- Inspeções de Tailwind ilimitadas
- Inspeções de Vue ilimitadas
- Cópias de código para a área de transferência ilimitadas
- Downloads de componentes ilimitados
- Cobrança anual Economize 17% e cancele quando quiser.
Usa vários plugins? Compare os 12 plugins do Pro Bundle e economize mais do que comprando licenças separadas.
Pagamento seguro
Todos os preços em USD (sem impostos)
Melhor custo-benefício
Pro Bundle
Os 12 plugins · $339/mês separadamente
$99 por mês Você economiza $ 189 por ano
$ 83 Por usuário
Por mês, cobrado anualmente
Garantia de reembolso de 30 dias Pagamento seguro Suporte em até 24 horas
- 1 usuário Um usuário do bundle para cada usuário do Figma.
- Uma licença para 12 plugins Emailify, Bannerify, TinyImage e mais.
- Suporte ao cliente incluído Um único canal de suporte para todos os plugins.
- Economize 70% com o Pro Bundle Mais barato que as licenças individuais.
- Acesso a todos os recursos Acesso Pro completo em cada plugin incluído.
- Cobrança anual Economize 15% e cancele quando quiser.
Pagamento seguro
Todos os preços em USD (sem impostos)
Orçamento em PDF ↗ Depois da compra
Sua chave de licença chega na hora para você compartilhar com os usuários do Figma da sua equipe. Você tem 30 dias para mudar de ideia e pode cancelar quando quiser.
- Após a compra
Chave de licença enviada na hora por e-mail.
Faça o upgrade em minutos: sua chave de licença chega imediatamente.
- Dias 1–30
Experimente sem risco por 30 dias.
Receba o reembolso total se não valer a pena nos primeiros 30 dias.
- A qualquer momento
Cancele quando quiser, sem complicação.
Sem contrato e sem taxas escondidas: cancele quando quiser com um só clique.
Precisa convencer seu chefe?
Personalize esta mensagem e consiga um “sim” rápido para o Weblify. O suporte rápido e humano está incluído, e toda compra tem nossa política de reembolso de 30 dias.
Perguntas frequentes sobre o Weblify
Confira a documentação do Weblify para mais respostas.
Posso experimentar o Weblify Pro?
Sim! O Weblify Pro inclui 25 testes grátis. Depois, você pode continuar usando a versão gratuita do Weblify para sempre ou fazer upgrade para continuar usando todos os recursos Pro extras.
Qual é o prazo de reembolso do Weblify?
Queremos muito que o Weblify seja útil para você! Se ele não valer a pena para você nos primeiros 30 dias, fale com a gente para receber o reembolso total.
Onde posso ler sobre segurança?
O Weblify foi criado com foco em privacidade e segurança. Para ver detalhes sobre segurança e como o plugin funciona, visite a página de segurança no nosso site de documentação.
O que é o Weblify?
O Weblify é um plugin do Figma para inspecionar as camadas selecionadas do Figma como código front-end.
O Weblify é um plugin do Figma?
Sim. O Weblify roda dentro do Figma e transforma as camadas selecionadas em um resultado fácil de levar para o código.
O Weblify pode ajudar com código de produção?
Sim. O Weblify dá aos desenvolvedores um ótimo ponto de partida de código para builds de produção.
O Weblify gera código Tailwind, React ou Vue?
Sim. O Weblify gera código HTML, Tailwind, React e Vue.
Frames com Auto Layout funcionam melhor no Weblify?
Sim. Um Auto Layout limpo, nomes de camadas claros e espaçamento consistente costumam gerar um código mais útil.
O Weblify ajuda no handoff para desenvolvedores?
Sim. O Weblify ajuda os desenvolvedores a inspecionar o layout e os estilos das camadas selecionadas do Figma.
Ainda com dúvidas? Pergunte à Eva, nossa assistente de suporte com IA. Pergunte à Eva Perfeitos para usar com o Weblify.
Gaste menos tempo com tarefas repetitivas.
Faça mais com estes plugins para Figma.
