Imparare ad usare Figma: le migliori risorse gratuite online
Se sei alla ricerca di risorse gratuite ed online per imparare ad usare Figma sei nel posto giusto. In questo articolo ho raccolto tutto quello che ritengo possa guidarti alla scoperta e nell’apprendimento di Figma.
Ho capito che non potevo rimandare la scrittura di questa raccolta quando, venerdì, per l’ennesima volta un collega mi scrive:
Ciao Frank, vorrei iniziare a smanettare con Figma. Hai qualche consiglio su come approcciarlo o su delle documentazioni/guide da seguire?
È una delle domande che più spesso leggo su Figma Italia (puoi unirti al community su Slack da qui) e alla quale provo a rispondere con un copia incolla preso da una mia raccolta su Notion. Voglio condividere quello che mi ha aiutato quando mi sono avvicinato a Figma e renderlo qualcosa di strutturato che può tornare utile a chi muove i primi passi nel mondo di Figma.
L’articolo è organizzato in quattro sezioni:
- Cos’è Figma
- Documentazione
- Video Tutorial
- Community Online
🤔 Cos’è Figma?
Magari sei arrivato qui digitando “Figma” su Google, perché un collega te lo ha nominato o perché hai letto uno dei tanti articolo che riguardano i software per designer e sei curioso di saperne di più.
Figma is the first professional-grade, online tool created specifically for interface design. Figma is built entirely in the browser, enabling the entire team’s design process to happen in one online tool.
Figma è nato nel 2012, è un software pensato per chi fa digital design (personalmente trovo limitante accostarlo sullo alla User Interface Design) che funziona nel browser e che ti permette di lavorare in modo collaborativo e real time. In altre parole? Come tanti lo definiscono, è il Google Doc del design: crei un account, un team, un progetto ed inizi a lavorare con i tuoi colleghi… in contemporanea. Eh si, vedrai i tuoi colleghi, magari dall’altra parte del mondo, che “si muovono sullo schermo” e che possono editare in realtime il tuo lavoro e collaborare con te.
Figma è gratuito (fino a due editor e senza supporto alle team libraries) e, essendo cloud-based, funziona su Mac, Windows, Linux (ma anche su Chromebook e speriamo arrivi presto su tablet).
Puo’ essere utilizzato per fare UI, UX, prototipazione, graphic design ma anche illustrazione vettoriale.
Non voglio soffermarmi di più poiché do per scontato che tu conosca Figma e voglia imparare ad usarlo. Passiamo, quindi, alle risorse.
📑 Inizia dalla documentazione
Lo so, di solito la documentazione non la legge nessuno, tranne quelli che la scrivono. Eppure è da li che si dovrebbe cominciare per apprendere le cose seguendo un filo logico e con un livello di dettaglio che ti abiliterà a padroneggiare subito Figma per usarlo nel tuo quotidiano.
La documentazione è organizzata in sezioni:
🗃️ Getting started
In questa sezione trovi tutto quello che ti serve sapere prima di cominciare: come creare un account, come lavorare offline, piattaforme e device supportati, shortcut, come chiedere aiuto al team di Figma, un piccolo video tour di Figma, ma anche come scaricare Figma (se preferisci usarlo da client desktop) e come connetterlo ai vari servizi con i quali è integrabile (Avocode, Protopie, Principle, Trello, Dropobox, Zeplin, Flinto, zeroheight, Slack, Dribbble, Jira).
️️🗃️ Using Figma
Questa è la sezione un pò più “cicciotta” e ti porta nel cuore del tool. Troverai tutte le nozioni relative a: importare file (es. da Sketch), come gestire/organizzare i file di un progetto, come utilizzare i vari tool di design (shape, pen, arc, etc.), come lavorare con i testi e con le immagini, come organizzare/gestire livelli e stili, componenti (l’equivalente dei simboli in Sketch) ma diversi in termini di versatilità, prototipazione (dopo l’introduzione dello Smart Layout si è aperto un mondo), team e collaborazione. Davvero tanta roba insomma.
🗃️ Administration
Sezione un pò più tecnica e dedicata a chi vuole gestire, operativamente e “commercialmente”, i progetti su Figma. Dai un’occhiata se sei alla ricerca di nozioni legate a: setup degli account, condivisione e gestione permessi, amministrazione del team, fatturazione e gestione del piano, o Figma for Organization.
🗃️ Tips and more
Sezione leggera, nonostante il nome sembra prometterti che all’interno troverai qualche trucchetto. In realtà ci trovi info legate a: risoluzione dei problemi (es. come inviare un bug report) e come contattare Figma (TL;DR — se hai bisogno di contattare Figma puoi farlo dal “punto interrogativo” che trovi in basso a destra nell’interfaccia).
🗃️ Community
Il concetto di community è stato lanciato di recente ed è ancora in beta. L’idea è quella di rendere open source il design e per questo Figma ha creato il programma che è ancora in beta e con accesso su selezione. Tutta questa sezioni, infatti, è work in progress, ma dacci un’occhiata se ti interessa contribuire.
Se proprio non ce la fai a leggere, passa alla sezione successiva, quella dedicata ai video. Ma tieni a mente che nelle risorse linkate sopra troverai la risposta al 90% dei dubbi che possono nascere mentre usi Figma ed un semplice cerca può salvarti dal lancio compulsivo di brutte parole, che alle volte può durare per ore e levarti ore di sonno.
📺 Prosegui con i video
Lo ammetto: adoro guardare i video su YouTube e quelli che ti consiglio sono stati il mio punto di partenza, soprattutto quelli del canale ufficiale di Figma. Sono fatti davvero bene e sono perfetti per chi inizia (ci sono tornato anche quando qualcosa non mi quadrava).
⏯ What’s Figma?
In questa playlist, composta da 11 video, trovi un carrellata sulle feature principali di Figma, dal setup dell’account al overview dell’interfaccia, dai componenti alle team libraries, dagli stili alla prototipazione. In questa playlist è anche presente un video dedicato esplicitamente a chi arriva da Sketch. È senza dubbio il punto di partenza.
⏯ Le basi di Figma
Questa playlist, composta da 16 video, è la continuazione logica di quella precedente (a dire il vero non capisco perché siano separate). Qui potrai saperne di più su testi e font, layout/griglie/guide, gestione delle immagini, maschere, operatori booleani e tanto altro ancora.
⏯ Componenti
I componenti sono il cuore di un design collaborativo e scalabile, per questo dovresti assolutamente imparare a padroneggiarli fin da subito. Questa playlist è nata per questo.
⏯ Prototipazione
Figma ha portato la prototipazione ad un livello successivo con l’introduzione dello Smart Animate. Sono certo che con quello che Figma mette a disposizione le aspettative di un prototipo ordinario sono ampiamente superate.
⏯ CORSO COMPLETO: Design System in Figma
Questo è un corso completo, gratuito e composto da 10 lezioni, realizzato da Meng To e dalla sua squadra. Il corso contiene:
- le basi (e non sono) di Figma;
- le basi per la creazione di un design system (in Figma).
⏯ Intro to Figma
Adoro la carica che trasmette Jesse Showalter nei suoi video. In questa playlist, composta da 4 video, Jesse copre le basi di Figma, ma anche la creazione di un (molto piccolo) design system, lo Smart Animate e fa un piccolo tour sui plugin.
⏯ Figma design system for a marketing website
Charli è una web e graphic designer che ha un canale in cui trovi contenuti legati al mondo del design. Tra questi anche alcuni su Figma, come quello qui sotto che è un primer alla creazione di un design system in Figma.
⏯ Figma Tutorial by Design Course
In questo video Gary Simon ci porta alla scoperta di Figma mentre realizza un’interfaccia per un’app mobile.
⏯ Figma Tutorial for Mobile Design
Il canale di CodeWithCris è noto maggiormente a i developers, perchè è davvero un’ottima risorsa (gratuita) da seguire se aspiri a diventare uno iOS developer. In questo video Chris realizza una app mobile (si, anche lui) e ti porta alla scoperta di Figma tramite la tecnica del learn by doing. Devo dire che, per quanto il risultato non sia “impressionante”, ti fa vedere un bel pò di cosette saltando le basi.
⏯ Figma Tips & Tricks — UI Designer’s Superpower
Dulcis in fundo, questo video è diverso dagli altri ed è forse per utenti un pò più avanzati. È l’unico, tra quelli inseriti questo articolo, che ti mostra un pò di tips (ben 50!) che davvero velocizzano il tuo workflow e ti insegna a fare cose non standard.
Credo che ci siano abbastanza video da consumare tutte le scorte di birra e patatine & pop corn che hai in casa. Mettiti comodo e premi play selezionando in base a quello che vuoi approfondire ed al percorso che vuoi fare.
🤝 Community
Le community online, per me, sono un bar virtuale. Quello dove ti ritrovi per chiacchierare, fare gossip, dare (o ricevere) una pacca sulla spalla quando incontri qualcuno che sta patendo le stesse tue sofferenze, ma soprattutto dove puoi chiedere aiuto e scambiare consigli per migliorare il tuo flusso di lavoro, come designer e come Figma user. Con questo spirito nasce Figma Italia, la community online che riunisce centinaia di designer che si ritrovano in uno spazio virtuale a parlare di Figma. Vuoi farne parte anche tu?
👉 Puoi unirti a Figma Italia su:
🆕 Vuoi rimanere aggiornato su Figma?
Oltre agli account ufficiali, ti consiglio di seguire Figma Italia su Facebook, LinkedIn o Twitter.
🏁 Conclusioni
Ho cercato di racchiudere in questo articolo quelle risorse che mi hanno aiutato a familiarizzare con Figma e conto di tenerlo aggiornato con nuove risorse. Qui, ogni tanto, torna a dare un’occhiata.
Ho dimenticato qualcosa? C’è qualcosa che pensi debba essere inserita in questa collection? Ti sarei molto grato se me lo segnalassi nei commenti (o contattandomi come preferisci) così che io possa ampliarla e renderla ancora più efficace.
Se sei arrivato fino a qua, grazie, ti meriti un bel cinque.
Se ritieni utili i contenuti, non dimenticarti di applaudire 👏👏 👏(lo so, suona strano detto così in italiano). Se lo fai:
- vedrai quella fighissima micro interazione all’opera;
- contribuirai ad aumentare la visibilità di questa risorsa in modo che possa tornare utile a qualcun altro.
🔥 Buon divertimento, il bello inizia ora!
