Mockups de UX/UI em 3D: seu design num link que o cliente abre de verdade
Seu redesign dentro de um notebook 3D que rola a página inteira, e suas telas de app num celular que dá para tocar. Um link que abre em qualquer navegador, sem conta e sem instalar nada.
Você manda o link do arquivo e, do outro lado, o cliente abre um canvas com quarenta frames. Ele não sabe qual é a home. Clica em alguma coisa, o cursor de outra pessoa passa na frente, ele fecha a aba e responde que vê amanhã. Chega na reunião sem ter visto nada, e os dez primeiros minutos vão embora explicando a ferramenta em vez do design.
O Figma é onde o trabalho mora, não onde ele é visto. Para quem não usa, precisa de outra coisa, e é um mockup de site: um link que abre do jeito que uma página abre, com seu design já dentro de um notebook.
Veja primeiro
Role dentro da tela, a página está inteira. Arraste o fundo e o notebook gira. É isso que chega no seu cliente.
Um mockup de telas de app é a mesma ideia num celular 3D, e é aí que os hotspots fazem diferença. Você marca uma área, o botão de checkout por exemplo, e quem está olhando toca e cai na tela seguinte. Uma pasta de prints soltos vira um percurso que a pessoa faz com o próprio dedo.
Demo ao vivoExemplo de mockup de telas de app em 3DAbrir em nova aba
Você sobe uma imagem por tela, ordena e publica. O único passo com truque é a captura, porque você precisa da página inteira e não do que cabe na janela. No Chrome ela está no menu de comandos do DevTools, em Capture full size screenshot. No Figma, você exporta o frame na altura real. Um PDF também serve: cada página entra como uma tela.
Capture em 1x, não em 2x. Um print retina de uma página longa é enorme, e o visualizador redimensiona ele do mesmo jeito antes de usar como textura, então esses pixels a mais só fazem quem abriu o link esperar.
Dependendo de como você trabalha
Freelance
Você manda o link na véspera e a call começa com o cliente opinando sobre o design. Se você trabalha por rodadas, troca as telas no editor e o link continua o mesmo, então ninguém volta a comentar a versão de duas semanas atrás.
Em agência
Quem decide quase nunca está na call. Um link é encaminhado sem perder nada no caminho, e no Pro as análises mostram se abriram e qual tela prendeu mais.
Em time de produto
As quatro telas novas do mês, dentro de um celular, contam o avanço melhor que um parágrafo no canal. O mesmo projeto exporta em vídeo para o update.
Seu arquivo de design é onde você trabalha. O link é para todo o resto: a reunião, o encaminhamento, e a decisão que é tomada três dias depois sem você.
Perguntas frequentes
Qual é a diferença entre o mockup de desktop e o mobile?
Um notebook 3D com capturas de página inteira, contra um celular 3D com telas verticais de app. A navegação e os hotspots funcionam igual nos dois, então você escolhe pelo que está mostrando.
Preciso do arquivo do Figma ou os prints bastam?
Os prints bastam: uma imagem alta por tela, em PNG ou JPG. Um PDF também entra, uma página por tela. Não existe importação do Figma.
O cliente precisa de conta ou de instalar algo?
Não. O link abre em qualquer navegador, no computador ou no celular, sem conta e sem instalar nada.
Dá para navegar como num protótipo?
Em parte. Um hotspot pode levar para outra tela, abrir um link ou mostrar uma nota. Não há campos de formulário nem estado, então trate como um percurso guiado.
Posso manter privado?
Sim. Um projeto pode ficar fora da listagem ou protegido por senha, em qualquer plano, incluindo o gratuito.
Quanto custa?
O plano gratuito cobre 3 projetos e 50 MB, com uma pastilha pequena da i3dify no canto. O Pro custa US$ 3 por mês, ou US$ 24 por ano, tira a pastilha e ainda dá domínio próprio e análises.