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.

pagina do 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.

janela do plugin mostrando campos para digitar URL e o viewport size. Informacao sobre a extensao do chrome e do autor builder.io

Depois de clicar em “Importar” o resultado:

layout do nubank recriado no figma pós uso do plugin. As camadas parecem desorganizadas mas tudo de texto está realmente como texto.

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:

print do figma com dois blocos, primeiro mostrando o resultado do plugin pegando o site da alura, faltando icones e backgrounds, no segundo o print em jpg normal

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.

print mostrando

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

Que tal receber dicas de UX direto no seu e-mail?

Receba a newsletter que eu escrevo pessoalmente, com práticas de usabilidade, insights do mercado de UX e dicas do Figma