Figma: il miglior tool per realizzare il design di siti web e app

Cos’è Figma?

Figma è un tool per la progettazione di interfacce, che si rivolge principalmente ai web designer che hanno bisogno di un software studiato appositamente per realizzare il design di siti web e applicazioni.

Negli ultimi tre anni ho assistito alla nascita di numerosi programmi in grado di imitare o implementare le funzionalità di Sketch, famosissimo software per la progettazione di siti web e app disponibile su iOS.

Fra le tante applicazioni che ho visto nascere e poi morire nel corso di questi ultimi anni, la soluzione offerta da Figma è quella che reputo più convincente da ogni punti di vista: è completo, accessibile al 100% e addirittura più performante del vecchio Sketch.

Vantaggi offerti da Figma:

• accessibilità multipiattaforma;
• sistema di collaborazione in real-time;
• totale utilizzo degli strumenti responsive oriented per una progettazione ottimale, finalizzata allo sviluppo per il web;
• lavora in vettoriale;
• tutto questo è GRATUITO.

Accessibilità multipiattaforma

Figma è a tutti gli effetti considerabile come una web app, cioè un’applicazione che offre la possibilità all’utente di lavorare semplicemente attraverso il browser. Questo è uno dei vantaggi più interessanti che possiamo riscontrare in Figma perché permette di allargare il campo degli utenti a tutti coloro che abbiano accesso ad una rete internet. In pratica tutto l’universo può utilizzarlo!

Da questo punto di vista è evidente che Figma si discosta al 100% dalla filosofia imposta degli sviluppatori di Sketch che, al contrario, hanno creato un programma particolarmente “chiuso” e per giunta vincolato al mondo iOS.

Se sei interessato a lavorare offline non c’è problema, perché Figma mette a tua disposizione due applicazioni installabili rispettivamente su iOS e Windows. Tuttavia ritengo il fatto di poter utilizzare un tool del genere attraverso il browser, risparmiando quindi spazio su disco, sia una fig(m)ata che vale la pena di provare a prescindere dalle preferenze.

Figma offre inoltre una serie di altri vantaggi non di poco conto:

• Conservazione e organizzazione di tutti i tuoi design nel cloud;
• Non c’è alcun bisogno di salvare i tuoi progetti. Dimentica quindi i messaggi della morte come: “Photoshop CS4 ha smesso di funzionare“;
• Niente upload, sincronizzazioni con settantacinque postazioni diverse e quant’altro;
• Ogni progetto può essere rintracciabile attraverso un banalissimo URL che possiamo condividere con chiunque.

Insomma, siamo di fronte a un prodotto estremamente versatile, completo, professionale e che offre accesso alle sue migliori features già nel pacchetto gratuito.

 Le migliori features di Figma

Tutto quello che faresti con cinque o sei tool diversi, con Figma è possibile farlo nella stessa app.

Interfaccia: Hai una toolbar comodissima che mette a disposizione tutti gli strumenti utili a chi realizza i design di contenuti per il web. È incredibilmente facile da utilizzare, posso assicurarti che mi è bastato avere pochissima esperienza con un software di disegno vettoriale (Adobe Illustrator), per considerare il mio passaggio a Figma una vera e propria pacchia.

Funzione per il Prototyping

quando si realizzano app di contenuti multimediali, la progettazione di una buona esperienza utente gioca un ruolo fondamentale. La funzione prototyping di Figma permette al designer di progettare la navigazione e le funzioni principali dell’app, aggiungendo elementi interattivi al prototipo.

Addio “triste PDF inviato per email“. Benvenuta “simulazione interattiva dell’app che posso condividere con il cliente via URL“.

Collaborazione efficace designer/developer

Qualora ti trovassi in un’agenzia in cui i ruoli di designer e developer fossero ricoperti da due professionisti diversi, il developer potrà trovare tutte le informazioni in tempo reale sul progetto Figma. Avrà quindi indicazioni sulle regole CSS (ad esempio io uso spesso questa funzione per ricavarmi al volo il codice dei gradienti), potrà calcolare facilmente la distanza dal margine sinistro al destro, ricavarsi le icone, le immagini, verificare il comportamento dei componenti al resizing della pagina, ecc.

Sistema di commenting integrato

Puoi lavorare con il tuo team in modo efficiente grazie al commenting system che permette di aprire discussioni in determinati punti del progetto. La cosa ancor più interessante e utile è la possibilità di taggare le figure interessate allo sviluppo di quell’area (es. @creativecode), in modo che possano ricevere notifica dei vari suggerimenti o richieste di informazioni in arrivo dai collaboratori.

