La presentazione dei progetti di design digitale ha attraversato una trasformazione significativa nell’ultimo decennio.
La vera innovazione nel campo delle presentazioni arrivò con l’ingresso degli esperti di After Effects nel mondo del design digitale. Questo approccio segnò l’inizio dell’era dei prototipi animati, sebbene la complessità tecnica e il tempo richiesto per queste elaborazioni spinsero il mercato a cercare soluzioni più efficienti. In risposta a questa esigenza, il settore vide l’emergere di software specializzati come Principle e Flinto, che si distinguevano per il forte focus sull’interazione, e InVision si affermò come leader indiscusso, introducendo funzionalità innovative per la collaborazione e la prototipazione.
Questa evoluzione ha portato all’attuale panorama del design digitale, dove piattaforme integrate come Figma hanno assunto un ruolo dominante. Figma ha ridefinito il processo di design, offrendo in un unico strumento funzionalità precedentemente distribuite tra diversi software. Il risultato è un’esperienza di design più efficiente e coesa, che permette ai professionisti di concentrarsi maggiormente sugli aspetti creativi e strategici del loro lavoro.
Cos’è un prototipo Figma
Dopo questa introduzione sulla storia della prototipazione, nel caso non siate abituati al termine, ecco cosa intendiamo per prototipo Figma: una replica il più simile possibile a quello che sarà la user interface finale, creata all’interno di Figma, quindi senza scrivere una singola riga di codice.
Un prototipo Figma è quindi una rappresentazione interattiva di un’interfaccia utente che permette di simulare il comportamento e l’aspetto di un’applicazione o sito web e consente di testare e iterare rapidamente le idee di design prima di procedere con lo sviluppo vero e proprio.
Il prototipo Figma offre una serie di vantaggi:
- Consente di visualizzare e interagire con il design in modo realistico, permettendo di identificare e risolvere problemi di usabilità in una fase precoce.
- Facilita la collaborazione tra designer e sviluppatori, in quanto permette di comunicare chiaramente le interazioni e i flussi previsti.
- Agevola la presentazione delle idee di design ai clienti o agli stakeholder, ottenendo un feedback immediato.
- Accelera il processo di design iterativo, permettendo di testare rapidamente nuove idee senza dover rifare tutto da capo.
Quando utilizzare i prototipi su Figma
In Trapstudio utilizziamo da sempre la prototipazione, soprattutto per la facilità con cui si riesce a mostrare il prodotto al cliente o al resto del team.
Figma impacchetta tutte le schermate in un unico link che viene aperto direttamente in una scheda del browser ed è interamente navigabile, sempre al suo interno. Altra cosa comoda è la possibilità di segnare commenti con il tasto [C] direttamente sulle schermate del prototipo, che verranno poi visualizzati per gli editor nella pagina dove tutti i frame sono disposti. I vantaggi sono enormi, soprattutto se si considera la facilità di visualizzazione per chi non ha lavorato direttamente sul prodotto.
Inoltre, nella metodologia Design Thinking, il quarto passaggio è la “visualizzazione”, incentrata sulla creazione di un prototipo interattivo ad altissima fedeltà, pronto per vedere come gli utenti di test si comporteranno. Per quanto riguarda il “quando farlo”, consigliamo di convertire anche solo una schermata in prototipo (basta impostare lo starting point su di essa – più avanti vi spieghiamo come farlo) per vedere subito l’effetto che fa limitatamente a una viewport e iniziare a condividerlo.
Pro tip: se dovete fare esperimenti e prove interne, non collegatele direttamente, ma solo quando sarete sicuri del risultato ottenuto: il rischio che il cliente vi veda in tempo reale a lavorare su pagine ancora work in progress rischia di essere elevato. Potrete anche impostare uno sfondo e un device intorno alla viewport, tipo iPhone 12 o iPad, per vedere la vostra schermata ambientata in un device che vi soddisfi, con un colore in background che gli renda onore (il grigio di solito va benissimo perché non distrae).Una volta iniziato con il primo passaggio, sarà molto facile collegare ogni link ad altre schermate e popolare tutto l’universo del vostro prodotto e la tentazione di renderlo sempre più completo e interattivo sarà altissima.
Come condividere un prototipo Figma
Figma permette di condividere in diverse modalità il prototipo realizzato con i diversi interessati al progetto.
È possibile condividerlo su invito tramite email, così da limitare al solo utente finale la visualizzazione, oppure renderlo pubblico, generando un link univoco, e permettere a tutte le persone in possesso dell’indirizzo di visualizzarlo.
Il tasto della condivisione si trova nella parte destra della barra superiore ed è di colore blu con scritto “Share prototype”. Cliccandolo, comparirà una modale con le diverse opzioni. Solitamente, nel caso in cui sia la prima volta che si condivide il progetto, la schermata tipo sarà un campo di input per i diversi indirizzi email a cui inviare l’invito e una select a dropdown con al suo interno le due opzioni di cui si parlava prima “Anyone with the link” (tutti quelli in possesso del link) e “Only people invited to this file” (solo le persone invitate direttamente a questo file). È anche possibile limitare la visualizzazione al solo prototipo, invece che a tutto il progetto.
Selezionando questa opzione, il link generato sarà quello esclusivo del prototipo che avrete preparato. In ogni caso occorre fare attenzione perché a distanza di anni, per un utente minimamente pratico, è possibile risalire al file d’origine nonostante il link esclusivo al prototipo.
Pro tip: una volta condiviso il link, ogni volta che effettuerete delle modifiche, queste verranno direttamente applicate allo stesso file. Questo significa che il link sarà sempre valido e che non dovrete inviare nuovamente il link agli utenti.
Pro tip: attenzione a condividere il prototipo da pagine interne e non da quella iniziale. Il link generato è estremamente preciso e se ci si trova dentro un flusso avviato, ad esempio un’ipotetica schermata Modale di acquisto – 5, quando l’utente riceverà il link e lo aprirà, si troverà esattamente lì. Conviene quindi premere il tasto di condivisione quando si è all’inizio del prototipo o, come facciamo in Trapstudio, creare una pagina di indice con tutte le varie sezioni linkate e condividere da lì.
Selezionare uno o più starting point
Questa funzionalità permette di creare diversi starting point all’interno della stessa pagina. Questo, all’atto pratico, significa che potrete creare dei punti di accesso diversi per la visualizzazione desktop, tablet e mobile. Oppure marcare dei bivi nel flusso, in modo tale che si possa cambiare la scelta senza bisogno di partire da zero (solitamente premendo il tasto [R]) o chiudendo e aprendo il link.
Per poter assegnare gli starting point, non serve far altro che entrare in modalità Prototipo dal file Figma – selezionando la tab “Prototype” nella sidebar di destra. Se non avete selezionato nulla, la tab risulterà vuota. Tuttavia, selezionando un frame specifico, compariranno le opzioni che fanno al caso nostro. La voce da selezionare è “Flow starting point” e serve per attribuire la proprietà di Starting point al frame desiderato. Potremo dargli un nome sia dal pannello della sidebar sia che dalla label che comparirà (quella blu con il triangolo del play) facendo doppio clic sopra.
Ipotizziamo di aver individuato diversi punti d’accesso e di averli anche rinominati: come si tradurranno queste impostazioni nel prototipo vero e proprio? Ci troveremo con una sidebar a sinistra contenente un indice che comprende tutti gli starting point. Selezionandone uno verremo direttamente portati alla pagina collegata. Soluzione ottima per tenere tutto il progetto in un unico posto.
Noi, per esempio, usiamo questo tipo di approccio ad “indice” per dividere i diversi flussi del progetto. Quindi, in caso di un eCommerce, avremo flusso homepage, flusso carrello, flusso checkout e flusso account.
Pro tip: ricordate che nel paragrafo precedente abbiamo detto che in Trapstudio creiamo una pagina di indice come partenza del prototipo? Un consiglio aggiuntivo: se avete diversi punti di accesso, questo porta ad avere un indice con diverse voci. Fate corrispondere le pagine dell’indice ai nomi attribuiti ai diversi starting point: in questo modo l’utente avrà una navigazione sicuramente più fluida e semplice. Ricordatevi anche di mettere in piccolo, da qualche parte nella pagina in maniera poco invasiva, anche un piccolo testo (ad esempio “Torna all’inizio”) per permettere agli utenti di tornare velocemente indietro all’indice e ricominciare a navigare verso altre sezioni. Si tratterà quindi di creare un bottone e collegarlo a una sezione di partenza o di snodo: fate in modo di rendere la navigazione più fluida possibile per tutti i vostri stakeholder.
Pro tip: è possibile modificare gli Starting point. Possiamo prendere la label blu con l’icona del triangolo e trascinarla su un’altra artboard, oppure, dal pannello “Prototype” a destra, possiamo premere l’icona [-] per rimuovere lo Starting point esistente.
Dimensionare correttamente la viewport
Figma offre la possibilità di mettere il prototipo all’interno di una viewport specifica e volendo è possibile aggiungere la canvas di un Mac, di un iPhone o altri device moderni. Quello che bisogna tenere in considerazione è che questa opzione non è da sottovalutare – soprattutto dal punto di vista tecnico.Di base, la visualizzazione del prototipo avviene incasellando nello schermo del nostro browser (o client) l’artboard con una larghezza fissa.
Tuttavia, l’altezza viene centrata in verticale. Questo significa che se abbiamo una schermata corta e a seguire una lunga, le vedremo completamente diverse come ingombri. Fissando invece l’altezza della viewport, saranno sempre allo stesso livello e passando da una pagina all’altra, non avremo quell’effetto “fisarmonica” che solitamente genera confusione e infastidisce l’utente.
Pro tip: Figma non solo ci lascia scegliere un device, ma ci permette anche di utilizzare la nostra opzione preferita: “Custom size”. Selezionando questa voce, potremo impostare una larghezza e un’altezza definiti (è buona norma che segua le impostazioni del frame usato – es. 1440 x 1024 nel caso si stia lavorando con la dimensione standard per il browser). Quando andremo a visionare il prototipo, sarà incasellato ma senza avere intorno un device. Questa opzione non distrae e permette di avere più spazio disponibile per visualizzare il progetto anche su schermi più piccoli.
Utilizzare componenti e stili di livello
Questo paragrafo più che altro è un insieme di Pro tip che spero possano tornarvi utili in futuro. In Trapstudio abbiamo generato – senza esagerare – prototipi composti da quasi 200 schermate. Questo si traduce nella necessità di lavorare con del metodo a monte. Immaginate che ci sia da modificare l’header del sito che avete progettato. Se non avete creato il componente del header all’inzio, rischiate di dover perdere una montagna di tempo anche per la sola modifica di un colore. Quindi, quello che vi suggeriamo è:
- Fate componenti per tutto e razionalizzateli. Se dovete fare più versioni (es. header aperto, chiuso, su sfondo bianco e colorato), sfruttate le Varianti di componente. Cosa sono le varianti di componente? Ne parleremo in un altro articolo dedicato esclusivamente ai componenti, quindi abbiate pazienza. Tuttavia, Figma offre un ottimo playground di test per capirli con facilità, quindi andate sul link della Community, duplicate il file e fate diversi esperimenti con le varianti di componente.
- Utilizzate gli stili di livello per i colori, le ombre e soprattutto la tipografia. In questo modo, cambiare colore o un’interlinea sarà veloce e (quasi) indolore. In caso stiate lavorando con un design system, probabilmente per i colori state usando le variabili. In ogni caso, siate organizzati prima di mettere mano ai prototipi.
- Nominate i vostri elementi con pattern logici e non limitatevi a lasciare il classico “Copy of group 51”. Ne va della vostra velocità di esecuzione in fase di modifiche (e quelle ci sono sempre, anche se la presentazione è andata benissimo e tutti gli stakeholder sono soddisfatti).
Ragionare per happy flow
Quando si vanno a creare prototipo complessi, è facile perdersi in decine di micro-interazioni e casistiche diverse. Questo però, all’atto pratico, risulta controproducente. Nello specifico, immaginate un form di registrazione con 4 check button da premere per confermare le policy, i termini eccetera. Premerli la prima volta conferisce sicuramente realismo al prototipo, tuttavia, alla sesta volta che si naviga il prototipo, questo risulta essere solo una parte che fa perdere tempo a noi e, soprattutto, a chi deve visionarlo.
Quello che abbiamo adottato in Trapstudio è un approccio da Happy flow: il flusso è quello della navigazione ideale dove tutto va bene, tutto è già spuntato e non compaiono mai messaggi di errore perché l’utente si ricorda sempre la propria password o il prodotto da mettere nel carrello è sempre disponibile. Quello che possiamo fare, nel caso fosse necessario presentare tutte le casistiche, è creare due diversi starting point, dove in uno conduciamo l’utente al Happy flow e nell’altro presentiamo micro-interazioni per errori e segnalazioni. In questo modo è possibile avere un flusso rapido e uno più dettagliato.
Farete risparmiare molto tempo a tutti gli utenti coinvolti sul progetto.
Creare una connessione
Creare una connessione è estremamente facile: selezionate la tab “Prototype” nella sidebar di destra e poi selezionate un frame, un bottone o una voce di menu. Noterete subito che il riquadro della selezione presenterà un cerchio nel lato di destra. Cliccandolo e trascinandolo, comparirà una freccia che potremo linkare a qualunque frame all’interno della stessa pagina (Figma non permette – ad oggi – di linkare a pagine diverse). Le opzioni possibili sono moltissime, ma solitamente vi basterà usare quella di default:
- On click
- Navigate to ⭢ [nome della artboard]
- Animation: Instant
Nel 90% dei casi, non vi servirà altro.
Pro tip: i componenti istanze ereditano non solo gli elementi e gli stili, ma anche i link prototipo. Potete sfruttare questa logica in moltissimi modi. Il primo e più importante è con i componenti ricchi di voci per la navigazione, come ad esempio un Header. Dal componente principale, potete linkare ogni voce all’artboard corrispondente. Duplicando poi le istanze, queste manterranno tutte quanti gli stessi link, senza doverli generare nuovamente. Attenzione che però è vero anche il contrario: se copiate un bottone senza rendervi conto che è collegato ad altre pagine, lui manterrà il link e dovrete correggerlo perché farà deviare il prototipo.
Pro tip: Come già detto in precedenza, non è possibile linkare da una pagina all’altra (aree di lavoro), quindi il suggerimento è quello di tenere sempre i componenti principali fuori dalle artboard e usare solo istanze nel prototipo. Non è neanche possibile linkare all’artboard dove è collocato il componente, questo significa che un Main component header creato nell’artboard di Homepage del progetto, non può linkare il classico logo-che-ci-riporta-in-home presente al suo interno alla pagina Homepage. Un altro motivo per tenere fuori dalle artboard i componenti principali.
Pro tip: spesso capita di essersi dimenticati di aver già linkato un elemento. Figma non può gestire due On click all’interno dello stesso elemento (non esistono, giustamente, sul web o nelle app, bottoni che se cliccati ci portano in due pagine diverse). Detto questo, nella tab “Prototype” di destra, avremo un elenco di tutti i link presenti sull’elemento selezionato. C’è un’icona di [-] che permette di rimuovere il vecchio link, così da crearne uno nuovo. Questa è una funzione utile soprattutto quando si opera con le istanze di componente. Rimuovendo i vecchi link, è possibile creare eccezioni alla navigazione.
Pro tip: una della funzionalità più comode introdotte da Figma nella prototipazione è quello che viene definito “instance swap”, ossia è possibile cambiare lo stato del componente con un’interazione specifica.
Quello che occorre è avere una variante di componente (ipotizziamo, come da esempio qua sotto, un bottone ghost e fill, entrambi con la loro proprietà – quindi “ghost” e “fill”). Poi occorre essere in modalità Prototype e selezionare uno degli elementi all’interno della variante. Nel momento in cui collegheremo (sempre come da esempio qua sotto) il primo bottone con il secondo, potremo impostare diversi trigger per il cambi di stato. Potremo metterlo al hover, al click, sul long press eccetera. Facendo così, avremo modo di dare profondità e realismo al nostro prototipo, impostando hover dei link, click per chiudere le modali o tendine di menu che si aprono.
Prototipazione avanzata
Come abbiamo visto finora, realizzare un buon prototipo richiede organizzazione e tempo. Una volta che avrete trovato la vostra operatività e il vostro giusto ritmo, potrete rifinire quello che sono le interazioni create.
Se quanto visto e letto finora è stato compreso e vi ha incuriosito, ora spiegheremo brevemente quello che è possibile fare a livello avanzato.
È possibile utilizzare tantissime impostazioni specifiche per modulare le animazioni e muove gli oggetti dove più si desidera.
Quello che vedete nella foto qui sotto sono le impostazioni base che compaiono una volta collegato un frame con un altro, nel caso voleste esplorare tutto quello che viene offerto.
- Trigger serve per impostare il tipo di evento che lancia il link. L’esempio più classico è elemento [bottone] + trigger [click] = cambio pagina. Tra i vari trigger più usati ci sono On click, hover, after delay e il controller (il pad delle console).
- Action si occupa di definire cosa fa il link una volta attivato. Navigate to porta l’utente in un altro frame, ma ci sono diverse altre opzioni, come l’apertura di un overlay o un [BACK] al frame precedente.
- Destination non è altro che il frame dove punta la freccia del link. Si può scegliere manualmente – trascinando la freccia, oppure selezionado il frame dalla select specifica.
- Animation determina il tipo di animazione che ci sarà nella transizione dal frame A al B. Instant, come dice la parola, è immediato. Ci saranno poi Dissolve, Smart Animate (che vediamo tra poco) e i classici Move In, Move Out eccetera. Ognuno di questi parametri porta con sé diverse impostazioni aggiuntive, come ad esempio il tempo – espresso in ms (millisecondi), il tipo di animazione (bouncy, quick eccetera). Per una questione di comodità, esplicitiamo queste opzioni con la sezione Smart Animate fra poco (vedi la voce Durata e Transizioni). Come visto, l’arsenale a disposizione è abbastanza corposo e si possono simulare diversi pattern di animazione UI presenti oggi sui prodotti digitali. Più spenderete tempo a rifinire questi parametri e più sarà possibile raggiungere un livello di realismo elevato.
- Reset scroll position permette di arrivare sul frame a cui punta il link direttamente dalla posizione su asse Y di 0 (in cima alla pagina, per intenderci). Questo perché è possibile scrollare di 2000 px verso il basso, cliccare il link del prototipo e trovarsi in un nuovo frame sempre a 2000px in basso.
- Reset component state permette di portare l’elemento al suo stato di partenza. Facendo sempre l’esempio del bottone: nel caso in cui abbia un effetto “on click” per cui si scurisce una volta premuto, selezionando questa opzione, nel frame successivo sarà ripristinato come prima di essere premuto (cancellando, di fatto, lo stato “on click” dove diventa più scuro).
Come già detto, in mezzo a tutte queste opzioni, Figma permette di usare lo “Smart animate” nella select “Animation”.
È una funzionalità molto interessante ma che – a nostro avviso – richiede ancora di essere rifinita. Noi la usiamo in pochi casi, come ad esempio nella creazione di loader animati e transizioni di colore lievi. In questo articolo vi daremo una spiegazione generica su quello che è possibile fare, ma vi suggeriamo di cercare all’interno della community esempi pratici sul suo utilizzo. Ne troverete anche di estremamente creativi!
A cosa serve Smart Animate?
Smart Animate è una funzionalità di Figma pensata per rendere le transizioni tra frame più fluide e realistiche. È possibile animare automaticamente i cambiamenti tra due frame, con il vantaggio di una gestione intelligente degli oggetti, direttamente da parte del software. Tra le diverse cose possibili, Figma riconosce le differenze tra elementi corrispondenti nei vari frame e cerca di creare un’animazione che collega queste modifiche in modo naturale. Non sempre ci riesce su livelli di complessità alti, ma su elementi semplici il risultato è ottimo.
Durata e Transizioni
Per la durata, c’è un controllo totale (le informazioni presenti in questo paragrafo valgono per tutti gli altri tipi di animazioni, non solo lo Smart Animate): puoi scegliere per quanto tempo la transizione deve svolgersi. Di solito, animazioni brevi e immediate sono ideali per un’esperienza più immediata (200 – 500ms), mentre animazioni più lunghe possono essere utili per far percepire il loading e il sistema che sta lavorando in background. Insieme alla durata, il tipo di transizione definisce il tipo di animazione. Figma offre diverse curve d’interpolazione, come “Ease In”, “Ease Out”, “Ease In and Out” e “Linear”. Ad esempio:
- Ease In accelera gradualmente all’inizio e si ferma bruscamente, perfetto per azioni come pannelli che entrano nel frame.
- Ease Out è l’opposto: parte veloce e rallenta, spesso usato per elementi che escono dallo schermo.
- Ease In and Out è bilanciato e produce un movimento uniforme e naturale, utile per transizioni fluide.
- Linear è costante e uniforme: va bene per animazioni che non devono attirare troppa attenzione.
Queste sono definite curve dell’animazione, ossia il descrivere esattamente – nella timeline che porta dal punto A al punto B, come ogni singolo frame viene attraversato (in questo caso parliamo dei frame visivi tipici dei video e non dei frame che Figma intende come gruppo). È possibile creare curve custom o prendere altri preset – come ad esempio Gentle, Bouncy e Quick. Vi suggeriamo di provarli tutti e vedere cosa fa più al caso vostro. Combinando il tipo di curva con la durata in ms, si possono ottenere svariati effetti che è impossibile racchiudere in un singolo articolo.
Matching Layers e Smart Matching
Smart Animate si basa su un principio di matching dei layer: riconosce gli elementi con lo stesso nome o le stesse proprietà tra due fotogrammi e li abbina automaticamente. Se hai due pulsanti o elementi testo con lo stesso nome, Figma li considera “correlati” e crea una transizione tra di essi, anche se il loro stile o la posizione cambia. Ciò significa che puoi animare trasformazioni di dimensione, posizione, opacità e rotazione senza dover creare frame extra o configurazioni complesse. Funziona anche con un livello visibile e lo stesso invisibile nel frame successivo. Figma lo leggerà come “questo livello – con le impostazioni che mi sono state date – deve scomparire. Di conseguenza, si può far scomparire una notifica toast in 500ms con Animation gentle tra un frame e l’altro.
Sovrapposizioni e Maschere
Smart Animate è compatibile anche con le sovrapposizioni e le maschere, il che lo rende particolarmente utile per design complessi. Ad esempio, puoi creare un’animazione per una barra di progresso che si “riempie” gradualmente o un elemento che appare e scompare dietro una maschera, creando effetti visivi interessanti e fluidi senza dover gestire manualmente ogni stato. Ovviamente la preparazione è molto più lunga del risultato finale. Valutate bene se è necessario dedicare 10, 20 o 30 minuti a rifinire un loader che – in fase di presentazione – si riempirà in 3 secondi per poi passare alla pagina successiva.
Best Practices per Smart Animate
Per usare Smart Animate al meglio, è consigliabile dare nomi coerenti ai layer e fare attenzione alla struttura del design. Più l’animazione è breve e chiara, migliore sarà l’esperienza utente; considera di usare Smart Animate solo dove serve effettivamente migliorare la comprensione dell’interfaccia.
Conclusioni
Come visto fin qui, a toccare l’argomento dei prototipi si rischia di aprire un vero e proprio vaso di pandora, ricco di possibilità e frame creati apposta per rendere il più fluido possibile un passaggio. Nel caso l’argomento vi abbia appassionato, cercate nella community esempi e pattern validi, così da replicarli ottimizzando i tempi. Non tutte le animazioni funzionano sullo stesso progetto e non tutte devono essere integrate. Come detto qualche paragrafo più sopra, la maggior parte delle vostre transizioni saranno Instant da A a B e va benissimo così. L’ultima cosa che si vuole è restare schiacciati dal peso delle migliaia micro-interazioni che noi stessi abbiamo creato.
Tuttavia, tenete sempre a mente questo: i prototipi non sono solo per gli stakeholder, ma anche per i dev all’interno del team. Trovare una quadra è fondamentale per ridurre al minimo la frizione fra mockup e handoff. Usare questa funzionalità per descrivere al team di sviluppo un pattern di navigazione, l’elenco dei percorsi disponibili nel header o come una transizione viene intesa (estrapolandola dalla UI stessa come nel caso dei bottoni) spesso è più che sufficiente e produttivo.