Come usare Figma

Tutorial completo sugli strumenti di Figma e le tecniche di base

creativecode avatar Giulio Tiseo

6 Dic, 2019

~15min.

In questo articolo capirai come usare Figma attraverso un excursus dell'interfaccia e di tutti gli strumenti presenti nel programma. Apprenderai le basi tecniche e teoriche dell'applicazione e farai pratica con i tool principali.

Come usare Figma
Requisiti

Prima di affrontare questo articolo assicurati di aver creato un account su Figma e di essere a conoscenza dei concetti base del programma, come ad esempio i componenti. La competenze in software di grafica come Photoshop o Sketch possono aiutare, ma non sono assolutamente richieste.

Per capire come usare Figma dovrai padroneggiarne l’interfaccia

Immagino che in questo momento avrai voglia di lavorare da subito su un nuovo file e realizzare il tuo primo design. Purtroppo dovrai placare per un momento i tuoi istinti più profondi e concentrarti sulla struttura del programma osservando gli strumenti presenti nell’area di lavoro.

So che si tratta di un articolo piuttosto lungo, ma è di fondamentale importanza che tu lo legga tutto. Dall’inizio alla fine.

Ti sembrerà fuorviante ma a questo punto, prima ancora di cominciare, hai bisogno di analizzare approfonditamente gli strumenti a tua disposizione per comprenderne l’utilità.

Se hai dubbi su quanto sia importante conoscere a menadito l’interfaccia di Figma per essere capaci di usare davvero questo programma, potrei cancellare ogni tua perplessità con un paio di ipotesi.

Ad esempio: riesci ad immaginare un pittore incapace di usare un pennello? Oppure un violinista che non sia in grado di impugnare un archetto?

Così come il violino per un violinista, lo strumento usato dal Web Designer in fase di progettazione è il software. Nel nostro caso, Figma sarà il mezzo attraverso il quale realizzeremo le nostre idee.

Comincia fin da subito ad entrare nell’ottica che è complicato iniziare a progettare qualcosa senza avere una totale padronanza dei mezzi a propria disposizione.

Perché usare Figma e preferirlo ad altri software?

Mi è capitato di incontrare molto spesso ragazzi che utilizzano costosissimi e complicatissimi software professionali di grafica senza neppure conoscere il 40% delle funzionalità presenti nel programma. Chiariamoci, casi come questi non sono scaturiti da una semplice questione di pigrizia. Il punto è che su molti programmi (soprattutto quelli più famosi e commerciali) esistono una marea di strumenti. Molti di questi però risultano essere per un Web Designer totalmente inutili. Non solo! Tante funzionalità che potrebbero essere gradite, al contrario, non sono neanche presenti.

Allora diciamolo una volta per tutte: se non sfrutti almeno il 70% di un software, è probabile che tu stia usando lo strumento sbagliato. Ma allora perché ci si ostina ad utilizzare così spesso programmi inadatti e inutilmente complicati? Probabilmente perché danno l’impressione di avere tutto, caratteristica che stuzzica spesso chi è alle prime armi. Non farti ingannare, avere tutto non è sempre un pregio. Ti consiglio di scegliere software più piccoli ma mirati, che abbiano tutto sì… ma che sia solo ciò che ti serve.

D’altronde non pensi sia meglio avere a disposizione qualcosa che sia pensato esattamente per la progettazione di siti web? Questo è il motivo per cui intendo mostrarti in questo tutorial come usare Figma.

Saper usare Figma vuol dire anche saper progettare?

Iniziare a conoscere la tecnica e gli strumenti è il primo step di un qualsiasi percorso di apprendimento per attività artistiche e professionali. Però non confondere questo concetto con quello che porta spesso ad essere schiavi dei software, perché c’è un’enorme differenza tra le due cose.

I programmi vanno interpretati come mezzi attraverso i quali puoi realizzare le tue idee. In quanto a importanza, nulla è paragonabile alle abilità cognitive che sviluppi nel tempo con l’esperienza e che maturi a prescindere dal software che usi.

