Figma: con l’ultimo aggiornamento possiamo inserire i video nei prototipi

Figma, il software collaborativo di progettazione di interfacce utente e prototipazione lanciato nel 2016, ha annunciato il 21 Febbraio 2023 un aggiornamento che permette ai designer di aggiungere video ai prototipi interattivi.

È dunque finalmente disponibile una funzione per rispondere alla tendenza crescente di utilizzare video per prodotti digitali al fine di migliorare l’interazione degli utenti e garantire esperienze più immersive e (auspicabilmente) convertibili.

Dettagli e benefici dell’ultimo aggiornamento di Figma

Dalle demo dei prodotti sugli e-commerce fino ai reel di Instagram e TikTok, il video è diventato ormai una parte integrante delle nostre esperienze online, confermandosi come uno dei mezzi più potenti per comunicare informazioni e creare connessioni emotive con il pubblico.

Con la nuova integrazione video disponibile su Figma, possiamo portare i nostri progetti di design a un livello successivo.

Come utilizzare la nuova funzione di integrazione video di Figma? Una breve guida

1 – Formati supportati, dimensioni del video e limitazioni

Dobbiamo assicurarci, prima di tutto, che il formato e la dimensione del video che andremo ad inserire nel nostro prototipo siano supportati da Figma.

Figma supporta attualmente i formati MP4, .mov e WebM.

Sappiamo inoltre che I video devono avere una dimensione massima di 100MB ed essere necessariamente shape fills o comportarsi da tali.

Possiamo aggiungere ai nostri prototipi (finalmente!)  anche le GIF animate. Le GIF vengono riprodotte solo durante la visualizzazione di progetti e prototipi nella vista presentazione.

Veniamo alle limitazioni: ad oggi, il caricamento dei video nei prototipi è una funzionalità non supportata dall’App mobile Figma e disponibile solo per i team Education, Professional e Organization a pagamento. I collaboratori dei team principianti gratuiti possono modificare il video esistente in un file ma non caricarlo.

2 – Aggiungere video nei file

Figma non prevede un livello specifico per i video, poiché vengono considerati come un tipo speciale di riempimento. Proprio per questo, possiamo aggiungerli ad ogni vettore o forma.

Per importare un video nel file del progetto ci sono diversi modi:

• Trascinare e rilasciare il video dal dispositivo al canvas
• Usare il fill color picker, ovvero il selettore del colore di riempimento scegliendo poi l’importazione video
• Usare lo strumento Place image/video, per aggiungere video in blocco
• Copiare un video da un altro livello del file corrente o da un altro file
• Copiare il video dagli appunti e incollarlo nel canvas.

3 – Ridimensionare e posizionare il video

Dopo che il video è stato aggiunto al prototipo, possiamo modificarlo a nostro piacimento nei seguenti modi :

• Ridimensionare, ruotare e regolare le dimensioni di qualsiasi livello con video
• Ritagliare e riposizionare il video applicato ai livelli
• Regolare le opzioni video. tra cui la modalità di riempimento, la rotazione e le modalità di fusione
• Applicare maschere per mostrare solo una parte del video

4 – Prototipi con video

Dopo questi step, possiamo infine rivedere il nostro progetto con l’anteprima del prototipo nel tab Prototype della sidebar, per controllare come appare l’elemento video e andare a creare le interazioni.

Proprietà dei video

Selezionando un filmato, sarà disponibile una sezione Video nella scheda Prototipo. Questa sezione consente di impostare il comportamento di un video durante la navigazione verso il suo frame in un prototipo per:

• Selezionare la casella per riprodurre automaticamente il video
• Riprodurre in loop il video
• attivare o disattivare l’impostazione audio predefinita del video

Ultimo aggiornamento Figma: perché  inserire video nei prototipi è utile?

L’integrazione video ai prototipi aiuterà i designer ad avanzare proposte di design in grado di:

• Fare uno show off delle funzionalità di un prodotto: il video è lo strumento perfetto per mostrare come funziona un prodotto. Integrando video nei nostri prototipi, noi designer possiamo spiegare i prodotti in modo più coinvolgente.
• Creare introduzioni che catturano l’attenzione: i video creano connessioni emotive con gli utenti in modo immediato. Incorporando video-introduzioni nei prototipi, creiamo esperienze più memorabili che lasciano un’impressione duratura sugli utenti.
• Fornire un contesto: il video può dare un contesto di riferimento agli utenti. Ad esempio, possiamo inserire video che spiegano lo scopo di una funzione o mostrare tutorial su come utilizzarla.
• Migliorare la narrazione: i video riescono a raccontare una storia in poco tempo: possiamo servircene per creare una narrazione intorno a un prodotto o una funzione.
• Aumentare la retention: alcuni studi hanno dimostrato che gli utenti sono più propensi a ricordare le informazioni presentate in formato video rispetto a quelle testuali o di immagini. Aggiungendo video ai prototipi possiamo quindi aumentare la retention degli utenti e creare esperienze di apprendimento più efficaci.