---
url: "/pt/weblify/overview/quickstart.md"
description: "Crie, pré-visualize, inspecione e exporte sites com o Weblify ou copie páginas existentes para o Figma com a extensão do Weblify para Chrome."
---

# Primeiros passos com o Weblify

> Crie, pré-visualize, inspecione e exporte sites com o Weblify ou copie páginas existentes para o Figma com a extensão do Weblify para Chrome.

[![Plugin Weblify para Figma](https://www.hypermatic.com/weblify.jpg)](https://www.figma.com/community/plugin/927336249307137996)

## Instalar o plugin Weblify para Figma

1. Abra qualquer arquivo do Figma.
2. Clique no ícone **Actions** na barra de ferramentas inferior do Figma.
3. Clique na aba **Plugins & Widgets** para filtrar os resultados e ver só plugins do Figma.
4. Pesquise **Weblify** na barra de pesquisa.
5. Clique no resultado **Weblify**.
6. Clique no botão **Save** para instalar o plugin Weblify.

> **Note:** Usuários do Figma em uma **Figma Organization** talvez só possam instalar plugins aprovados. Se você não conseguir instalar alguns plugins do Figma, peça ao administrador da organização do Figma na sua empresa para [aprovar o plugin Weblify](https://help.figma.com/hc/en-us/articles/4404228724759-Manage-plugins-and-widgets-in-an-organization).

## Executar o plugin Weblify para Figma

Depois de [instalar](#instalar-o-plugin-weblify-para-figma) o plugin **Weblify** para Figma, siga estes passos para executá-lo no seu arquivo do Figma:

  1. Clique com o **botão direito** em qualquer lugar do canvas da página do seu arquivo do Figma
  2. Passe o mouse sobre o item de menu **Plugins** ▶
  3. Passe o mouse sobre o item de menu **Saved plugins** ▶
  4. Clique no item de menu do plugin **Weblify**

> **Tip:** Depois de executar o plugin **Weblify** uma vez em um arquivo do Figma, você poderá abri-lo de novo rapidamente clicando no ícone do **Weblify** na coluna à direita do Figma (abaixo do subtítulo **Plugin**).

> **Warning:** Só usuários do Figma com acesso de **Edit** a um arquivo do Figma podem executar plugins do Figma nesse arquivo; se você tiver apenas permissão de **View**, não poderá executar nenhum plugin do Figma nesse arquivo.

## Instalar e ativar o Weblify

- [Instalar e executar o plugin para Figma](/pt/weblify/overview/install.md): Como executar o Weblify dentro do Figma
- [Ativar o Weblify Pro](/pt/weblify/overview/pro.md): Como comprar e usar uma chave de licença Pro

## Usar o Weblify

  - [Criar um site](/pt/weblify/build/site-builder.md): Crie páginas de site editáveis a partir de templates, seções e elementos
  - [Importar um site](/pt/weblify/advanced/import-website.md): Copie uma página ou um elemento selecionado com a extensão gratuita para Chrome
  - [Auditar e exportar](/pt/weblify/build/export.md): Valide e baixe um site estático em HTML e CSS
  - [Inspecionar camadas do Figma](/pt/weblify/inspect/layers.md): Gere código HTML, Tailwind, React ou Vue a partir de uma camada selecionada

## Perguntas frequentes

- [Solução de problemas do Weblify](/pt/weblify/faq/troubleshooting.md): Problemas comuns que você pode encontrar
- [Segurança do Weblify](/pt/weblify/faq/security.md): Detalhes sobre como o Weblify funciona
- [Recibos](/pt/faq/receipts.md): Encontre recibos por e-mail e faturas em PDF
- [Cobrança](/pt/faq/billing.md): Gerencie sua assinatura Pro
- [Gerenciar os assentos da licença](/pt/faq/seats.md): Gerencie os usuários do Figma na sua chave
- [Weblify grátis e Pro](/pt/weblify/faq/plans.md): Compare os recursos grátis e Pro

[Video](https://www.hypermatic.com/assets/videos/weblify/WEBLIFY_DEMO.mp4)

## Recursos do Weblify

- Crie páginas de site editáveis a partir de templates, seções, elementos e layouts responsivos.
- Copie sites públicos ou que exigem login para o Figma com a extensão gratuita para Chrome.
- Pré-visualize o site gerado em diferentes larguras de viewport.
- Audite e exporte as páginas do Weblify como um site estático em HTML e CSS.
- Inspecione as camadas selecionadas do Figma como código HTML/CSS, Tailwind, React ou Vue.
- Copie o código gerado ou baixe um ZIP do componente com os assets de imagem.
- Trabalhe com o auto layout do Figma, quebra de linha e propriedades de layout mín./máx.
- Use as ferramentas de inspeção de código do Weblify no Dev Mode do Figma.