IT

Come registrare un prototipo Figma e spiegarlo in video

Figma non ha un registratore integrato. Ecco come registrare un prototipo Figma che il cliente riesca a seguire: impostazioni, flow, ritmo, registrazione e commento.

Nicolas Ricardi6 min di lettura

In breve

  • Figma non sa registrare un prototipo da solo: lo avvii in modalità presentazione e registri quella finestra con un registratore dello schermo.
  • Prima di registrare imposta dispositivo, sfondo e flow nella scheda Prototype, e nascondi l'interfaccia di Figma perché il cliente veda solo il design.
  • Muoviti più lentamente di quando lavori da solo: fermati su ogni schermata, passa sopra gli elementi con calma e aspetta che ritardi e transizioni finiscano.
  • Registra la finestra, non tutto lo schermo, e racconta le decisioni, non i clic.
  • Manda il link del video con una domanda chiara, così il cliente sa cosa ti serve in risposta.

Per registrare un prototipo Figma, aprilo in modalità presentazione, imposta dispositivo e flow nella scheda Prototype, nascondi l’interfaccia di Figma e registra quella finestra con un registratore dello schermo mentre parli. Figma non ha un’esportazione video, quindi la qualità della presentazione dipende da come prepari il prototipo e da quanto lentamente clicchi.

Questa guida è per il video che mandi al cliente prima di una call di revisione, o al suo posto: “ecco il nuovo flusso di checkout, e perché funziona così”. Non un video promozionale curato, ma una spiegazione chiara.

Prepara il prototipo prima di premere Rec

Quasi tutti i video di prototipi confusi lo sono per colpa delle impostazioni del prototipo, non della registrazione. Cinque minuti qui ti risparmiano tre riprese.

Imposta dispositivo e sfondo

Le impostazioni del prototipo stanno nella barra laterale destra. Fai clic su una parte vuota del canvas in modo che nulla sia selezionato, poi apri la scheda Prototype. Lì trovi:

  • Device: tipo, orientamento e modello usati in modalità presentazione. Un modello di telefono inserisce i design mobile in una cornice realistica, che aiuta il cliente a immaginare il prodotto vero.
  • Background: il colore dietro il prototipo in modalità presentazione. Scegli qualcosa di neutro che non faccia concorrenza al design.
  • Flows: i punti di partenza dei percorsi nella pagina corrente.

Per i design desktop, la cornice del dispositivo di solito è d’intralcio. Scegli invece DeviceCustom Size (Fit) o DevicePresentation (Full), così il design riempie la finestra.

Dai a ogni percorso il suo flow

Un punto di partenza del flow dice a Figma dove comincia un percorso, e puoi averne più d’uno. In modalità presentazione i flow compaiono in una barra laterale a sinistra, con le loro descrizioni.

Chiamali come li pensa il cliente: “Registrazione”, “Checkout”, “Modifica prenotazione”. Così ogni registrazione parte da un punto pulito, e premendo R torni all’inizio del flow corrente se devi ricominciare.

Controlla le interazioni con hover e ritardo

Le interazioni che dipendono dai tempi sono quelle che in video sembrano rotte. Riproduci ogni flow una volta prima di registrare e controlla questi tre trigger:

I trigger di Figma basati sui tempi e come registrarli
Trigger Cosa fa in Figma Cosa fare in video
While hovering Mostra uno stato solo finché il puntatore resta sull’hotspot, poi torna indietro quando esce Spostati sull’elemento, resta fermo, di’ cosa è cambiato
Mouse enter Si attiva una volta quando il puntatore entra nell’hotspot Entra una volta, con decisione, e non uscire per sbaglio
After delay Va avanti da solo dopo un tempo fissato sul frame, in millisecondi Allunga il ritardo per la registrazione o trasformalo in un clic

Le schermate con After delay sono la trappola classica: vanno avanti mentre le stai ancora spiegando.

Prepara la modalità presentazione

Apri il prototipo con Present nella barra degli strumenti, o premi ⌘⌥Return. Poi fai pulizia:

  1. Disattiva i suggerimenti sugli hotspot. Togli la spunta da OptionsShow hints on click. Altrimenti ogni clic fuori da un hotspot fa lampeggiare riquadri blu sul design, e in video sembra un errore.
  2. Nascondi l’interfaccia di Figma. Scegli OptionsHide UI per togliere la barra degli strumenti e il piè di pagina.
  3. Scegli una scala. Senza cornice del dispositivo puoi scegliere Actual size (100%), Responsive, Fit width, Fit width and height o Fill screen. Con la cornice, il selettore del dispositivo in basso offre opzioni come Fit device on screen. Premendo Z passi dall’una all’altra.
  4. Passa a schermo intero se registri tutto lo schermo. Usa l’icona dello schermo intero nella barra della presentazione.
  5. Parti dal flow. Scegli il flow nella barra laterale, poi nascondi la barra perché non finisca nell’inquadratura.

Registra la finestra, non lo schermo

Registra solo la finestra del browser o di Figma che mostra il prototipo. Le registrazioni a schermo intero catturano il Dock, le altre schede e la notifica che avevi dimenticato.

Su macOS puoi farlo con Screenshot: premi ⌘⇧5, scegli lo strumento “Registrazione di una parte dello schermo” e disegna la cornice intorno al prototipo. La nostra guida su come registrare una finestra o una parte dello schermo vede tutte le opzioni, compresi più monitor. Se registri sul Mac per la prima volta, parti da come registrare lo schermo su Mac.

