In questo tutorial imparerete ad utilizzare Figma da zero.
Prima di approcciarvi in modo diretto ad un qualsiasi tool di design, che sia Photoshop, Illustrator o Figma, è fondamentale imparare e conoscere le funzioni che quel software offre.
Provare a disegnare un sito web o un app mobile senza conoscere le basi di Figma è un approccio che sconsiglio e che non porta risultati nel breve termine, ma solo confusione.
Iniziamo da capo ponendoci delle domande.
Che cos’è Figma e perché se ne parla tanto?
Figma è un software di progettazione, vector based, che ci permette di progettare siti web e app mobile e di prototiparle.
Non ci limita alla sola progettazione di siti web e app mobile ma anche al design di interfacce per smartwatch, banner e grafiche per i social media, presentazioni, lettere, curriculum vitae e molto altro.
Che cos’è un software di prototyping?
Prima dell’introduzione di questa tipologia di tool, i web designers progettavano siti web e app mobile con software vettoriali (come Illustrator o Sketch) o Photoshop.
Questi tool sono ottimi per il design ma non sono adatti alla presentazione né alla simulazione di un progetto digitale.
Per questo abbiamo bisogno che il nostro design sia dinamico e che simuli il comportamento reale di un componente come se stessimo navigando suon sito web vero e proprio.
Figma ha risolto questo problema.
Con Figma possiamo progettare, per esempio, un sito web multi pagina e fare in modo che il click su un bottone, porta ad un’altra pagina di quel sito web che stiamo progettando.
Con Photoshop questa progettazione non era possibile e dovevamo spiegare a voce questa determinata dinamica.
In conclusione, quando pensiamo a Figma, dobbiamo pensare ad un tool di design con i super poteri.
Possiamo progettare i componenti di un sito web e renderli funzionanti.
Quali sono i componenti che posso progettare con Figma?
Le barre di navigazione che allo scroll verticale rimangono fisse.
I “carousel” – slideshow di immagini che vengono comandate al click su una freccia o che semplicemente partono in automatico con una transizione gestita da un timing.
I dropdown e gli accordion, ovvero quei componenti che possono essere aperti e che racchiudono al loro interno del contenuto testuale.
Radio button e check box – quei piccoli quadratini o ellissi che clicchiamo o tappiamo per selezionare una scelta
I link – qualsiasi bottone o voce di menu che porta ad una altra pagina o ad una altra sezione di quel sito
L’hover – lo stato di un componente nel momento in cui ci passiamo sopra con il mouse e non lo abbiamo ancora cliccato
..e tanti altri ancora.
Come si usa e dove si scarica Figma?
Una delle innovazioni di Figma è il suo duplice utilizzo: possiamo utilizzare questo software direttamente sul browser oppure scaricare la desktop app (sia Mac che Windows) sul nostro computer.
Quali sono le funzioni più importanti di Figma?
Le funzioni più importanti di Figma sono 2:
- Componenti
- Prototyping
Cosa sono i componenti di Figma?
I componenti di Figma sono degli elementi che possono essere riutilizzati più volte all’interno del nostro progetto e che ci danno la possibilità di modificarli in modo intelligente.
Mi spiego meglio con un esempio.
Pensiamo ad un bottone che sappiamo fin da subito verrà riutilizzato decine di volte all’interno del nostro progetto.
Questo bottone ha delle determinate caratteristiche: Il colore, la forma, la dimensione, il carattere tipografico del testo, l’ombra e il corner radius.
Ora, ipotizziamo di aver creato un bottone verde con un font bianco.
Bene.
Dopo una prima fase di design, per qualche motivo decidiamo di cambiare il colore di quel bottone con un blu ed il testo nero.
Il problema è che quel bottone è stato riprodotto all’interno del mio progetto per ben 20 volte!
Cosa faccio? Devo cambiare lo stato del mio bottone con le nuove caratteristiche e andare a sostituire i vecchi bottoni con quello nuovo?
Tragedia. Sarebbe un lavoro lunghissimo.
Con Figma tutto questo è risolvibile.
Possiamo infatti crearci un componente, duplicarlo (le sue copie si chiameranno “Istanze”) e nel momento in cui cambiamo le sembianze di quel bottone, in automatico, queste modifiche verranno ereditate, come per magia, dalle istanze.
Non dovremo quindi duplicare quel bottone né riposizionare le sue copie all’interno del nostro progetto.
Bello vero?
Prototyping
Come già accennato sopra, il prototyping è una funzionalità molto potente che ci permette di rendere dinamico il nostro design.
Ipotizziamo di aver disegnato un sito web con una barra di navigazione che al click su ogni voce deve effettuare uno scroll in verticale alla section corrispondente.
Con Figma posso creare questa interazione in pochi click.
Altre funzioni
- Lo strumento move e scale
- Region tool: Frame, section e slice
- Layout grid – Impostazione di una griglia per il frame
- Shape tool – Le forme: quadrato, linea, freccia, ellisse, poligono, stella, placing di immagine o video
- Allineamenti e distribuzione degli elementi
- Dimensione, posizione, rotazione e corner radius
- Pannello “Fill” – Gestione riempimento di un elemento con colore, sfumatura, immagine o video
- Bordi – Gestione ed editing avanzata del bordo
- Effetti – Layer blur e background blur, inner shadow e drop shadow
- Export e librerie – Gestire l’esportazione di un file o elemento e salvare un preset (colore, ombra, bordo)
- Constraints – Gestire il vincolo di un elemento
- Pen e pencil tool
- Lo strumento testo
- Edit object, use as mask
- Componenti, varianti ed istanze
- Auto Layout
- Plugin e Widget
- Present & share
- Prototype, Inspect
- Gestione dei livelli, Boolean groups
Ho diviso il tutorial in 28 capitoli in modo tale da rendere il corso più fruibile.
Se avete già conoscenze o padroneggiate già qualche funzionalità di Figma, potete dedicarvi a quello che vi serve andando a cliccare sull’argomento specifico che trovate nella lista dei capitoli nella sezione sotto al titolo di YouTube.
Ecco il tutorial
Iscriviti al mio canale se vuoi imparare ad utilizzare Figma e Adobe Xd come un PRO!