Dopo diverse sollecitazioni dalla comunità di Ui UX designer finalmente Adobe XD è in grado di incorporare, senza bisogno di plugin esterne, i file video all’interno dei propri progetti. I tuoi prototipi interattivi si arricchiscono ora di animazioni e video rendendo ancora più ricche ed immersive le esperienze di utilizzo agli occhi di clienti e utenti finali. In questo articolo vediamo quali formati video sono accettati, in particolare, capirai cosa sono i file lottie e come sfruttarli al meglio per i tuoi progetti UI UX in Adobe XD.
File mp4 in Adobe XD
Gran parte dei video che potete utilizzare nella nuova versione di Adobe XD sono i classici file mp4. Al momento Adobe XD ha imposto un limite di 15 MB per video.
Inserire un video mp4 in XD è veramente semplice, esattamente come per le immagini potete fare un trascinamento – drag and drop – del file video nel vostro progetto XD, oppure, procedere con la scorciatoia CMD+SHIFT+I e navigare fino alla destinazione dove avete salvato il video da inserire. Una volta inserito un video potete ridimensionarlo come se fosse un’immagine e stabilire il comportamento nella parte destra delle opzioni. In particolare, potete scegliere se il video verrà riprodotto automaticamente oppure in risposta ad un tap/click. Inoltre, potete tagliare la clip video direttamente in Adobe XD senza aver bisogno di Premiere o altri programmi di editing! Il pannello del video vi permette anche di scegliere un’immagine statica di presentazione del video e di mandare lo stesso in loop (riproduzione ciclica).
File lottie in Adobe XD
Un formato relativamente inedito che fa la sua comparsa in Adobe XD come file video supportato è quello LOTTIE Json, spesso noto con il nome Lottie File. Di cosa si tratta?
Cos’è un file Lottie Json
Il formato lottie json, più semplicemente LOTTIE, è una rivoluzione nel panorama dei formati video perchè, non solo è open source, ma è anche estremamente leggero, scalabile ed editabile. E’ un formato che può essere riprodotto su mobile e desktop ed è basato sul linguaggio JSON (javascript) motivo per il quale le animazioni salvate in questo formato sono sensibilmente più leggere se confrontate con il formato GIF. Nasce intorno al 2010 sfruttando le capacità di Adobe After Effects di generare codice in formato javascript per creare animazioni leggere e scalabili; negli anni ha subito diverse evoluzioni, fino ad oggi, quando il formato Lottie è diventato lo standard per le animazioni e le micro interazioni che si trovano su app e siti web. Sul sito Lottie potete trovare animazioni gratuite da scaricare ed editare gratuitamente.
Usare i file Lottie Json in Adobe XD
Esattamente come se fosse un’immagine (o un file mp4) basta fare un drag and drop del file LOTTIE nel progetto di XD per caricare l’animazione. Nel pannello delle impostazioni di destra potete scegliere il comportamento che l’animazione lottie deve avere, ad esempio, se deve essere riprodotta dopo un tap/click oppure mandata in playback automatico. L’animazione Lottie in XD può essere scalata senza problemi (il formato garantisce risultati cristallini a prova di qualunque ridimensionamento). In Adobe XD potete anche trovare una plugin ad hoc dalla quale scegliere migliaia di animazioni gratuite da inserire nel tuo progetto XD. Si tratta della plugin LottieFiles for Adobe XD.
Come si creano animazioni Lottie?
Attualmente il software più utilizzato per produrre file Lottie è Adobe After Effects integrato con la plugin gratuita BodyMoving. Il sito di Lottie Files vi mette a disposizione una libreria gratuita di animazioni e vi permette di testare le vostre creazioni fatte in After Effects. Chiaramente bisogna essere in grado di creare illustrazioni e animarle nei giusti prodotti Adobe prima di lanciarsi in questa attività.
Conclusioni
Da oggi Adobe XD rende le esperienze di prototipazione ux ancora più ricche ed immersive grazie alla possibilità di inserire file video in formato mp4 e nel popolare standard per il web e le app: Lottie Json. Se stai cercando un corso che ti permetta di svolgere la professione di ui /ux designer dai uno sguardo ai nostri corsi sull’experience design se invece vuoi creare le tue animazioni ed esportarle per il web ti consigliamo di sfogliare i corsi riguardanti Illustrator, After Effects e Animate.
