Figma: che cos’è e come funziona?

Figma è un innovativo e interessante editor di grafica vettoriale progettato per il web il cui utilizzo è cresciuto sempre più negli anni: oggi è una delle piattaforme più utilizzate da UX/UI designer, agenzie di comunicazione e aziende in tutto il mondo!

La prima versione di Figma è stata lanciata nel 2015 con lo scopo dichiarato di permettere a tutti di “essere creativi utilizzando un browser”. Nel 2022 Adobe, il colosso statunitense noto per la sua suite di programmi di grafica digitale, ha comprato Figma per circa 20 miliardi di dollari.

Ancora non sappiamo quale sarà il futuro di Figma, ma senza alcun dubbio oggi la piattaforma è uno degli strumenti di editing grafico per siti web e interfacce app più popolare. Oggi vediamo insieme cos’è Figma e come funziona: una guida, questa, per chi ancora non conosce il programma o ne ha solo sentito parlare!

Cos’è Figma?

Figma è una piattaforma per l’editing grafico e il design di interfacce: è web-based e collaborativo. Con Figma è possibile fare un po’ di tutto a livello grafico – dalla progettazione di siti web e di interfacce grafiche di app alla realizzazione di post per i social media, passando per la creazione di presentazioni – ed è per questo uno strumento sempre più apprezzato nelle aziende e negli studi grafici.  

Una delle caratteristiche più innovative di Figma è sicuramente il fatto di essere uno strumento collaborativo. I diversi membri di un team lavorano sullo stesso file e in tempo reale: questo vuol dire che diversi grafici possono collaborare alla creazione di un design, ma anche che gli sviluppatori e i copywriter sono già coinvolti nelle prime fasi del lavoro.

Il risultato? Si risparmia un sacco di tempo: niente più scambi di file interminabili. Inoltre, la collaborazione potenzia la creatività.

Il fatto che Figma sia web-based – ovvero che si acceda semplicemente attraverso il proprio browser – è un’altra caratteristica che piace molto: non c’è bisogno di installare e aggiornare programmi né di comprare licenze; tutti i membri del team possono lavorare da qualsiasi sistema operativo senza preoccuparsi, tra le altre cose, dei font installati sulle macchine o di cambiare computer.

Il tutto viene salvato nel cloud e in real-time evitando così diversi problemi – come lavorare sbadatamente su file obsoleti o perdere molto tempo a scambiare documenti anche molto pesanti. Ovviamente per utilizzare Figma dovrete essere praticamente sempre online e avere una buona e stabile connessione a internet.

Avete ora un’idea più precisa di cos’è Figma. Infine, dobbiamo dire che Figma è un programma gratuito, almeno nella sua versione base. Il pacchetto gratuito Starter permette ai team di lavorare su tre file all’interno di un progetto e memorizza le versioni precedenti per 30 giorni. Da sottolineare che studenti e insegnanti possono richiedere l’accesso gratis (da qui) anche alla versione professionale di Figma – che altrimenti costa 12$ al mese per utente.

In sintesi, cos’è Figma:

• Figma è un programma di editing grafico e prototipazione.
• Figma è utilizzato principalmente per il design digitale: ovvero la progettazione di siti web e di interfacce di app.
• Figma è web-based: vuol dire che non ci sono software da scaricare e installare, ma si usa attraverso il browser e una connessione internet.
• Figma è collaborativo: diversi utenti con ruoli diversi possono lavorare contemporaneamente a un progetto.
• Figma è in real-time: tutto è salvato costantemente nel cloud.
• Figma è gratuito nella sua versione base.

Come funziona Figma?

Avete un’idea più chiara di cos’è Figma e delle sue potenzialità? Prima di vedere insieme come funziona Figma – almeno nei suoi elementi base e più innovativi – chiariamo subito un aspetto importante: Figma mostra tutta la sua efficacia non solo per il design finale di un prodotto grafico, ma anche e soprattutto in tutte le fasi precedenti.

