Como gravar um protótipo do Figma com uma demonstração guiada

Para gravar um protótipo do Figma, abra-o na vista de apresentação, defina o dispositivo e os fluxos no separador Prototype, oculte a interface do Figma e grave essa janela com um gravador de ecrã enquanto fala. O Figma não tem exportação de vídeo, por isso a qualidade da demonstração vem da forma como prepara o protótipo e da calma com que clica.

Este guia é para o vídeo que envia a um cliente antes de uma reunião de revisão, ou em vez dela: «aqui está o novo fluxo de checkout, e porque funciona assim». Não um vídeo promocional polido, mas uma explicação clara.

Prepare o protótipo antes de carregar em gravar

A maioria dos vídeos de protótipos confusos é confusa por causa das definições do protótipo, não da gravação. Cinco minutos aqui poupam-lhe três tentativas.

Defina o dispositivo e o fundo

As definições do protótipo estão na barra lateral direita. Clique numa parte vazia do canvas para não haver nada selecionado e abra o separador Prototype. Aí encontra:

• Device: o tipo, a orientação e o modelo usados na vista de apresentação. Um modelo de telemóvel envolve os designs mobile numa moldura realista, o que ajuda o cliente a imaginar o produto real.
• Background: a cor por trás do protótipo na vista de apresentação. Escolha algo neutro que não concorra com o design.
• Flows: os pontos de partida dos percursos na página atual.

Nos designs para desktop, uma moldura de dispositivo costuma atrapalhar. Escolha antes DeviceCustom Size (Fit) ou DevicePresentation (Full), para que o design ocupe a janela.

Dê a cada percurso o seu próprio fluxo

Um ponto de partida de fluxo diz ao Figma onde começa um percurso, e pode ter vários. Na vista de apresentação, os fluxos aparecem numa barra lateral à esquerda, com as respetivas descrições.

Dê-lhes os nomes que o cliente usaria: «Registo», «Checkout», «Alterar uma reserva». Assim cada gravação começa num ponto limpo, e premir R leva-o de volta ao início do fluxo atual se precisar de recomeçar.

Verifique as interações de hover e de atraso

As interações que dependem do tempo são as que parecem avariadas em vídeo. Reproduza cada fluxo uma vez antes de gravar e verifique estes três triggers:

Trigger	O que faz no Figma	O que fazer no vídeo
While hovering	Mostra um estado só enquanto o cursor fica sobre o hotspot e volta atrás quando sai	Passe para o elemento, fique parado e diga o que mudou
Mouse enter	Dispara uma vez quando o cursor entra no hotspot	Entre uma vez, com intenção, e não volte a sair sem querer
After delay	Avança sozinho ao fim de um tempo definido no frame, em milissegundos	Aumente o atraso para a gravação ou mude-o para um clique

Os ecrãs com After delay são a armadilha habitual: avançam enquanto ainda os está a explicar.

Prepare a vista de apresentação

Abra o protótipo com Present na barra de ferramentas, ou prima ⌘⌥Return. Depois arrume-a:

Grave a janela, não o ecrã

Grave só a janela do browser ou do Figma que mostra o protótipo. As gravações do ecrã inteiro apanham a Dock, os outros separadores e a notificação de que se esqueceu.

No macOS pode fazê-lo com a app Captura de Ecrã: prima ⌘⇧5, escolha a ferramenta «Gravar uma parte do ecrã» e desenhe a moldura à volta do protótipo. O nosso guia sobre como gravar uma janela ou parte do ecrã explica as opções, incluindo vários monitores. Se é a primeira vez que grava num Mac, comece por como gravar o ecrã no Mac.

Antes de começar, percorra a checklist de 60 segundos antes de gravar: notificações desligadas, separadores sem relação fechados, conteúdo de teste no design em vez dos dados de um cliente real.

Clique mais devagar do que lhe parece natural

Sabe onde está cada hotspot. O seu cliente não sabe. Em vídeo, o seu ritmo normal parece frenético.

• Pare em cada ecrã um ou dois segundos antes de clicar. Diga para que serve o ecrã.
• Leve primeiro o cursor ao alvo, depois clique. Quem vê percebe para onde vai antes de acontecer.
• Passe o cursor com intenção. Nos estados de hover, passe para o elemento, fique parado e diga o que muda.
• Espere pelas transições. As transições animadas e as sobreposições precisam de um momento. Clicar durante uma animação pode saltá-la ou acertar no hotspot errado.
• Não faça scroll depressa. Se um frame tem scroll, avance aos poucos e pare onde quer que o cliente olhe.

Se o cliente puder ver no telemóvel, os cliques em destaque e um pouco de zoom nos controlos pequenos ajudam. Vemos quando isso ajuda e quando provoca tonturas em zoom automático na gravação de ecrã.

Narre as decisões, não os cliques

«Agora clico em Continuar» não diz ao cliente nada que ele não veja. O valor de uma demonstração está no raciocínio que, de outra forma, explicaria numa reunião.

Uma estrutura simples para cada fluxo:

1. Para que serve este fluxo: «É assim que um cliente habitual altera uma reserva.»
2. A decisão por trás: «Passámos o seletor de data para o primeiro passo, porque o briefing diz que a maioria das alterações é de data.»
3. O que ainda está em aberto: «O ecrã de cancelamento é provisório até termos o texto da política.»
4. O que precisa de volta: «Pode verificar o texto do segundo passo?»

Para saber mais sobre como estruturar uma apresentação de design, incluindo a segunda ronda e comparações antes e depois, veja como apresentar um design ao cliente sem reunião. Se o vídeo é de feedback e não de apresentação, como dar feedback de design por vídeo tem uma estrutura diferente.

Envie-o com o link do protótipo

Quando terminar, envie duas coisas na mesma mensagem: o vídeo e o link do protótipo do Figma, para os clientes que queiram clicar à vontade. Ponha também na mensagem a pergunta a que precisa de resposta, não só no fim do vídeo.

Olá Rui, aqui fica uma demonstração curta do fluxo de reservas. O link do protótipo está abaixo, se quiser clicar à vontade. Uma pergunta: concorda com a data em primeiro lugar? Um sim ou um não até sexta-feira mantém-nos dentro do prazo.

https://justrec.app/v/k3f9Qa

Fluxo de reservas, primeira versão clicávelJustRec · 2:48

Se envia este tipo de vídeo com frequência, a nossa página sobre enviar vídeos a clientes explica como funcionam o link e a página do cliente, e o guia sobre comunicação assíncrona com clientes por vídeo mostra quando um vídeo substitui uma chamada.