La conoscenza di un software non ti permetterà automaticamente di produrre lavori efficaci, ma ti darà le capacità tecniche per ottenere i risultati sperati. Starà poi a te sviluppare un buon metodo progettuale per far sì che i tuoi lavori risultino efficaci.

Per conoscere i limiti e le possibilità offerte da un programma, devi studiarne prima di tutto l’interfaccia. Perciò, bando alle ciance e torniamo su Figma.

# Il File Browser

Nell’articolo precedente hai iniziato un nuovo progetto e creato il tuo primo file. Anche se Figma genera di default una serie di starter file già al primo avvio, ho ritenuto opportuno attendere questo momento prima di parlartene.

Se non hai ancora esplorato l’interfaccia di Figma per conto tuo, puoi visualizzare i file creati di default selezionando l’opzione Recent presente nella sidebar.

Interfaccia di Figma per i file recenti
Come si presenta l’interfaccia di Figma per la selezione di file recenti

Quello che hai di fronte è il classico File Browser di Figma. Per ogni progetto o cartella potrai accedere a una interfaccia simile che ti consentirà di navigare e aprire i file a cui stai lavorando.

In questa pagina trovi il riepilogo di tutti i file che hai editato o aperto recentemente. Ad ogni file corrisponde una card dove viene mostrata una preview dell’area di lavoro interna, il titolo e le informazioni relative all’ultimo accesso effettuato.

L’ordinamento ovviamente può essere impostato diversamente in base all’ultima modifica, alla data di creazione o in ordine alfabetico (vedi l’opzione in alto a sinistra impostata su Last Modified nello screenshot).

Per quanto riguarda invece la visualizzazione, anche questa può essere trasformata da griglia in lista facendo click sulla relativa icona posta in alto a destra, sotto l’header.

# Importare file esterni in Figma

Naturalmente in Figma non possiamo solo creare file ma anche importarli direttamente nella nostra libreria. I metodi di importazione in Figma sono diversi:

  • Attraverso il file importer (puoi importare documenti con estensione .fig, .sketch, PNG, JPG o GIF);
  • Effettuando un drag and drop dalla cartella in cui è situato il file direttamente nel File Browser di Figma;
  • Con un classico Copia/Incolla;
  • Attraverso dei link speciali che duplicano un file presente nella libreria di un altro utente, direttamente sul tuo profilo.

Tutti i metodi elencati tranne l’ultimo, saranno utilizzabili non solo per importare nuovi file all’interno del file browser, ma anche per aggiungere nuovi elementi nella canvas del file stesso come vedremo tra poco.

Importare un file usando l’importer di Figma

Se sei in possesso di uno o più file .fig, .sketch, PNG, JPG o GIF, puoi importarli in Figma attraverso l’importer facendo click sull’icona situata in alto a destra, accanto la voce New File.

Importare file in figma
Seleziona l’icona a destra della voce New File per importare un file

A questo punto non ti resta che selezionare i file che ti interessano e in pochi istanti li vedrai comparire nel file browser.

Drag and Drop

Il metodo più immediato è senz’altro quello del drag and drop. Prova a trascinare un file nell’interfaccia principale di Figma per verificarne l’effettivo funzionamento.

Importare un file con il drag and drop
Importare un file in Figma con il drag and drop

Duplica i progetti dai link di condivisione

Questo metodo è molto semplice ed è utilizzato in casi particolari. Spesso è possibile trovare dei link di condivisione per Figma che ti permettono di importare i documenti di altri utenti tra i tuoi file. Ad esempio, prova a importare questo file nel tuo profilo.

Facendo click sul link dovrebbe comparire all’istante la finestra di caricamento di Figma che ti avverte, al termine dell’importazione, dell’inserimento di un nuovo file nella tua libreria. Nel giro di qualche secondo, sarà aperto automaticamente Creative Code Starter, il documento che hai appena forkato e su cui potrai iniziare a lavorare immediatamente.

Esempio wireframe mobile Figma
Il documento duplicato e importato nel file browser via link

# L’area di lavoro di Figma

