Figma: lo strumento per disegnare un’interfaccia utente

Che cos’è Figma

Fino a poco tempo fa, il concetto di collaborazione all’interno dei tool per interfacce utenti era ristretto alla possibilità di commentare i design ed altre piccole azioni. Grazie all’implementazione di Figma, invece, il flusso di lavoro è cambiato rendendo la condivisione più semplice.

Figma è infatti uno strumento di User Interface Design di tipo collaborativo estremamente flessibile e completa di pratiche funzionalità per condividere il proprio lavoro.
Considerato uno dei migliori strumenti a disposizione, permette di creare wireframe e prototipi di un’interfaccia grafica con facilità e proprio per questo è utilizzabile anche da chi non ha grandi competenze di grafica professionale.

Nello specifico, la piattaforma permette di:

• far comunicare persone diverse all’interno dello stesso progetto
• permettere agli sviluppatori di muoversi in autonomia
• mettere al centro il concetto di collaborazione
• portare novità e velocità nel mondo del design e dello sviluppo

La piattaforma mette a disposizione alcune risorse gratuite per accompagnare l’utilizzo ed introdurre gli aspetti fondamentali da conoscere quando si disegna un’interfaccia. Il suo obiettivo principale è quello di permettere di disegnare tutte le componenti del progetto in modo ottimale per migliorare l’esperienza d’uso e l’usabilità e dare una veste estetica piacevole.

Ad oggi, è disponibile solo in lingua inglese.

Come utilizzare Frigma

Dopo aver eseguito l’accesso alla piattaforma è necessario:

• importare un progetto o cominciarne uno da zero;
• selezionare il dispositivo per il quale si vuole creare il contenuto;
• utilizzare l’opzione Frame per ottenere la lista dei device o dei formati tra cui scegliere così da lavorare sulle dimensioni più “realistiche” possibile;
• inserire i vari componenti ed elementi (forme, immagini, testi, disegni) della UI che creano in automatico dei layer.

A questo punto è possibile creare dei team di lavoro che permettono di collaborare allo stesso progetto. Nella versione di Figma a pagamento è inoltre possibile condividere la libreria di componenti già pronte all’uso.

Dopodiché, per presentare il proprio lavoro ai clienti e/o collaboratori, sono disponibili più strade:

• esportare il progetto in diversi formati (jpg, png e pdf) così da avere dei file da condividere nella modalità che si preferisce;
• inviare un link d’invito ai collaboratori tramite la funzione Share e selezionare cosa potrà fare la persona invitata, scegliendo tra visualizzazione o modiifca;
• impostare diverse variabili, come il dispositivo da visualizzare tramite la funzione Prototype e le interazioni per automatizzare le transizioni su un frame specifico.

A questo punto, è possibile vedere in azione il design creato cliccando sull’icona Present o condividere il prototipo con il tasto Share Prototype.

Come abbiamo visto finora, Figma considera le Pagine come enormi aree di lavoro nelle quali si possono inserire frame, elementi ed altre componenti modificabili dal team di lavoro.

Altre funzioni estremamente utili offerte dalla piattaforma, che spiegano l’enorme successo che essa ha raggiunto, sono:

• versioning: permette di tenere traccia delle versioni precedenti del documento. Tutto quanto salvato in automatico costantemente ed è possibile visualizzare l’elenco di tutte le modifiche;
• prototipazione: consente di generare in modo semplice dei prototipi all’interno del documento e condividerli con il cliente senza che quest’ultimo posso accedere alle pagine di lavorazione;
• collaborare con altri: il materiale risiede nel cloud in uno spazio illimitato e permette di invitare collaboratori all’interno del progetto in pochi semplici passaggi;
• lasciare commenti e feedback: offre uno strumento molto pratico di scambio comunicazioni che permette di visualizzare l’elenco dei messaggi esistenti, con evidenziati i commenti ancora da leggere;
• ispezionare il CSS degli elementi: è possibile visualizzare tutte le proprietà lato codice così da riprodurli fedelmente;
• procedere ad una comparazione: è possibile affiancare le schede Figma con l’anteprima web del sito in via di sviluppo e trovare eventuali differenze;
• fare un’esportazione corretta: se lato design il lavoro è stato svolto con precisione, l’esportazione avviene con successo. In caso contrario, riporta problemi di visualizzazione. 

Vantaggi nell’utilizzo

Come abbiamo visto finora, la piattaforma Figma include una serie di funzioni per collaborare con colleghi e clienti e permette di trasformare il progetto in un vero prototipo in pochi passaggi.

Al contrario, molti software professionali di grafica contengono una miriade di funzionalità e strumenti che risultano essere per un Web Designer totalmente inutili. Mentre, al contrario, molte funzionalità che potrebbero essere realmente utili non sono neanche presenti.

Nonostante ciò, spesso ci si ostina ad utilizzare programmi inadatti e inutilmente complicati perché danno l’impressione di avere tutto nonostante questo non sia sempre un pregio. Software più piccoli ma mirati, come Figma, che hanno solo ciò che realmente serve mettono a disposizione qualcosa che sia pensato esattamente per la progettazione di siti web.

Ad ogni modo, qualsiasi tipo di programma deve essere interpretato come un mezzo attraverso cui realizzare le proprie idee nel modo più consono e strutturato possibile. Ma le abilità cognitive sviluppate e maturate nel tempo con l’esperienza nascono a prescindere da un software.

La sua conoscenza non permette in automatico di produrre lavori efficaci, ma dona le capacità tecniche per ottenere i risultati sperati.

A questo punto, non resta che iniziare a provare ed iniziare subito a lavorare sul proprio progetto e prendere confidenza con lo strumento!