Como converter qualquer site em um design Figma

Figma é uma ótima ferramenta que está rapidamente se tornando a favorita entre UX/UI e web designers. Você pode criar designs responsivos da Web com rapidez e facilidade usando esta ferramenta gratuita baseada em navegador.

Embora a maioria das pessoas crie seus designs do zero no Figma, você pode se inspirar em sites reais e criar facilmente um design do Figma diretamente de uma página HTML existente. Veja como fazer isso.

Por que você deve criar designs Figma a partir de HTML

Há muitas razões pelas quais você pode querer replicar um web design existente como um design Figma. Fazer isso por meio do plug-in Figma economiza tempo, permitindo que você se concentre em ajustar seu design.

Praticar web design recriando páginas da web existentes é uma ótima maneira de aprender com os mestres. Você também pode usar a ferramenta de design HTML para Figma se tiver projetado e publicado anteriormente uma página da Web à qual perdeu o acesso. Em vez de redesenhá-lo do zero, você pode economizar tempo convertendo-o de volta para o Figma para trabalhar nele novamente.

Agora que você sabe por que essa ferramenta pode ser útil, é hora de aprender como ela funciona.

Como converter qualquer site em um design Figma

Para iniciar qualquer trabalho de design baseado em Figma, você precisa abrir o Figma e fazer login ou se inscrever. Você pode usar a versão do navegador, Figma , ou baixar o aplicativo de desktop ; ambos funcionam da mesma maneira para este projeto.

Abra um novo arquivo de design para iniciar seu projeto de design HTML para Figma.

Passo 1: Faça o download do plug-in html.to.design

Para poder converter diretamente um site ao vivo em um design Figma, você precisará de um plug-in. Existem inúmeros plugins no Figma para ajudar com seus projetos, incluindo plugins para criar maquetes para telefones e dispositivos. Você pode adicionar o design do site convertido a uma maquete posteriormente, se desejar.

Para baixar o plug-in, selecione o menu Figma (logotipo Figma) > Plug- ins > Encontre mais plug-ins . Como alternativa, você pode selecionar Recursos > Plug- ins . Em qualquer uma das opções, digite na barra de pesquisa html.to.design .

Encontre a opção fornecida pelo divRIOTS e selecione Run . Isso abre o plug-in como uma caixa de diálogo na tela do Figma.

Etapa 2: cole o URL do site

O plug-in html.to.design é gratuito, mas oferece uma versão profissional. Você pode concluir seu processo de design inteiramente com a versão gratuita.

Encontre o site do qual deseja fazer um design Figma. Você deve usar um site público — não uma página da web que só pode ser acessada por meio de login. Usaremos nossa página inicial, MakeUseOf.com.

Copie o URL completo e cole-o na caixa de importação do Figma, substituindo o espaço reservado do site da Apple.

Etapa 3: carregue seu design

Depois de colar o URL do site, abra Configurações abaixo da caixa de importação para selecionar o tamanho do design. Você pode importar o design para uma variedade de dispositivos, mas terá mais sucesso escolhendo um dispositivo de desktop se tiver usado um URL de desktop e mais sucesso usando um URL móvel para dispositivos móveis.

Também existem opções personalizadas para dispositivos ou tamanhos que não estão disponíveis como opções padrão. Estamos escolhendo o MacBook Pro 14” com tema Light .

Depois de especificar o dispositivo e as configurações de exibição, selecione Importar para dar vida ao seu design HTML no Figma. Aguarde até que a barra de carga esteja completa para que o projeto Figma seja preenchido.

Dependendo de qual site você usou, você pode notar uma caixa pop-up explicando que alguns tipos de letra tiveram que ser substituídos. Isso será devido aos direitos autorais dos tipos de letra licenciados. Figma irá substituí-los por tipos de letra aos quais você tem acesso.

Saia de todos os pop-ups e, em seguida, saia da caixa de diálogo do plug-in para ver seu novo design em sua forma completa.

Etapa 4: edite seu design Figma

A partir daqui, você pode começar a editar sua página da Figma da maneira que desejar. Como mencionado, esta função HTML para Figma permite que você aprenda como as páginas da web existentes foram projetadas para inspirá-lo a criar as suas próprias do zero. Você pode usar o design básico do site e criar uma apresentação usando transições no Figma ou simplesmente aprender como as páginas da Web são configuradas por outros designers.

No menu à esquerda, você encontrará as camadas. Como isso foi convertido diretamente do HTML, as camadas podem ser mais detalhadas – ou até mesmo confusas – do que você está acostumado ao criar. Selecione uma seção no design para encontrar as camadas destacadas no menu à esquerda.

Você pode substituir imagens, redigitar títulos e corpo do texto ou mover itens no layout clicando duas vezes no aspecto do design. O plug-in html.to.figma não replica configurações de animação ou transição ao clicar em links ou mudar de página. Você pode adicioná-los por conta própria.

Como converter uma página da Web privada

A maior parte do processo de criação de um site privado – que requer uma conta para acessar – versus uma página pública é a mesma. No entanto, em vez de colar o URL, você deve usar uma extensão do Chrome que gere um arquivo.

Para começar, abra o Figma e o plug-in html.to.figma da mesma forma que antes.

Etapa 1: baixe e execute a extensão do Chrome

Você só pode usar esta extensão com o Google Chrome, então abra o Chrome para começar. Na caixa de diálogo do plug-in Figma, selecione a extensão do Chrome – ou abra a extensão aqui no seu navegador Chrome.

Selecione Adicionar ao Chrome > Adicionar extensão para adicionar a extensão ao seu navegador.

Com a extensão adicionada, navegue até o site ou página privada da qual deseja replicar o design – estamos usando uma página do Instagram – e selecione a extensão. As extensões recolhidas são encontradas no ícone da peça do quebra-cabeça em seu navegador.

Ele perguntará se você deseja capturar a página inteira ou apenas o que está em exibição. Faça sua seleção e a captura aparecerá em seus downloads como um. arquivo h2d.

Etapa 2: arraste o arquivo gerado para o plug-in Figma

Acesse o aplicativo Figma ou o site Figma em seu navegador e arraste o download. arquivo h2d na caixa. O arquivo será carregado e gerado da mesma forma que a opção de site público.

Como na versão da página da Web pública, você pode clicar duas vezes nos aspectos do design para editá-los ou clicar no menu à esquerda para ver onde eles aparecem no layout.

Você pode querer adicionar novos elementos de design ao design da página da Web, como um efeito de vidro fosco Figma, ou até replicar partes do design da página da Web como um modelo mestre para apresentações do Figma. Em 2022, a Adobe adquiriu o Figma, então podemos esperar maneiras mais divertidas de usar o Figma no futuro.

Use qualquer site para inspiração em seus designs Figma

Embora o Figma seja principalmente para projetar sites ou páginas UX/UI do zero, é uma ótima oportunidade para preencher páginas da Web existentes para ver como elas foram construídas. Você também pode tornar seu web design uma réplica de um site existente se não tiver certeza de por onde começar do zero.

Outra grande razão pela qual você deve usar o plug-in html.to.figma é se você já criou um site ao qual perdeu o acesso. Você pode preencher a página no Figma e começar de novo sem ter que começar de novo.