Anche se hai avuto modo di osservare l’aspetto di una canvas già nell’articolo precedente, ora potrai farti un’idea più chiara dell’area di lavoro e degli strumenti a tua disposizione. Questa pagina è il cuore del programma ed è qui che riuscirai a capire esattamente come usare Figma. Per il momento limitiamoci a guardare senza toccare e concentriamoci sugli elementi presenti nell’interfaccia.

# La sidebar dei layer

La sidebar laterale sinistra è quella che indica l’insieme di layer che compone la canvas. I layer in Figma sono interpretati come i classici livelli di un qualsiasi programma di grafica. Se hai un minimo di dimestichezza con software come Sketch, Photoshop o Illustrator, non troverai alcuna difficoltà a muoverti nell’area di lavoro di Figma perché sezioni come queste esistono in tutti i programmi di grafica.

Se al contrario non sai cosa sono i layer te lo spiego con una frase: i layer (o livelli) sono una serie di strati opachi, trasparenti o semi trasparenti che possono essere “impilati” e sovrapposti l’uno sull’altro per creare delle composizioni.

Tali strati possono rappresentare qualsiasi cosa! È come se fossero dei semplici fogli di carta trasparente su cui puoi disegnare, scrivere, dipingere, ecc. Il risultato finale di un frame in Figma, quindi, non è altro che la composizione di uno o più livelli.

Funzionamento dei livelli in Figma
Puoi osservare il gioco di sovrapposizione fra i quattro cerchi che è possibile ottenere disponendo i livelli secondo un certo ordine

Ogni oggetto creato nella canvas di Figma corrisponde ad un nuovo livello. Se tale livello sarà creato entro i limiti di un frame, questo verrà inserito automaticamente all’interno del frame stesso.

Saper gestire i livelli in maniera ottimale vuol dire anche saper usare Figma, tienilo ben presente.

# Cosa sono i frame in Figma?

Ti ho parlato di frame ma è probabile che tu non conosca il significato assunto da questa parola nel contesto di Figma. Il frame può essere interpretato come la singola pagina su cui lavoriamo. In altri programmi di grafica sono chiamati Artboards o Tavole da disegno, anche se in realtà l’utilizzo che si fa dei frame in Figma può essere un po’ più avanzato.

Se hai aperto il file Creative Code Starter troverai nella sidebar dei livelli una lista di frame. Puoi riconoscerli perché accanto ad ognuno è indicata l’icona che fa riferimento proprio a questa tipologia di elemento. Puoi trovare la stessa icona anche nella toolbar e indica lo strumento per la creazione di nuovi frame, come vedremo tra poco.

Fai particolare attenzione alle icone riportate accanto a ciascun livello perché ti permetteranno di riconoscerne facilmente la natura.

Icona frame in Figma
Fai click sull’icona della toolbar per creare un nuovo frame

Seleziona dalla sidebar dei layers il frame Sample Wireframe. Noterai che sarà evidenziato un elemento della canvas con dei bordi blu e le relative dimensioni riportate in basso.

Provando a restare con il mouse sul livello Sample Wireframe dovresti notare la presenza di due simboli: un occhio e un lucchetto. Questi due pulsanti ti permettono di oscurare il frame, oppure di bloccarlo impedendo le interazioni effettuate dalla canvas.

# Spostarsi nella canvas

La prima cosa da fare per iniziare a usare Figma è capire come spostarsi nella canvas. Solitamente utilizzo gli shortcut da tastiera per muovermi nell’area di lavoro perché permettono di velocizzare di gran lunga le azioni più semplici.

Vediamo al volo i comandi più semplici:

  • Come muoversi sopra e sotto nella canvas? Molto semplice, utilizza la rotellina del mouse per scorrere l’area di lavoro su e giù;
  • Come mi muovo a destra e sinistra? Per muoverti lateralmente tieni premuto il tasto shift e muovi la rotellina verso il basso (movimento a sinistra) o verso l’alto (movimento a destra);
  • Come effettuo lo zoom in avanti e indietro? Tieni premuto il tasto CTRL oppure ⌘ e muovi la rotellina. Zoommi in avanti ruotando verso l’alto e indietro ruotando verso il basso;
  • Come mi posso spostare liberamente nella canvas? Tieni premuta la rotellina del mouse. Dovrebbe comparire una mano che ti permetterà di trascinarti liberamente nella canvas.