Versioning

Semplicemente puoi navigare nella cronologia delle modifiche per ripristinare stati precedenti, come si fa normalmente con le repository postate su GitHub.

Collaborazione in real time

Lavora con i tuoi colleghi in tempo reale e osserva gli spostamenti del loro cursore nel progetto per capire cosa stanno facendo esattamente. In sinergia con il commenting system sarai in grado di ottimizzare i tempi di produzione e di lavorare in sintonia con il tuo team incrementando nettamente la qualità del lavoro.

Sviluppo componenti riutilizzabili

Puoi creare ad esempio il tuo Header e riutilizzarlo tutte le volte che vuoi nei vari progetti, così da risparmiare tempo. Dal mio punto di vista, riuscire ad utilizzare i componenti in modo efficace migliorerà il tuo approccio al design di interfacce (scriverò un articolo a parte su questo argomento).

Responsive design

Grazie alla presenza dei constraints hai modo di effettuare il resizing delle pagine su cui stai lavorando in un perfetto responsive way. Esempio: hai una pagina con un footer… immaginando di dover inserire tanti altri contenuti, dovrai per forza estendere la dimensione della pagina in altezza. Fissando il constraint del footer su bottom, noterai che seguirà la base della tavola da disegno (che in Figma ha il nome di frame) dal momento in cui effettuerai il resizing.

La cosa sensazionale è che tutte queste funzionalità non sono a discapito delle performance che, anzi, restano pari se non superiori di quelle dei più blasonati software commerciali.

Utilizzo di Figma in una giornata lavorativa

State lavorando da qualche giorno, tu e il tuo collaboratore Graphic Designer, ad un progetto su una piccola azienda che produce birra. Scegli di applicare il font Lato ai titoli presenti in Homepage, ma il Graphic designer ha appena realizzato il banner da mettere nella sezione in evidenza, dove al centro c’è un bel titolo con il font Playfair Display.

A questo punto il Graphic Designer, che ritiene sarebbe meglio lavorare su una coppia di font Playfair Display – Lato, aggiunge un commento al progetto taggandoti. Una volta ricevuto notifica del suggerimento, valuterai la sua proposta ed eventualmente trasformerai i titoli della Home da Lato a Playfair Display. Dopodiché potrai archiviare il commento come risolto.

Il tempo impiegato per questa operazione è veramente insignificante rispetto a quanto accadrebbe lavorando su due progetti separati o sulla stessa postazione. Questo sistema ti permette di lavorare in una perfetta sinergia con il tuo team e il tutto avviene in tempo reale. Non dovrai attendere odiosi tempi di caricamento per l’upload dei cambiamenti o andare incontro a drammi nella sincronizzazione.

Come è usato Figma da un Web Designer

Se ti occupi dello sviluppo del sito web sia dal fronte design che dal fronte coding, Figma ti renderà molto più semplice la vita. Questo strumento infatti è stato progettato secondo una filosofia che riflette esattamente come, un tipo di design, dovrà essere trasformato in codice.

In questo senso è importante comprendere che ruolo giocano i frames di Figma perché possono essere interpretati, in ottica di sviluppo, come tanti <div> che possiamo annidare uno dentro l’altro.

In questo modo andremo a costruire già dal progetto Figma, una gerarchia di elementi HTML secondo una logica che rispecchierà in seguito lo sviluppo reale del sito.

Ti renderai conto che il progetto che stai realizzando con Figma non è banalmente un’idea grafica di come dovrà essere il sito web. È un lavoro che racchiude informazioni fondamentali anche per quanto riguarda la fase di sviluppo e produzione del sito web.

Un bravo web designer costruisce le pagine web secondo questo approccio, che gli consente di nidificare i vari frames, box e componenti Figma esattamente come farebbe con gli elementi HTML.

Presto scriverò su questo sito un tutorial per parlarti in modo più approfondito delle tecniche da adottare in Figma, proprio per chiarirti questi concetti.

Applicando i constraints ai frames avrai modo di regolare i parametri di scalabilità di ciascun <div>. Potrai gestire la distanza fra un elemento e l’altro grazie alle guide sensibili e lavorare su palette e librerie personalizzate per accelerare il flusso di lavoro.

A questo punto non puoi esimerti dal provarlo. Registra il tuo account gratuitamente sul sito ufficiale e prova a realizzare i tuoi design per siti web e app, vedrai che una volta provato Figma non potrai davvero più farne a meno.

Cerchi una guida per imparare a progettare siti web con Figma? Segui la nuova guida by Creative Code!