Figma é uma ótima ferramenta que está rapidamente se tornando a favorita entre UX/UI e web designers. Você pode criar designs responsivos da Web de forma rápida e fácil 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 baixe 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: Baixe o plugin 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 Figma menu (logotipo Figma) > Plugins > Encontrar mais plug-ins. Como alternativa, você pode selecionar Recursos > Plugins. Em qualquer uma das opções, digite na barra de pesquisa html.to.design.
Encontre a opção fornecida pelo divRIOTS e selecione Correr. 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. Vamos usar 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 desenho. Você pode importar o design para uma variedade de dispositivos, mas terá mais sucesso ao escolher um dispositivo de desktop se tiver usado um URL de desktop e mais sucesso ao usar 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 MacBook Pro 14” com um Luz tema.
Depois de especificar seu dispositivo e visualizar as configurações, 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 aprenda 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 plugin Figma, selecione 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 arquivo .h2d baixado para a 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.
Talvez você queira adicionar novos elementos de design ao design da página da Web, como um efeito de vidro fosco Figma, ou você pode até replicar partes do design da página da web como um modelo mestre para apresentações Figma. Em 2022, Adobe adquiriu a 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.
Outro grande motivo pelo 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.