Perfetto, adesso sai tutto quello che ti serve per spostarti nell’area di lavoro. Prova ad avvicinarti al frame Sample Wireframe con una zoommata in avanti e centra il design nell’area di lavoro con gli shortcut che ti ho appena descritto.

# Uso avanzato dei frame

A questo punto seleziona dalla canvas uno degli elementi contenuti in questo design come la header, la hero section o il latest news in basso. Cliccando sulla header (l’area in alto che contiene logo e toggle menu), noterai che nella sidebar laterale il livello di riferimento si è aperto come in una classica struttura gerarchica a cartelle. Questa struttura ha rivelato l’esistenza di un nuovo frame chiamato per l’appunto Header.

Prima ti ho detto che il frame va trattato come se fosse una semplice tavola da disegno di Photoshop, ma in effetti questo concetto limita molto le possibilità e l’utilizzo che si fa dei frame in Figma.

I frame sono elementi che ti consentono di combinare più livelli per far sì che questi possano essere trattati contemporaneamente. Perciò un frame non è utilizzato solo come raggruppamento di base di tutto il nostro design, ma può articolarsi in tanti sotto frame che, messi insieme coerentemente, possono rappresentare vaste aree del nostro progetto.

Ogni sezione del sito web che andrai a sviluppare sarà inserita in un frame che potrà avere al suo interno altri frame, componenti, testi, immagini, ecc.

Allo stesso modo anche Header può essere aperto. Te ne potrai rendere conto dalla presenza di una freccetta nel riquadro del livello, che ti suggerisce la possibilità di essere aperto. Se non vedi la freccetta, prova a spostare il mouse sulla sidebar.

Proviamo ad espandere ulteriormente la struttura del design facendo click sulla freccetta accanto al nome del livello Header e osserviamo l’ossatura di questo frame.

Espandere livello dalla sidebar in Figma
Fai click sulla freccetta accanto al nome del livello per espandere il contenuto del livello

Fantastico, come puoi notare il livello Header è composto dalle istanze di due componenti: Logo e Toggle Button.

Provando ad espandere ulteriormente il livello dell’istanza Logo puoi rivelare un nuovo frame chiamato Mark, che sostanzialmente raggruppa tutti gli elementi vettoriali che compongono il logo.

Una volta che avrai imparato ad usare Figma potrai intervenire su frame come questo ed effettuare con cognizione di causa delle modifiche. Potrai ad esempio sovrascrivere il testo “creativecode.it” con qualcos’altro, oppure cambiare la colorazione e le caratteristiche di base degli elementi contenuti in Mark.

So che fremi per arrivare a questo livello, quindi proseguiamo con l’analisi dell’interfaccia di Figma passando alla toolbar in alto.

# Saper usare la toolbar di Figma

La toolbar o barra degli strumenti è la sezione che vedi in alto al programma e che raccoglie una serie di pulsanti/icone che ti permetteranno di operare sul tuo progetto.

# Il cursore di selezione (Move tool) e lo strumento scala (Scale tool)

Il primo strumento che trovi nella toolbar è il classico cursore di selezione o Move Tool a forma di freccia (shortcut V). Questo strumento ti consentirà di selezionare e spostare gli oggetti nella canvas. Il Move Tool può essere alternato con lo Scale Tool. Puoi selezionarlo aprendo il menu a scomparsa relativo al cursore di selezione o con lo shortcut K.

Move Tool e Scale Tool in Figma
Fai click sulla freccetta posta accanto l’icona del cursore per rivelare il menu a scomparsa

Lo scale tool è uno strumento utile a ridurre o aumentare proporzionalmente la scala degli elementi contenuti in un oggetto.

È possibile ridurre le dimensioni un elemento anche con il semplice cursore di selezione facendo click su di esso e trascinando l’angolo della selezione verso l’interno o l’esterno. Tuttavia lo scale tool garantisce un ridimensionamento proporzionale di tutti gli elementi contenuti nel livello evitando di conseguenza distorsioni e imprevisti che si presentano nel caso del cursore classico. Più avanti ti mostrerò un esempio che chiarisce ulteriormente questo concetto.

