Figma: definizione e funzionamento
Figma rappresenta un editor di grafica vettoriale innovativo e intrigante progettato esclusivamente per il web, il cui utilizzo ha registrato un costante aumento nel corso degli anni: ad oggi, è diventato uno dei principali strumenti adoperati da designer UX/UI, agenzie di comunicazione e imprese in tutto il mondo!
La prima versione di Figma è stata lanciata nel 2015 con l’obiettivo dichiarato di consentire a chiunque di “esprimere la propria creatività attraverso un browser”. Nel 2022, Adobe, la nota gigante statunitense famosa per la sua suite di software di grafica digitale, ha acquisito Figma per circa 20 miliardi di dollari.
Non sappiamo ancora quale sarà il destino di Figma, ma senza dubbio al giorno d’oggi, la piattaforma è uno degli strumenti di modifica grafica per siti web e interfacce di app più popolari. In questo articolo, esploreremo cos’è Figma e come funziona: una guida pensata per coloro che non conoscono ancora il programma o ne hanno solo sentito parlare!
Che cos’è Figma?
Figma rappresenta una piattaforma per la modifica grafica e il design delle interfacce: è basato sul web e favorisce la collaborazione. Con Figma, è possibile svolgere una vasta gamma di attività di design – dalla creazione di siti web e interfacce grafiche per app alla realizzazione di post per i social media, fino alla preparazione di presentazioni – rendendolo uno strumento sempre più apprezzato nelle aziende e negli studi di design.
Una delle caratteristiche più rivoluzionarie di Figma è sicuramente la sua natura collaborativa. I diversi membri di un team possono lavorare sullo stesso file contemporaneamente e in tempo reale: ciò consente ai designer di collaborare alla creazione di un design, mentre sviluppatori e copywriter possono essere coinvolti fin dalle prime fasi del processo.
Il risultato? Un notevole risparmio di tempo: addio ai lunghi scambi di file. Inoltre, la collaborazione stimola la creatività.
Il fatto che Figma sia basato sul web – ovvero che si possa accedere attraverso un browser web – rappresenta un’altra caratteristica molto apprezzata: non sono necessari download o aggiornamenti di software, né l’acquisto di licenze; tutti i membri del team possono lavorare da qualsiasi sistema operativo senza preoccuparsi, tra le altre cose, della disponibilità dei font installati sui loro dispositivi o dei problemi di compatibilità.
Tutti i dati vengono salvati nel cloud in tempo reale, evitando così molti problemi comuni – come la modifica accidentale di file obsoleti o la perdita di tempo nell’invio di documenti pesanti. Naturalmente, per utilizzare Figma, è necessario essere sempre connessi a Internet e disporre di una connessione stabile e affidabile.
In Figma, diversi membri di un team possono collaborare su un progetto.
Avete ora una visione più chiara di cos’è Figma. Infine, è importante notare che Figma è disponibile gratuitamente nella sua versione base. Il pacchetto gratuito Starter consente ai team di lavorare su tre file all’interno di un progetto e memorizza le versioni precedenti per 30 giorni. È interessante notare che gli studenti e gli insegnanti possono richiedere l’accesso gratuito alla versione professionale di Figma – altrimenti disponibile al costo di 12 dollari al mese per utente.
In sintesi, cos’è Figma:
- Figma è un programma per la modifica grafica e la prototipazione.
- Figma è principalmente utilizzato per il design digitale: progettazione di siti web e interfacce di app.
- Figma è basato sul web: accessibile tramite browser web e connessione Internet.
- Figma è collaborativo: diversi utenti con ruoli differenti possono lavorare simultaneamente su un progetto.
- Figma è in tempo reale: i dati sono salvati costantemente nel cloud.
- Figma è gratuito nella sua versione base.
Come funziona Figma?
Avete ora una visione più chiara di cos’è Figma e delle sue potenzialità? Prima di esaminare come funziona Figma – almeno nei suoi aspetti fondamentali e più innovativi – è importante comprendere che Figma è efficace non solo per il design finale di un prodotto grafico, ma anche e soprattutto durante tutte le fasi preliminari.
Brainstorming, valutazione di opzioni grafiche diverse, prototipazione, raccolta e implementazione di feedback: Figma può essere utilizzato con successo in tutte queste fasi! Ad esempio, un team di designer può collaborare alla creazione del wireframe di un sito web, raccogliere feedback preliminari dagli altri membri del team o prototipare l’interfaccia di un’applicazione – consentendo di simulare la navigazione e l’interazione all’interno di un design fin dalle prime fasi del processo.
Ora, esamineremo i fondamenti di Figma. Alla fine dell’articolo, forniremo alcuni suggerimenti su corsi e risorse per approfondire e diventare dei veri professionisti di Figma!
Creazione di un account
Per creare un account, basta iscriversi gratuitamente su figma.com. Una volta registrati, è possibile creare team, progetti e documenti (files). Invitando altri utenti al team, è possibile fornire loro accesso ai progetti su cui collaborerete.
L’interfaccia di lavoro
L’interfaccia di lavoro di Figma è un’ampia area in cui è possibile inserire le diverse schermate del design su cui si sta lavorando.
Per impostare le schermate, è possibile utilizzare lo strumento cornice (frame): è possibile scegliere tra numerose dimensioni predefinite, come ad esempio iPhone 14, Apple Watch 41 mm o un post su Facebook. In questo modo, è possibile raccogliere diverse pagine di un sito web in un unico file o mostrare come una stessa pagina verrà visualizzata su dispositivi diversi.
Librerie e community
Un altro aspetto interessante di Figma sono le librerie di componenti. Se non si desidera perdere tempo a creare elementi da zero, è possibile accelerare la creazione di un design utilizzando gli elementi grafici già presenti nelle librerie. Inoltre, è possibile esplorare la community di Figma – uno dei luoghi più interessanti e utili per gli utenti della piattaforma – per cercare elementi grafici, ispirazione e design system.
Prototipazione
Nella sezione Prototype di Figma, è possibile collegare tra loro diverse schermate o elementi grafici identificando dei nodi: ad esempio, è possibile collegare un nodo alla voce “about” di un menu che porterà l’utente alla pagina corrispondente o a un pulsante “iscriviti alla newsletter”. Avviando il prototipo, è possibile simulare il funzionamento di un sito web o di un’applicazione già nelle fasi iniziali del lavoro.
Raccolta di feedback
Una volta condiviso il file con il resto del team, è possibile ricevere e inserire feedback attraverso comodi post-it colorati. I post-it possono essere utilizzati per votare, segnalare problemi o fornire consigli attraverso commenti strutturati. Ad esempio, è possibile presentare al team diverse opzioni di design per una home page e raccogliere feedback immediati.
I commenti possono anche essere trascritti dal programma, rendendo la comunicazione ancora più efficace.
Corsi e altri materiali utili per utilizzare Figma
Ora che avete compreso cos’è e come funziona Figma, potete iniziare ad esplorare le sue potenzialità! Esistono numerose risorse gratuite online per imparare ad utilizzare Figma al meglio.
Una buona introduzione è quella fornita direttamente da Figma, disponibile qui sotto: questi video forniscono una panoramica completa della piattaforma in poco più di un’ora.
Inoltre, esistono molti corsi online gratuiti, come quelli proposti da Sherpa Design, la community italiana di UX/UI Designer. Figma offre anche corsi ufficiali, con moduli brevi da una decina di minuti ciascuno, e un corso per principianti proposto da The Designer Ship.
Scommettiamo che ora avete voglia di mettere mano a Figma per i vostri prossimi progetti?