Brainstorming, valutazione di opzioni grafiche diverse, prototipazione, raccolta e implementazione di feedback: è possibile utilizzare Figma con molta efficacia in tutte queste fasi! Ad esempio, in Figma, un team di designer può costruire collaborativamente il wireframe di un sito web, ovvero il semplice scheletro di un design senza colori o stili, raccogliere subito i primi feedback dagli altri membri della squadra o far votare l’opzione migliore. Oppure prototipare l’interfaccia di un’app: ovvero simulare già nelle prime fasi del lavoro la navigazione e l’interazione all’interno di un design.

Spieghiamo ora come funzionano gli aspetti base di Figma. In fondo all’articolo consiglieremo poi alcuni corsi e risorse per approfondire e diventare così dei professionisti di Figma!

Creazione di un account

Per creare un account, basta iscriversi gratuitamente su figma.com. Una volta iscritti si possono stabilire team, progetti e lavori (files). Invitate altri utenti nel team così da fornire loro l’accesso ai progetti su cui collaborerete.

L’area di lavoro

L’area di lavoro in Figma è un ambiente enorme – un quadrato fino a 65mila pixel – all’interno del quale potete inserire le diverse schermate del design a cui state lavorando.

Per impostare le schermate utilizzate lo strumento cornici (frames): potete scegliere tra decine di dimensioni predefinite, ad esempio iPhone 14, Apple Watch 41 mm o un Facebook post. In questo modo, ad esempio, potete raccogliere in un file le diverse pagine di un sito web o mostrare come una stessa pagina dovrà essere visualizzata su device differenti.

Librerie e community

Un altro aspetto interessante di Figma sono le librerie di componenti. Se non volete perdere tempo a costruire da zero gli elementi, potete velocizzare la creazione di un design – o di una bozza – utilizzando gli elementi grafici più disparati già presenti nelle librerie. Nelle librerie trovate una barra di navigazione già fatta, ad esempio, delle icone o i pulsanti più comuni.

Navigate la community di Figma– uno dei luoghi più interessanti e utili per chi utilizza la piattaforma – per cercare questi ed altri elementi. Qui potete trovare ispirazioni, materiali per il brainstorming, elementi grafici e i cosiddetti design system, ovvero un insieme di regole, linee guida ed elementi grafici che aiutano a dare coerenza al proprio prodotto grafico.

Prototipazione

Nella sezione Prototype in Figma potete collegare tra loro diverse schermate o elementi grafici identificando dei nodi: ad esempio un nodo può essere piazzato sulla voce “about” di un menu che porterà l’utente alla pagina corrispondente. Oppure su un pulsante “registrati alla newsletter”. Avviando il prototipo potete simulare il funzionamento di un sito web o di un’interfaccia app già nelle prime fasi di lavoro, così da capire cosa funziona e cosa va migliorato!

Raccolta feedback

Una volta condiviso il file con il resto del team, è possibile ricevere e piazzare feedback attraverso comodi post-it colorati. I post-it sono utilizzati per votare, segnalare problemi o dare consigli attraverso commenti più strutturati. Ad esempio, potete presentare al vostro team tre opzioni diverse per il design di una home page e capire, in tempo reale, cosa ne pensano i vostri colleghi.

I commenti possono essere anche comunicati a voce al programma che provvederà a trascriverli. Comodo vero?

Corsi e altri materiali utili per utilizzare Figma

Avete visto che cos’è e come funziona Figma? Le potenzialità come avrete capito sono infinite! Scommettiamo che avete già voglia di mettere mano al programma e fare i primi esperimenti creativi insieme al vostro team.

Se poi vorrete diventare dei pro, online esiste una grande quantità di risorse gratuite per imparare a usare Figma ancora meglio.

Una prima introduzione utile è quella fornita dalla stessa Figma e che trovate qui sotto: in poco più di un’ora i diversi video offrono una panoramica complete della piattaforma.

Online ci sono poi una miriade di corsi, per lo più gratuiti. Vi segnaliamo ad esempio questo corso di Sherpa Design, la community italiana di UX/UI Designer. Ci sono poi i corsi ufficiali proposti da Figma, con moduli da una decina di minuti ciascuno, e il corso per principianti proposto da The Designer Ship. 

Bello vero? Ora che abbiamo capito cos’è e come funziona Figma, per quale dei vostri prossimi progetti lo utilizzerete?