Scale Tool Figma
Ridimensionamento proporzionale del master component con lo Scale Tool.

# Strumento frame (Frame tool) e il pannello delle proprietà

Accanto il cursore di selezione è presente il Frame Tool ovvero lo strumento che permette di creare nuovi frame nella canvas. Questo strumento ci permette di dare un’occhiata ad un’altra area del programma importantissima su cui ci soffermeremo maggiormente nei prossimi tutorial.

Fai click sul Frame Tool e osserva la colonna di destra del programma. Come vedi, ogni strumento gode di un certo numero di opzioni che possono essere visualizzate ed editate nell’apposito pannello delle proprietà.

In realtà questa colonna assume un valore fondamentale soprattutto sugli oggetti presenti nella canvas perché non si limita a mostrare un elenco di opzioni da scegliere, ma offre una vasta gamma di possibilità per l’editing degli stessi, attraverso parametri che fissiamo a nostro piacere.

Nel caso specifico dello strumento frame, questa colonna ti da la possibilità di scegliere un formato standard da una serie di preset relativi ai display dei device più noti e non solo.

Ad esempio, ipotizzando di voler realizzare la versione desktop di Creative Code Starter fai click su una delle opzioni previste per il gruppo Desktop. (es. MacBook Pro).

Preset Frame Figma
Fai click su uno dei preset per generarne una copia nella canvas

Una volta fatto, vedrai comparire nella canvas un nuovo frame preconfigurato con dimensione 1440×900. Per ora non ci soffermiamo sulle proprietà degli oggetti presenti nella canvas, l’importante è che tu sappia perché esiste la colonna di destra e a cosa serve. A tempo debito vedrai come sfruttarla al meglio.

Già che ci sei, prova a spostare il frame appena creato con il move tool. Selezionalo dalla toolbar e prova a trascinare il frame in giro per la canvas. Dopodiché fai doppio click sul nome del livello e sostituisci MacBook Pro – 1 con Desktop.

# Strumento forma (Shape tool)

A destra del frame tool abbiamo lo shape tool. Questo strumento permette di disegnare le primitive e altri oggetti speciali nella canvas. In particolare puoi creare:

  • rettangoli (shortcut R);
  • linee (shortcut L);
  • frecce (shortcut Shift + L);
  • ellissi (shortcut O );
  • poligoni (a tre o più angoli);
  • stelle (poligoni speciali a più punte);
  • immagini (attraverso un sistema abbastanza simile al file importershortcut Ctrl + Shift + K ).

Per vedere tutte le opzioni, apri il sotto menu dello shape tool.

Prova a disegnare un rettangolo, un’ellisse e un triangolo nel frame Desktop. Come vedi, ogni oggetto creato entro l’area del frame, viene automaticamente inserito come suo sotto livello.

Come disegnare forme in un frame Figma
Come disegnare forme in un frame Figma. Osserva come va a riempirsi il frame Desktop senza neanche la necessità di tenerlo selezionato.

Prova a selezionare il livello Desktop e trascinalo nella canvas. Come ti dicevo, il frame è un Contenitore che consente di spostare contemporaneamente tutti oggetti posti al suo interno, come se ci portassimo in giro un astuccio pieno di penne e pastelli.

Ora ti pongo questa domanda: cosa succede se l’astuccio dovesse diventare più piccolo? Secondo te diventerebbero più piccoli anche gli oggetti al suo interno o semplicemente verrebbero tagliati fuori? Bhè dipende dallo strumento che usi… ricordi quando ti ho parlato di Scale Tool e Move Tool? Osserva il loro comportamento:

Scalare Frane in Figma (move tool)
Scalare Frame in Figma (scale tool)

Se vuoi capire come usare Figma al meglio hai bisogno di capire la differenza fra questi due strumenti.

MOVE TOOL: Se cerco di ridurre la dimensione del frame con il move tool, gli oggetti contenuti al suo interno verrebbero tagliati perché quel che sto facendo consiste nello spostare le estremità del frame da una parte all’altra. In questo senso Figma non riesce a comprendere che voglio ridurne semplicemente la dimensione. Per questo motivo, le forme che non rientrano nell’area ridotta, subiscono un crop.

