Cos’è Figma: caratteristiche principali
Figma è uno strumento di user interface design di tipo collaborativo, che permette di far comunicare persone diverse all’interno dello stesso progetto.
Se sei uno sviluppatore e ti stai chiedendo: “ma Figma cos’è?”, in questa guida ti mostreremo come usare Figma.
Fino a qualche anno fa, il concetto di collaborazione all’interno di questi tool era ristretto alla possibilità di commentare i design e poco più. Oggi, con l’adozione sempre più massiva di Figma, le collaborazioni sono diventate più semplice che mai e il flusso di lavoro è inevitabilmente cambiato. Hand off compreso.
Questa guida nasce con il preciso intendo di aiutare tutti gli sviluppatori a muoversi in autonomia fra le varie canvas, pagine e prototipi di Figma, tool che fa della collaborazione il suo punto di forza.
Abbiamo adottato una divisione per macro argomenti, alcuni molto tecnici, altri più generici, cercando tuttavia di tenere sempre il focus sul punto di vista dello sviluppatore.
Se siete curiosi quindi di iniziare a scoprire uno strumento estremamente flessibile e in grado di portare novità e velocità nel mondo del design e dello sviluppo, non vi resta che iniziare a leggere.
Organizzazione dei contenuti
Figma considera le Pagine come enormi aree di lavoro nelle quali si possono inserire Frame (cornici con dimensioni preimpostate che vengono utilizzate per simulare le dimensioni degli schermi), componenti, elementi ancora non raggruppati e tutto quello che vi può venire in mente. Possiamo trovare le Pagine nella sidebar di sinistra e rinominarle, aggiungerne di nuove, cancellarle o duplicarle in maniera libera.
Premesso che non esiste un modo corretto per gestire questi macro-gruppi, suggeriamo di suddividere le pagine in questo modo:
Organizzando le Pagine come entità operative, è possibile tenere il team aggiornato su cosa si sta lavorando e cosa non si deve prendere in considerazione.
In Trapstudio stiamo usando una divisione per revisioni, pagine scartate, pagine desktop, mobile e componenti in modo da sapere sempre dove recuperare i materiali utili allo sviluppo.
È inoltre possibile sfruttare la prima delle Pagine come copertina di progetto nelle anteprime del proprio account, impostando un’artboard a 1920x960px. L’effetto nella prima pagina di Figma è quello di un’organizzazione chiara e pulita.
Gestione dei componenti
Per chi ha confidenza con Sketch, i Componenti sono la stessa cosa dei Simboli. Per chi invece non lo conosce, occorre una piccola premessa.
Immaginate i Componenti come oggetti istanziabili: esiste un Componente master , rappresentato da un’icona con 4 piccoli rombi viola, e i Componenti instance, rappresentati da un’ icona con un grande rombo viola. Possiamo trasformare qualunque elemento o gruppo di elementi in un Componente e da lì duplicarlo per un numero illimitato di volte, creando delle istanze del componente master. Andando ad applicare modifiche al master, tutti i figli si riadatteranno di conseguenza. Immaginate di avere 16 artboard di diverse pagine dello stesso sito web e poter cambiare con una sola modifica l’elemento Header in tutte le pagine, ad esempio.
Apriamo una parentesi su di una feature all’interno del mondo dei Componenti di Figma: gli override.
Come abbiamo visto, andando a modificare il master, le istance si adattano di conseguenza. Tuttavia è possibile modificare le istance in maniera autonoma e rapida, come ad esempio cambiare un colore di sfondo o il font in un titolo. Questo porterà il componente istance a non essere più modificabile dal master in quella determinata sezione. Può essere quindi che non si riesca a vedere le modifiche applicate a una instance. In questo caso basterà cliccare di fianco al suo nome, nella sidebar di destra, sull’icona dei tre puntini e selezionare Reset overrides.
Tra le varie opzioni disponibili, c’è anche quella di portare le modifiche fatte sulla istance al main (Push overrides to main component) – che a sua volta poi andrà a modificare le istance. Questa funzione è comoda se si vuole testare delle modifiche direttamente in una schermata e poi, una volta convinti, aggiornare tutti i componenti.
Basterà modificare i colori, le dimensioni, i contenuti o i font-size nel componente master per modificare direttamente anche le sue istanze. Ammettiamolo: questa logica vicina al mondo dello sviluppo ci risparmia ore e ore di inutili modifiche meccaniche.
Abbiamo visto cosa sono i Componenti e adesso la domanda da farci è: esiste un modo per organizzarli e/o crearli in maniera logica ed efficace?
Partiamo dal presupposto che anche in questo caso non esistono regole scritte nella pietra, ma delle best-practice che possono tornarci utili a riadattare il nostro metodo di lavoro.
Il metodo che utilizziamo nella gestione dei Componenti Figma è direttamente ereditato dal mondo del CSS: BEM – Block Element Modifier, questo permette di utilizzare la stessa logica di organizzazione sia in design che in sviluppo.
Per chi non conoscesse BEM, il tipo di organizzazione segue questa logica:
- Block – un insieme di elementi (un header, un footer, un item prodotto)
- Element – la più piccola parte della UI (un radio, un check, un divider)
- Modifier – una variante che va a influenzare direttamente il Block o l’Element (un bottone disabilitato o un campo di input che presenta un errore)
Dalla foto si capisce bene come BEM si sposi perfettamente con il sistema di Componenti che Figma ci mette a disposizione. Inoltre, come se non bastasse tutta questa libertà organizzativa, è possibile nominare i Componenti in maniera granulare con l’utilizzo del segno / nel nome, così da poterli scegliere direttamente dalle artboard.
Un esempio classico è la creazione di un sotto-gruppo nei Block Scheda prodotto, per differenziare la scheda in promozione da quella esaurita. Andando a organizzare queste parti con una nomenclatura del tipo Block/Scheda prodotto/Promo e Block/Scheda prodotto/Esaurito, Figma identificherà Scheda prodotto come un gruppo al cui interno sono presenti Promo ed Esaurito. Andando ad inserirli nelle artboard, avremo la possibilità di passare da una all’altra
È possibile usare questo sistema per generare i Modifer, come ad esempio:
- Element/Button/Active
- Element/Button/Hover
- Element/Button/Disabled
Come si può vedere, gli stati CSS, che generalmente vengono considerati come pseudo-classi, li stiamo trattando alla stregua di un modifier: anche se non è corretto per BEM, aiuta a semplificare l’organizzazione del documento.
Stili di livello
Abbiamo parlato tanto di Componenti, ma tutto questo lavoro sarebbe incompleto se non parlassimo anche degli Stili di Livello.
Con gli Stili è possibile modificare direttamente gli elementi, e sono un insieme di impostazioni consultabili nel pannello di destra (che è quello delegato alle caratteristiche dell’elemento selezionato).
È possibile avere una panoramica di tutti gli stili presenti nel documento semplicemente cliccando in un’area vuota del documento: la sidebar di destra si popolerà con tutti gli stili creati e permetterà di visionarne il codice CSS (una volta selezionata la tab in alto a destra inspect).
Figma permette la visualizzazione di codice CSS, Android o iOS.
Nomenclature corrette
Più che una vera e propria parte tecnica, questa sarà più dedicata a un paio di consigli utili a mantenere organizzati tutti gli elementi che abbiamo visto in precedenza.
Una nomenclatura corretta degli elementi non solo ci aiuta a visualizzare correttamente una gerarchia e capire a colpo d’occhio su cosa ci stiamo trovando, ma aiuta anche il nostro team nel muoversi in un progetto che non hanno creato loro.
Quando si lavora diversi giorni su un progetto, è facile iniziare a muoversi e a duplicare elementi ad occhi chiusi, sapendo esattamente quello che si sta facendo. I progetti sono parte di noi, per un breve periodo, e quindi l’organizzazione è più mentale che visiva. Per chi lavora quotidianamente su un file, non importa cosa ci sia dentro a Group Copy 135 perché tutti gli elementi hanno un senso.
Stessa cosa non si può dire di chi poi ci deve mettere le mani e modificare o recuperare elementi. Ma già lo stesso autore, dopo 2 mesi che il progetto è accantonato, probabilmente farà fatica a muoversi con la stessa agilità di prima.
Quindi, quello che può sembrare una perdita di tempo per il singolo all’inizio, non è altro che un risparmio di tempo a livello aziendale dopo.
Ricapitolando, ecco quello che si può rinominare in Figma in maniera intelligente, ottimizzando le comunicazioni indirette:
- Pagine – per indicare la revisione attuale, i file da ignorare, la sezione dei componenti e quella delle moodboard.
- Componenti – utilizzando il segno / e creare dei sotto livelli degli elementi con i diversi stati – tipo un bottone che può essere in hover, attivato, disattivato o disabilitato.
- Stili – indicando i colori principali con dei nomi coerenti, come ad esempio Main Color e Secondary Color oppure con i font, indicandone il tipo, come ad esempio Title 1, Paragraph 2 e tutto il resto che può servire al nostro progetto.
- Livelli – indicando i nomi dell’elemento, come ad esempio in un Header indicando il livello che contiene il colore di sfondo con un Background.
- Gruppi – specificando cosa rappresenta quel gruppo, come ad esempio un gruppo chiamato Scheda prodotto, al cui interno sono contenuti tutti gli elementi che la compongono (bottoni, sfondi, immagini, testi e label).
È fondamentale chiedere al proprio team di design di rinominare correttamente gli elementi, spiegandone l’utilità. Se proprio il tempo non permette una nomenclatura capillare, si può sempre usare un pratico plugin per Figma.
Versioning
Una delle funzioni più utili che Figma offre è quella di tenere traccia delle versioni precedenti del documento: tutto quanto salvato e versionato in automatico, costantemente.
Questa funzionalità genera una lista di versioni alle quali si può accedere, andando di fatto a visionare il proprio lavoro come se sotto la lente d’ingrandimento di una macchina del tempo.
Per visualizzare l’elenco di tutte le modifiche, sarà sufficiente selezionare il menu a tendina presente al centro dello schermo, di fianco al nome del progetto. Una volta aperto il menu, selezionando Show version history, la sidebar di destra mostrerà tutto il versioning del file.
Non è GIT, ma ci accontentiamo.
È anche possibile rinominare le singole versioni, selezionandole con un doppio click e aggiungendo un’eventuale didascalia. Oltre a questo, con la combinazione CMD+Option+S si può creare manualmente una versione, proprio come se facessimo commit e push.
Prototipazione
Un’altra cosa che ha reso Figma il tool di design più in voga del momento è anche la semplicità con cui si possono generare dei prototipi all’interno del proprio documento e, cosa ancora più importante, condividerli con il cliente senza che quest’ultimo posso accedere alle pagine di lavorazione.
Per accedere al prototipo è sufficiente cliccare l’icona del Play in alto a destra, di fianco al tasto Share. Se invece il prototipo viene passato tramite link, non serve far altro che cliccarlo e iniziare la navigazione.
Quello a cui serve il prototipo è dare un’idea chiara di quello che il sito o l’app devono fare. Un buon prototipo permette quindi di navigare per intero un progetto in maniera autonoma, andando già a evidenziare dove determinati link portano.
Una cosa che il prototipo però non fornisce è la possibilità di ispezionare il codice CSS. A uno sviluppatore servirà comunque un invito a collaborare per esportare stringhe di codice o elementi.
Collaborare con altri
Come tutti sappiamo, Figma è un SaaS e tutto il nostro materiale risiede nel cloud che ci viene messo a disposizione. Lo spazio è illimitato e gratuito anche nella versione Free del servizio e ci permette di invitare collaboratori all’interno del progetto con pochi semplici passaggi.
Selezionando il bottone azzurro in alto a destra Share avremo accesso a una finestra che ci permetterà di invitare persone o di generare l’indirizzo url del progetto e condividerlo esternamente a Figma.
Possono esistere fino a tre tipologie di utenti all’interno di un progetto Figma:
- Il proprietario – colui che detiene tutti i permessi sul file, tra cui la possibilità di invitare altre persone.
- L’editor – colui che può effettuare modifiche all’interno del file.
- Il viewer che può ispezionare, navigare e aggiungere commenti – esattamente come le altre due tipologie di utenti, però non può effettuare alcun tipo di modifica: spesso è sufficiente avere questo ruolo per fare sviluppo partendo da un progetto Figma.
Quando un utente si troverà all’interno del nostro file, avremo modo di vedere il suo cursore muoversi all’interno delle pagine e quando selezionerà degli elementi, questa selezione ci verrà evidenziata.
Inoltre, cliccando sopra l’avatar dell’utente nella barra in alto a destra (a sinistra del tasto Share), potremo visualizzare direttamente l’area del documento su cui si trova l’utente. Questa è una funzione particolarmente comoda in caso di presentazioni in remoto, per poter vedere le artboard interessate: seguire il designer mentre spiega l’interfaccia creata aiuta a capire il lavoro fatto ed interpretare correttamente i vari flussi.
È possibile anche visionare il documento in maniera anonima, ma non sarà possibile lasciare commenti o spostarsi per le diverse Pagine.
Commenti e feedback
Abbiamo iniziato un nuovo progetto e aggiunto diversi collaboratori, sia designer che sviluppatori. Siamo finalmente pronti per partire.
Figma offre uno strumento molto pratico di scambio comunicazioni e si trova nella barra principale in alto al centro: un’icona a forma di balloon ci permetterà di visualizzare nella sidebar di destra l’elenco dei messaggi già esistenti, ancorati con un pin all’interno delle pagine.
Una volta entrati nella modalità Commento sarà possibile utilizzare il cursore a forma di pin per creare un nuovo commento, taggando anche i collaboratori nel messaggio utilizzando il classico “@”. Ma avremo accesso anche all’elenco di tutti i messaggi già presenti in due modi diversi:
- Tutti i pin sulle artboard, così da consultarli nel loro contesto – ad esempio tutti i feedback lasciati dal designer sulla Homepage del sito che stiamo sviluppando.
- Un elenco completo a destra nella sidebar dei commenti, con evidenziati in alto i commenti ancora da leggere.
Una volta creato un commento, sarà possibile rispondere con il proprio account oppure smarcarlo direttamente in caso di risoluzione cliccando la spunta in alto a destra nella finestra di lettura.
Come ispezionare le proprietà CSS
Figma ha degli strumenti utili anche per quanto riguarda la parte di sviluppo, che permettono ai collaboratori del progetto di ispezionare il CSS degli elementi, così da riprodurli fedelmente.
Selezionando un elemento o un gruppo di elementi, dalla sidebar di destra sarà possibile visualizzare tutte le proprietà lato codice. C’è una tab che separa le aree e che è suddivisa con: Design, Prototype e Inspect. Inspect è quello che ci occorre per iniziare la conversione da design a codice.
Nella sezione troveremo le proprietà, come le dimensioni degli elementi, i colori, le eventuali immagini che sarà possibile aprire direttamente in una nuova scheda del browser e, infine, un blocco con menu a dropdown dove potremo vedere la visualizzazione in codice CSS, iOS o Android. In questo modo possiamo coprire ogni caso d’uso: sito web e codice nativo per iOS o Android.
Un piccolo suggerimento è quello di integrare a queste informazioni anche il controllo delle distanze con il tasto Alt della tastiera con il cursore del mouse. Selezionando un gruppo di elementi o un elemento singolo, è possibile vedere in tempo reale la distanza che ha con gli altri elementi se ispezionato con Alt.
A proposito di scorciatoie: qui puoi trovare le scorciatoie che usiamo più spesso su Figma.
Per quanto riguarda l’esportazione del codice CSS, Figma è un software avanzato, ma non fa miracoli. Sarebbe quindi bene evitare di copiare e incollare tutto il blocco di codice CSS, ma utilizzare invece le stringhe di codice che ci vengono fornite come un’indicazione di cosa fare, specie riguardo ai positioning.
Comandi utili per la navigazione
Come già spiegato in precedenza, l’interfaccia di Figma è divisa in tre aree ben visibili:
- L’area della sidebar di sinistra contenente le pagine, gli assets e i livelli.
- Quella centrale (canvas) nella quale vengono collocati gli elementi ed è di dimensioni pressoché illimitate.
- La sidebar di destra che contiene tutte le proprietà degli elementi selezionati, con la possibilità di modificarli cambiandone i parametri.
Per navigare agilmente nell’area centrale, è bene tenere a mente questi pratici comandi:
- + e - oppure CMD e scroll per zoomare.
- space per il drag della canvas con il mouse.
- Selezione di una artboard e poi Shift+2 per uno zoom istantaneo.
- Shift+1 per tornare al punto di partenza.
- Per selezionare elementi direttamente, si usa CMD + il tasto sinistro, mentre per cancellare la selezione si può premere ESC oppure cliccare fuori dalla selezione.
Ce ne sono moltissime altre che possono utilizzate, ma queste sono quelle più pratiche e comuni. Ovviamente la ripetizione di queste sequenze renderà il tutto automatico, ma può sempre capitare che ci si dimentichi. Sarà sempre possibile, dall’interno di Figma, recuperare tutte le combinazioni premendo CMD+Shift+?
In questo modo potremo anche scoprire funzionalità nuove, una volta consolidata la nostra conoscenza dello strumento.
Griglie e guide
Le guide e le griglie sono sempre attivabili all’interno di un documento con il percorso Menu (all’interno del bottone ad hamburger) e poi View. Da lì avremo diverse opzioni, come quella di abilitare la vista a pixel, la vista a griglia (che potremo impostare noi come dimensioni), quella a colonne (anche in questo caso interamente editabile), la vista con i righelli e i segni sui righelli.
Non è obbligatorio attivare tutti questi sistemi di visualizzazione e misurazione, anche perché – come già detto – con il tasto Alt e il cursore in hover avremo già tanti tipi di informazioni. Però gli approcci allo sviluppo di interfaccia possono essere di diverso tipo, quindi c’è chi ragiona per colonne – come chi lavora con Bootstrap – e chi si trova meglio con una griglia fitta e precisa. Non importa l’approccio, Figma prova ad essere il più flessibile possibile.
Comparazione side-by-side
Ricordiamoci sempre che Figma è un SaaS e può essere utilizzato direttamente dal nostro browser. Questo significa che possiamo affiancare le schede di Figma con l’anteprima web del sito che stiamo sviluppando e vedere le differenze principali. Spesso è sufficiente vedere affiancate le schermate per trovare differenze – anche banali – come ad esempio un margine troppo piccolo o una colonna troppo larga.
Esportazione degli SVG
Parlando di esportazione degli SVG, può capitare spesso che uno sviluppatore debba esportare le icone in maniera autonoma. Se, lato design, il lavoro è stato svolto con metodo e precisione, l’esportazione avverrà con successo. In caso contrario, può essere che ci siano dei problemi di visualizzazione. Gli errori più comuni sono dati dalla mancata semplificazione dei Boolean Groups oppure dalla mancata conversione delle stroke in elementi outline.
Figma permette di generare delle forme geometriche semplici e poi unirle insieme o sottrarle. Questa operazione si chiama Boolean Groups ed è una funzione richiamabile una volta selezionati due elementi vettoriali collocati in diversi livelli. Ci sono 4 possibilità quando si decide di rielaborare delle forme vettoriali:
- Union – combina le forme selezionate in un unico elemento.
- Subtract – sottrae dalla forma del livello più basso, tutte le forme presenti nei livelli più in alto.
- Intersect – crea un elemento che corrisponde esclusivamente all’area delle forme che si intersecano.
- Exclude – crea un elemento che corrisponde alle aree che non si intersecano.
Conoscendo questo tipo di operazioni, uno sviluppatore può andare a sistemare errori fatti a monte lato Boolean groups e riesportare le icone o il materiale che gli serve. È sempre consigliabile, una volta utilizzata una delle 4 funzioni appena viste, usare la combinazione CMD+E per “appiattire” il gruppo ed esportare così un SVG con un solo livello – quando possibile (ad esempio con delle icone in monocromia).
Per operare invece sulle stroke (che nella maggior parte rimangono stroke e lato SVG presentano sempre errori di visualizzazione) è sufficiente selezionare l’elemento vettoriale, cliccare con il tasto destro del mouse e selezionare dalla tendina Outline Stroke. Oppure usare la combinazione Shift+CMD+O. In questo modo, quella che era una linea diventa una vera e propria forma vettoriale. Anche in questo caso, una volta convertita, sarà possibile unirla o separarla dai gruppi boleani.
Per unire tutto quanto è possibile utilizzare la combinazione CMD+E. Questo passaggio è particolarmente utile in fase di esportazione e permette all’elemento SVG di uscire come asset il più pulito e leggero possibile, senza dati in eccesso.
In conclusione
L’obiettivo di questo articolo era quello di essere il più esaustivo e semplice possibile, così da aiutare tutti gli sviluppatori ad imparare a muoversi all’interno di Figma andando dritti al punto.
Non è facile comunicare efficacemente con un team diversificato e con professionalità sempre più verticali, ma Figma tenta questa impresa e ci riesce egregiamente. Sicuramente nel futuro arriveranno ulteriori aggiornamenti e la fama di questo software sarà sempre maggiore.
Figma ha semplificato la collaborazione del processo creativo per migliaia di aziende come ad esempio Microsoft, Slack e Uber: probabilmente questo è il momento migliore per fare lo shift e portare la collaborazione ad un nuovo livello.