Prima di iniziare, passa la checklist di 60 secondi prima di registrare: notifiche spente, schede non pertinenti chiuse, contenuti di prova nel design invece dei dati di un cliente reale.

Clicca più lentamente di quanto ti venga naturale

Tu sai dov’è ogni hotspot. Il tuo cliente no. In video, il tuo ritmo normale sembra frenetico.

  • Fermati su ogni schermata un secondo o due prima di cliccare. Di’ a cosa serve la schermata.
  • Porta prima il puntatore sul bersaglio, poi clicca. Chi guarda vede dove stai andando prima che succeda.
  • Passa sopra gli elementi apposta. Per gli stati hover, spostati sull’elemento, resta fermo e di’ cosa cambia.
  • Aspetta le transizioni. Transizioni animate e overlay hanno bisogno di un attimo. Cliccare durante un’animazione può saltarla o finire sull’hotspot sbagliato.
  • Non scorrere in fretta. Se un frame scorre, scorri a piccoli passi e fermati dove vuoi che il cliente guardi.

Se il cliente potrebbe guardare dal telefono, i clic evidenziati e un po’ di zoom sui controlli piccoli aiutano. Spieghiamo quando aiuta e quando fa girare la testa in zoom automatico nelle registrazioni dello schermo.

Racconta le decisioni, non i clic

“Ora clicco su Continua” non dice al cliente niente che non veda già. Il valore di una presentazione è il ragionamento che altrimenti spiegheresti in riunione.

Una struttura semplice per ogni flow:

  1. A cosa serve questo flow: “Così un cliente che torna modifica una prenotazione.”
  2. La decisione che c’è dietro: “Abbiamo spostato il calendario al primo passaggio, perché il brief dice che quasi tutte le modifiche riguardano la data.”
  3. Cosa è ancora aperto: “La schermata di cancellazione è provvisoria finché non abbiamo il testo della policy.”
  4. Cosa ti serve in risposta: “Puoi controllare i testi del secondo passaggio?”

Presentazione del prototipo, primo giro

Quando mandi un prototipo cliccabile per la prima revisione · Circa 3 minuti

Ciao Marco, questa è la prima versione cliccabile del flusso di prenotazione. Te lo faccio vedere una volta dall’inizio, poi puoi provarlo tu con il link qui sotto.

Partiamo dalla pagina di prenotazione. La modifica principale rispetto ai wireframe è che la data viene per prima, perché è quello che le persone cambiano più spesso. Quando tocchi una data, gli orari disponibili compaiono sotto, senza una nuova schermata.

Due cose sono ancora provvisorie: l’email di conferma e il testo della policy di cancellazione. Da te mi serve un sì o un no sull’ordine con la data per prima, e le modifiche ai testi che faresti nel passaggio di riepilogo.

Per saperne di più su come strutturare la presentazione di un design, compresi il secondo giro e i confronti prima-dopo, leggi come presentare un design al cliente senza una riunione. Se il video è un feedback e non una presentazione, come dare feedback su un design con un video ha una struttura diversa.

Quando hai finito, manda due cose in un solo messaggio: il video e il link al prototipo Figma per i clienti che vogliono cliccare in giro. Metti nel messaggio anche la domanda a cui ti serve una risposta, non solo alla fine del video.

Slack· a Marco

Ciao Marco, ecco una breve presentazione del flusso di prenotazione. Qui sotto trovi il link al prototipo se vuoi provarlo tu. Una domanda: ti va bene la data per prima? Un sì o un no entro venerdì ci tiene nei tempi.

Flusso di prenotazione, prima versione cliccabileJustRec · 2:48

Se mandi spesso questo tipo di video, la nostra pagina su come mandare video ai clienti spiega come funzionano il link e la pagina per il cliente, e la guida ai video asincroni per comunicare con i clienti spiega quando un video sostituisce una call.

Domande frequenti

Figma può registrare un prototipo come video?

No. Figma riproduce i prototipi in modalità presentazione e in anteprima, ma non ha un'esportazione video integrata. Registri la finestra della presentazione con un registratore dello schermo, come Screenshot di macOS, QuickTime o un'app dedicata.

Come nascondo la barra degli strumenti di Figma quando presento un prototipo?

In modalità presentazione apri il menu Options e scegli Hide UI. Nasconde la barra degli strumenti e il piè di pagina, e aggiunge anche un parametro all'URL, così chiunque apra quel link vede il prototipo senza l'interfaccia.

Come mostro un prototipo Figma senza la cornice del dispositivo?

Deseleziona tutto sul canvas, apri la scheda Prototype nella barra laterale destra e scegli un'opzione di dispositivo senza cornice, come Custom Size (Fit) o Presentation (Full), invece di un modello di telefono o tablet.

Quanto deve durare la presentazione di un prototipo?

Quanto la decisione che ti serve. Un flow con le ragioni dietro di solito sta in due-quattro minuti. Se hai più flow, registra un video per ciascuno, così il cliente può rispondere su ognuno separatamente.

Meglio mandare il link di Figma o un video?

Funzionano meglio insieme. Il video spiega perché il design funziona così; il link al prototipo permette al cliente di cliccare in giro dopo. Molti clienti guardano solo il video, quindi fai in modo che stia in piedi da solo.

Scritto da

Nicolas Ricardi

Maker of JustRec, at Nube

Nicolas makes JustRec at Nube, a web studio in Italy. He built it for the videos Nube sends to its own clients: design reviews, handovers and quotes explained in a few minutes instead of a meeting.

www.wearenube.dev
Video migliori