SCALE TOOL: Riducendo le dimensioni del frame con lo scale tool non solo applico la modifica proporzionalmente, ma faccio in modo che i livelli contenuti all’interno facciano lo stesso.

# Strumento penna (Vector Tool)

Figma è un programma che lavora con oggetti di grafica vettoriale (non sai cos’è la grafica vettoriale o a cosa serve? Vedi il video di Marco Agustoni). Lo strumento penna è il classico tool utilizzato anche in altri software come Adobe Illustrator per il disegno di oggetti vettoriali.

Se sei pratico di programmi come Illustrator o Inkscape sappi che il vector tool di Figma vanta la caratteristica di essere particolarmente potente.

Prova a disegnare un martello in Figma con il Vector Tool e serviti delle smart guides per tirare delle linee dritte.

Se non ne hai mai sentito parlare delle smart guides, si tratta delle linee colorate (in arancione su Figma) che ti permettono di seguire un andamento dritto quando lavori con gli strumenti per la grafica vettoriale.

Disegnare martello con Vector Tool Figma
Disegna velocemente la forma di un martello su Figma e fai click su “Done” al termine

Come puoi constatare dalla sidebar dei layers, pur avendo costruito due tracciati separati (un rettangolo e una spezzata composta da tre segmenti), Figma interpreta questo disegno come un’unica composizione. Ciò significa che i punti di ancoraggio che collegano il manico alla testa del martello non sono interpretati come due oggetti distinti, come invece accadrebbe in altri software di grafica vettoriale.

Applicando una modifica su tali punti, quindi, andrei a modificare tutto il disegno e non solo la la parte del manico.

Editare martello disegnato con vector tool
Se collego due una forma chiusa ad una aperta, Figma interpreta questo disegno come un’unica icona.

La motivazione di questo comportamento è scaturita dal fatto che lo strumento penna viene usato in una modalità specifica per il disegno che non può essere interrotta finché non fai click sul pulsante Done in alto. Qualsiasi forma che ho realizzato prima, anche se staccata da quella precedente, verrà interpretata come un unico livello.

Essendo un’introduzione, non intendo andare troppo nello specifico del Vector Tool. Prossimamente scoprirai come creare delle icone e vedrai quanto è comodo e semplice questo strumento.

# Strumento testo (Text tool)

Accanto il Vector Tool trovi il Text Tool. Questo strumento è piuttosto comune e permette di creare dei campi di testo nel nostro design.

Prova ad andare sulla Hero section di Simple Wireframe e seleziona il livello Content. Adesso, attiva il text tool e modifica il testo del titolo.

In alternativa ti basta fare doppio click con il cursore di selezione su “Website description” e Figma attiverà automaticamente il text tool.

# Comment tool

Figma è dotato di un commenting system piuttosto funzionale che rende molto comode le attività del team in fase di progettazione. Facendo click sull’icona accanto il Text Tool potrai attivare lo speciale cursore di posizionamento del commento.

Decidi di aggiungere un commento in una qualsiasi area della canvas facendo click su di essa. Figma aprirà istantaneamente una finestra in cui potrai scrivere un post e taggare un tuo collaboratore a cui verrà inviata una notifica.

Fai click su un punto del tuo design, lascia la tua recensione o il tuo parere e tagga un tuo collaboratore
Fai click su un punto del tuo design, lascia la tua recensione o il tuo parere e tagga un tuo collaboratore scrivendo @nome_collaboratore

Fantastico, con questo tutorial hai termianto tutta la parte introduttiva del programma.

Adesso conosci i movimenti di base e gli strumenti principali. Sei hai letto con attenzione tutte le sezioni di questo articolo, sei pronto per iniziare a lavorare con le forme e la grafica vettoriale!

“Disegnare in vettoriale con Figma” sarà online entro il 23 Dicembre 2019! Guida alla progettazione di siti web con Figma.

Vai sulla nostra pagina Facebook e seguici per non perderti gli aggiornamenti dal sito.