Lottie è una libreria open source multipiattaforma (Android, iOS, Web) che consente l’utilizzo di animazioni vettoriali create con After Effects, esportabili in formato JSON grazie all’utilizzo del plugin “BodyMovin”; i file generati sono leggeri, human readable e modificabili anche con scarse conoscenze tecniche. Sono inoltre disponibili vari tool di supporto e di anteprima, come quelli presenti su LottieFiles, che offre tra l’altro anche una vasta gamma di risorse utilizzabili gratuitamente e la possibilità di condividere le proprie realizzazioni con gli altri utenti.

Le animazioni Lottie sono resolution independent, vengono renderizzate nativamente, senza alcun ulteriore effort a livello di codice o di design, e si comportano in maniera eccellente anche in termini di performance, di stabilità del frame rate e di utilizzo della memoria.

I principali software di design presenti sul mercato offrono tutti la possibilità di esportare risorse statiche dalle artboard e dai wireframe realizzati, tramite integrazione diretta come avviene con Adobe XD, e in parte con Figma, o tramite plugin (Sketch). Un software molto interessante a riguardo è ProtoPie, che offre la possibilità di utilizzare i file Lottie direttamente durante lo sviluppo del prototipo, consentendo anche la modifica di alcuni parametri riguardanti l’animazione e permettendo l’interoperabilità con gli altri elementi realizzati in fase di design.

L’utilizzo dei Lottie risulta particolarmente conveniente per la realizzazione di microinterazioni e per tutte quelle applicazioni che necessitano di asset multilingua, considerata la possibilità di modificare il testo originale o i colori; riguardo al testo sono presenti alcune limitazioni a seconda della piattaforma e del motore di rendering, ad esempio su web non è supportata la colorazione multipla all’interno dello stesso elemento testuale (il file risultante infatti una volta renderizzato risulterà di un’unica tinta).

Continuando a prendere in esame l’ambito web, buona parte delle animazioni più complesse, richiedono per la loro realizzazione l’utilizzo di framework (spesso datati), sequenze di immagini o video, di intervenire programmaticamente o tramite css, pratiche queste ultime che richiedono una solida conoscenza dei linguaggi utilizzati; ancora peggio, molte volte ci si ritrova ad utilizzare un mix tra tutte queste tecniche, che se non ben padroneggiate portano ad ottenere scarsi risultati, con l’effetto di far perdere importanza alle animazioni e alle microinterazioni determinate in fase progettuale; se infatti ci soffermiamo nell’ambito della UX e dell’Interaction Design, non dobbiamo pensare ad esse come un mero vezzo estetico, poiché hanno il compito primario di aumentare il coinvolgimento dell’utente e la sua focalizzazione sugli elementi della UI.

Un ultimo ma non meno importante vantaggio, che andremo ad approfondire nei successivi articoli, è dato dalla natura stessa dei file JSON che consentono di spostare dinamicamente il carico di lavoro dalla parte di design a quella di sviluppo e viceversa; inizieremo dal versante design, andando ad esaminare come possiamo, tramite After Effects, animare i componenti del nostro prototipo, ad esempio per definirne transizioni o cambi di stato, oppure come creare un'animazione da zero.