Con Figma il design diventa più collaborativo

Scriviamo questo articolo un anno dopo l’approdo di Figma al Santagostino.

Figma è un tool per la progettazione di interfacce. Si tratta di uno strumento che, dalla realizzazione di wireframe, UI e prototipi navigabili, copre tutta la lavorazione del design di siti web e app.

In questo articolo raccontiamo dei vantaggi che Figma ha portato nell’attività di design e sviluppo al Santagostino.

Come e perché ci siamo innamorati di Figma

Iniziamo dal principio: fino a un anno fa persone diverse utilizzavano strumenti diversi. Chi lavorava con Sketch apprezzava la comodità d’uso dei componenti, chi lavorava con Illustrator o altre app Adobe, ne apprezzava l’immediatezza.

L’output, fosse un wireframe o un mockup, era sempre un file pdf o png: una carrellata di schermate con note tecniche e d’interazione, che venivano condivise a stakeholder interni e al team di sviluppo. Ogni nuova versione era un nuovo file, con le ovvie conseguenze del caso: versioni diverse che circolavano e che nessuno poteva dichiarare “definitive” con certezza.

Non era una modalità di lavoro insostenibile, ma piuttosto frammentata.

Abbiamo iniziato a usare Figma, in prima battuta, perchè si tratta di una web app disponibile sia per macOS che Windows. Sketch purtroppo è disponibile solo per utenti macOS. Abbiamo poi scoperto altre caratteristiche che (secondo noi ma anche secondo tanti altri che hanno condiviso la propria esperienza online) lo rendono il tool più potente e performante nel suo genere.

Che best practice stiamo costruendo

L’adozione di Figma come strumento di lavoro nel team di design e sviluppo è avvenuta in un contesto particolare.

Ai tempi dei pdf citati sopra, il numero di persone che collaboravano sui progetti era molto ridotto. Nel tempo si sono aggiunti al team nuovi designer e nuovi sviluppatori. Avere strumenti di lavoro collaborativi e performanti, oltre che un metodo di lavoro condiviso, sono diventati punti cruciali.

Come team, abbiamo valutato le caratteristiche di Figma e, una volta scelto come strumento di design definitivo, abbiamo ragionato su come sfruttarlo al massimo, sia nel lavoro individuale che, soprattutto, in quello di team.

La fase di migrazione dei contenuti da Sketch a Figma non è particolarmente complessa, ma lunga.. e ancora in corso! Abbiamo deciso di creare un file Figma per ogni nostro touchpoint (sito, app, software di refertazione in uso ai medici..) e utilizzare le pagine per organizzare sotto-aree degli ambienti digitali, o per dividere i wireframe dai mockup.

Agli stakeholder interni e agli sviluppatori viene dato accesso al file in sola visualizzazione.

In questo modo accedono a tutte le informazioni necessarie, possono contribuire con commenti, ma non necessitano di una licenza a pagamento. Oltre alle 3 utenze business in uso ai designer del team, ne è stata comunque acquistata una quarta “jolly”.

La collaboratività porta solo vantaggi

Che Figma sia un tool di prototipazione che presta particolare attenzione alla collaborazione in tempo reale è ormai risaputo.

Quello su cui si riflette poco, invece, sono i grandissimi vantaggi che questa collaboratività può portare sia all’interno di un team di lavoro sia di un’intera azienda. E anche al Santagostino si sono percepiti questi vantaggi fin dal primo momento in cui si è deciso di adottare e usare Figma come unico software di prototipazione.

In particolare, questi benefici li si sono riscontrati su due fronti: quello interno, tra i vari dipartimenti aziendali e nel team di design, e quello esterno, con i vari fornitori.

Sul fronte interno, la comunicazione tra il dipartimento Digital, Design e Development e tutti gli altri si è notevolmente semplificata. Infatti, grazie alla funzionalità di condivisione dei prototipi e dei progetti di Figma, basta un link per mostrare il design creato a chi lo ha commissionato. Uno sguardo da “viewer”, un commento al disegno e il gioco è fatto: tutti sono al corrente di quello che si sta progettando. Infatti, ogni utente con accesso al progetto può commentare singoli elementi di un’interfaccia, citando anche altri membri del team di lavoro.

Anche all’interno del team di design, soprattutto nel momento in cui si progetta a “quattro mani”, Figma risulta essere di grande aiuto.

Seguire in tempo reale quello che il tuo collega sta facendo nel foglio di progetto è fondamentale per intendersi subito ed evitare incomprensioni.

L’altro fronte è quello esterno, ossia l’interazione con i fornitori e, nello specifico, con gli sviluppatori.

Anche in questo frangente, basta condividere i progetti tramite un link e gli sviluppatori possono prenderne visione come viewer.

Questa modalità permette loro di navigare tra le pagine di un progetto, tra le tavole di disegno che sono all’interno di esse, tra i livelli che li compongono e di vedere tutti i dettagli (misure, codice colore, spessore dei bordi, font ecc).

In piú possono accedere anche alla sezione “inspect” che permette di avere una prima overview del css dei diversi frame e degli elementi al loro interno, che sicuramente non sará quello definitivo e finale da tradurre in codice, ma puó essere comunque d’aiuto per orientarsi nella scrittura.

Infine, è doveroso parlare del grande vantaggio che possono apportare i prototipi interattivi nella comunicazione con i fornitori esterni all’azienda e con i dipartimenti interni, ma non solo.

Fare un prototipo interattivo partendo dalle interfacce disegnate e mostrarlo ai committenti puó essere un’arma vincente per dare un’idea reale di quello che sará poi il risultato finale del lavoro.

Inoltre i mockup navigabili sono uno strumento fondamentale per portare avanti gli user test.

Al Santagostino gli utenti finali (*siano essi pazienti, professionisti, membri dello staff.. *) sono stati spesso coinvolti in attività di user test.

Le funzionalità di prototipazione e animazione di Figma permettono di sottoporre ipotesi di UX molto più a monte di quanto non fosse possibile prima, quando l’utente finale poteva iniziare a interagire con lo strumento/prodotto solo post rilascio.

I feedback che raccogliamo favoriscono iterazioni e miglioramenti anche prima di dedicare effort nell’attività di sviluppo.