Dopo aver utilizzato Figma per un certo periodo di tempo siamo rimasti molto colpiti dalle sue caratteristiche e potenzialità.
Iniziamo
Figma è un tool web-based con collaborazione in real-time specifico per lo UI Design.
Funziona nei browser Web oppure si ha la possibilità di installare anche app native che consentono di lavorare offline.
I vantaggi dell’app web-based
- Non ci sono software da scaricare, installare e aggiornare.
- Non è necessario salvare e organizzare i file. Il lavoro viene salvato automaticamente in uno spazio condiviso nel cloud.
- Un URL può diventare l’unico riferimento che tutti possono visualizzare (dal cliente al Front-End developer). Il che significa … che non è necessario caricare e sincronizzare i file sorgenti.
- Riduce notevolmente i tempi di preparazione e reperimento di tutti gli assets e informazioni nel passaggio tra Designer e Front-End.
"Ma mio cugggino mi ha detto che Figma non è performante?"
No. Nel nostro caso abbiamo potuto verificare come in molte occasioni Figma sia stato più performante di Sketch anche lavorando con file di grandi dimensioni.
"Ma mio cugggino mi ha detto che Sketch ha molti più plug-in per migliorare il workflow."
Con l’utilizzo di Figma non abbiamo perso nulla di significativo in termini di plug-in e funzionalità.
Ecco solo alcune delle caratteristiche di Figma che ci hanno convinto ad adottarlo come tool di riferimento per il Design.
- Interfaccia simile e tutti i tool (in alcuni casi anche di più) presenti in altri software dello stesso tipo.
- Prototipazione. Figma ha una funzione di prototipazione simile a quella ottenibile tramite Craft + InVision.
- Commenti integrati. Chiunque abbia l’URL del progetto può aggiungere commenti, taggare le persone nei commenti, contrassegnare i commenti come risolti e persino integrarli con Slack.
- Chat vocale integrata. E’ possibile avviare delle chat vocali all’interno del progetto stesso.
- Passaggio al Front-End. Gli sviluppatori possono ottenere tutte le informazioni necessarie al coding, porzioni di codice già scritte dal tool e scaricare tutti gli assets dall’URL del progetto. In maniera molto simile a Zeplin, ma senza la necessità di dover sincronizzare le artboard ogni volta che i progetti vengono aggiornati.
- Sistema di versioning. Figma include la cronologia delle versioni per tutti i collaboratori. È possibile eseguire il rollback o il fork da uno stato precedente. In maniera molto simile a quello che è possibile fare con Git in fase di sviluppo.
- Collaborazione real-time. Più persone possono collaborare in tempo reale. Si possono visualizzare i cursori degli altri collaboratori a schermo, si può disegnare e fare commenti.
- Liveshare. Cliccando sull’avatar di qualcuno, è possibile vedere cosa sta visulizzando sul suo schermo e seguire il cursore.
- Componenti. Simile ai simboli di Sketch o di altri software, ma più flessibili e più facili da progettare, gestire e mantenere.
- Vincoli. Funzionalità simile al “Resizing” in Sketch, ma più intuitivo. Consente di gestire il posizionamento e la reazione al ridimensionamento degli elementi presenti all’interno del layout.
- Auto Layout. Una funzionalità molto utile per realizzare layout coerenti e componenti responsive.
-
Team Libraries. È possibile condividere e aggiornare raccolte di componenti
tra differenti utenti e differenti progetti. - Bonus: é possibile embeddare progetti Figma all’interno di Clickup.
Ora passiamo alla parte interessante ...
Grazie alle sue caratteristiche, Figma si propone come un tool completo e competitivo ma per noi è stato molto interessante capire come potesse migliorare il nostro flusso di lavoro.
Di seguito abbiamo evidenziato alcune peculiarità grazie alle quali Figma ha migliorato in maniera sostanziale il nostro workflow.
1. Possiamo interagire MOLTO più velocemente con clienti, collaboratori e sviluppatori grazie alla condivisione in tempo reale.
Possiamo eseguire una revisione del progetto, applicare i feedback del cliente, eseguire aggiornamenti rapidi e ottenere immediatamente un feedback sulle modifiche.
Il tempo tra le interazioni può essere notevolmente ridotto non avendo più tempi morti dovuti alla gestione dei file. Non c’è tempo sprecato per caricare o sincronizzare schermate, creare collegamenti di condivisione, esportare gli assets per lo sviluppo e così via.
2. Grazie alla collaborazione real-time la progettazione può diventare più inclusiva ed ottimizzata.
Il file stesso diventa un hub attraverso il quale ogni membro del team può collaborare alla realizzazione del progetto analizzando il design e le funzionalità che propone.
I designer e tutte le figure coinvolte possono lavorare in parallelo analizzando le diverse soluzioni possibili con tempi nettamente ridotti.
Ad esempio uno sviluppatore potrebbe individuare delle criticità nella realizzazione di alcune funzionalità e dunque portarle all’attenzione dei designer già in una fase preliminare, ottimizzando il processo di produzione ed evitando rework successivi.
Invece di frammentare la progettazione su più file e/o tools, ora c’è un “luogo” che può raccontare l’intera storia del progetto ed evolversi durante lo sviluppo del design.
Dunque Figma è diventato rapidamente una parte essenziale del nostro workflow.
Utilizziamo Figma dalla realizzazione di prototipi in wireframing e bassa fedeltà, fino alla fase di progettazione visiva dell’interfaccia.
Durante questo processo iniziamo a creare i componenti che entreranno a far parte della Team Library per l’utilizzo su più file.
Durante lo sviluppo della UI esaminiamo i componenti in diversi contesti. Così facendo il design di questi elementi può modificarsi nel tempo e vista la facilità nell’apportare modifiche globali su tutti i file, Figma garantisce un notevole risparmio di tempo.
3. Il passaggio dal design al codice sarà più rapido e coerente.
Questo perché con Figma è più facile strutturare i nostri progetti in modo che riflettano la loro realizzazione in fase di coding.
In questo ci vengono in aiuto i Frame.
Figma utilizza i Frame in sostituzione delle Artboard. La differenza sostanziale è che i Frame possono essere nidificati a differenza delle Artboards.
Quando posizioniamo un Frame più piccolo sopra un Frame più grande i due elementi vengono automaticamente raggruppati e l’elemento più piccolo diventerà “figlio” di quello più grande. I “figli” vengono posizionati e vincolati all’elemento “padre”. Una funzionalità alla quale si può fare un pò fatica ad abituarsi ma della quale, una volta padroneggiata, non si può fare a meno.
È possibile utilizzare i Frame per dividere una schermata in diverse sezioni e quindi nidificare i componenti (che sono essi stessi un gruppo di Frame nidificati) all’interno di queste sezioni. Questo approccio, combinato con il raggruppamento automatico, il posizionamento relativo e i vincoli, semplifica la creazione di progetti coerenti e reattivi.
Inoltre grazie alla funzione di Auto layout possiamo gestire facilmente e rapidamente il flusso degli oggetti all’interno di un Frame (in maniera molto simile a quello che nel coding può essere fatto tramite Flexbox e Grid Layout), i loro margini e i padding.
L’utilizzo di Frame è molto utile in fase di coding perché sono elementi molto simili ai contenitori HTML. Quando gli sviluppatori esamineranno i progetti, saranno in grado di vedere gli elementi dell’interfaccia utente nidificati nei rispettivi contenitori, il che significa che avranno un progetto più accurato a cui fare riferimento mentre scrivono il codice.
4. I design system realizzati sono più flessibili, più facili da utilizzare e da mantenere, con un notevole risparmio di tempo e una maggiore coerenza tra gli elementi che compongono la UI.
I Componenti rispetto ai simboli
Venendo da Sketch per noi è stato facile fare un paragone.
In Sketch è possibile utilizzare i Symbol Overrides per modificare il testo o cambiare i simboli nidificati. Ma se vogliamo cambiare qualcos’altro? Ad esempio la dimensione del testo, lo spessore del bordo o il colore di sfondo, dovremmo fare il Detach del simbolo e creare una versione leggermente diversa dello stesso elemento. Per risolvere questo problema possiamo annidare ogni variazione in un simbolo, ma il pannello degli overrides sarebbe da incubo. Con progetti di grandi dimensioni organizzare e mantenere tutte le variazioni diventa molto complicato.
Con Figma, è possibile avere accesso e modificare le proprietà di qualsiasi livello di un componente e delle sue istanze senza effettuare il Detach dal Master. Da qui in poi, ogni volta che viene modificata una proprietà di un livello nel componente Master, le modifiche verranno propagate solo alle istanze per le quali quella proprietà non è già stata sovrascritta.
Inoltre in Figma sono presenti le Variants una funzionalità grazie alla quale è possibile gestire diversi stati e/o aspetti di un componente con molta facilità e rapidità.
In che modo i componenti sono più facili da progettare rispetto ai simboli?
Prima di tutto, non dobbiamo preoccuparci di una struttura per il naming dei componenti (es. Icone/Ricerca) mentre li realizziamo. Possiamo rinominare un componente Master in un secondo momento e automaticamente verranno aggiornate tutte le istanze.
Per creare una categoria di componenti, è sufficiente raggrupparli in un unico Frame e assegnare al Frame il nome della categoria desiderata.
Dunque è molto facile riorganizzare i componenti anche in un secondo momento, semplicemente trascinandoli all’interno dei Frame desiderati riducendo di molto l’impegno necessario alla creazione dei componenti e del loro mantenimento.
In secondo luogo, l’accesso ai componenti in Figma è molto semplice. Ancora una volta non è necessaria una struttura di naming per navigare in un menu nidificato di categorie e componenti. Inoltre è possibile visualizzare i componenti come un elenco di miniature e per aggiungerne uno ad un layout o per sostituirne un’istanza, è sufficiente effettuare il drag & drop dell’elemento nell’area di disegno. Oppure è possibile copiare e incollare il componente principale per crearne una nuova istanza.
Un’altra cosa che semplifica la progettazione con i componenti è che in Figma è possibile modificare il componente principale nel suo contesto, piuttosto che dover andare in una pagina separata per apportare modifiche. In questa maniera a colpo d’occhio possiamo verificare che le nostre modifiche siano state applicate a tutte le istanze dell’elemento.
Gestione della palette colori, tipografia e stile.
Anche la creazione e la gestione della palette colori, della tiporafia e di alcuni attributi degli elementi propri di un progetto (anche compresi nelle Team Libraries), possono essere gestiti direttamente nell’area di disegno senza dover andare in una pagina separata o in un’altra area dell’interfaccia del tool durante il design della UI.
In conclusione.
Più utilizziamo Figma, più troviamo buoni motivi per continuare a farlo. Ci sono un sacco di dettagli e funzionalità la cui utilità si riesce a capire e conoscere solo utilizzando il tool. Nel complesso è uno strumento molto evoluto e ben progettato per UI Design.
