Uma coisa que é bem chata é quando perdemos o editável do layout de um site que já está no ar. Mesmo no Figma, você pode acabar perdendo de alguma forma.
Ou mesmo quando é um projeto que você não tem o editável e quer fazer um teste rápido no Figma, talvez um botão de outra cor ou uma mudança no menu. Aí lá vamos nós fazer aquele “print-stein” bem sofrível. Bom isso era antes de eu conhecer o plugin HTML To Figma.
A ideia do plugin
A ideia desse plugin do Figma é bem simples: gerar o layout de um site que está no ar para ter um bom ponto de partida para novas páginas ou mesmo protótipos.
Como funciona o plugin do Figma
Basta digitar uma URL de um site que está no ar (no exemplo aqui peguei o site do Nubank) e escolher um tamanho de tela.
Depois de clicar em “Importar” o resultado:
Para fazer testes rápidos tanto de UI quanto para um teste de usabilidade é um ganho extremo de velocidade.
Alguns problemas não muito graves
Atualmente o plugin ainda conta com algumas pequenas limitações, como:
- Não conseguir pegar pseudoelementos e iframes
- Nem todas as propriedades CSS são suportadas
- Alguns tipos de mídia como GIFs e vídeos não são suportados
- Todas as tipografias precisam ser importadas para o Figma
Por exemplo um site como a Alura.com.br que usa bastante os recursos supracitados ficaria assim:
E se o site/página for uma área logada?
O autor da ferramenta pensou nisso! Basta instalar a extensão para Chrome HTML to Figma e clicar na extensão no site logado e no tamanho de tela que você precisa.
Fiz um teste aqui no site da Alura também. Na esquerda da imagem abaixo, quando eu tentei acessar uma área logada usando o plugin como mostrado acima. Na direita fazendo upload do .JSON que a extensão gera.
Onde faz o upload? No plugin mesmo clicando em “upload here” como na imagem abaixo:
O resultado fica longe do perfeito, porém infinitamente melhor que refazer na mão. Afinal qual o sentido de refazer algo que já foi feito? 🤔
E o que você achou desse plugin? Fantástico ou “meh”? Escreve aí nos comentários!
Conheça também outros plugins do Figma