Grafica vettoriale con Figma

Scopri come disegnare in vettoriale con Figma realizzando icone personalizzate

creativecode avatar Giulio Tiseo

23 Dic, 2019

~10min.

In questo tutorial ti mostrerò come disegnare in vettoriale con Figma attraverso la creazione di icone personalizzate.

Grafica vettoriale con Figma
Requisiti

In questo tutorial ti parlerò dei componenti dando per assodato che tu conosca le basi di questo argomento. Se ancora non hai letto nulla a riguardo ti consiglio di leggere l’approfondimento sui componenti Figma.

È inoltre importante che tu segua correttamente il percorso delle lezioni presenti nella guida alla Progettazione di siti web con Figma. In particolare, devi aver completato interamente il tutorial precedente in cui ti spiego le basi del programma.

Una delle cose più interessanti che puoi trovare in Figma è la possibilità di disegnare online elementi di grafica vettoriale in modo completamente gratuito. Grazie a Figma potrai sfruttare liberamente strumenti simili a quelli che trovi in software come Adobe Illustrator, Corel Draw o Affinity designer. Ovviamente il toolset di Figma per la grafica vettoriale si limita agli strumenti essenziali, ma ti assicuro che se l’uso che fai dei programmi di grafica è concentrato sul design di siti web o app, sarà il massimo che vorrai avere.

Seguimi se vuoi capire come creare elementi vettoriali con Figma e per conoscere trucchi e metodi avanzati utili alla progettazione di grafiche per il web.

# Preparazione del file

Come prima cosa, torna sul progetto “Progettare siti web con Figma” e apri il il file Strumenti di base che hai creato nel corso del primo tutorial.

A questo punto, se hai seguito la lezione dove ti spiego come usare gli strumenti di base di Figma, dovresti essere in grado di creare un nuovo frame senza particolari difficoltà.

Nel nostro caso specifico, non ricorreremo a nessuno dei preset suggeriti da Figma ma andremo a realizzare un frame con dimensioni custom.

Dopo aver selezionato lo strumento frame, dovresti notare un cursore a forma di croce non appena entri con il mouse nell’area di interesse della canvas. Fai click e trascina il cursore per estendere l’area del frame nel punto che preferisci. Cerca di realizzare un rettangolo di dimensioni 1280×720 aiutandoti con i riferimenti che trovi sotto il perimetro del frame che stai disegnando.

Se non riesci a ottenere subito le dimensioni esatte non preoccuparti. Una volta creato un qualsiasi oggetto, puoi applicare dei valori ad una serie di parametri strutturali in modo da perfezionare l’editing.

Per ottenere un frame di dimensioni precise, ti basta selezionarlo e andarne a modificare le caratteristiche dal pannello delle proprietà (sidebar destra).

Imposta quindi le dimensioni W: 1280 (width) e H: 720 (height) per ottenere il ritaglio di un frame che rispetta lo standard HD.

Fatanstico, questa sarà la base del nostro player!

# Creare una nuova pagina in Figma

Nel primo tutorial della guida alla Progettazione di siti web con Figma ti ho spiegato da cosa è composta la file structure di Figma introducendo il concetto di Pages, senza però entrare nello specifico dell’argomento.

Le pages hanno lo scopo di dare ordine al tuo flusso di lavoro permettendoti di gestire ogni area della progettazione in documenti diversi. Questo approccio ti permetterà di stimolare la creatività e di lavorare in un ambiente molto più comodo e rilassato.

Personalmente faccio spesso fatica a lavorare nel caos e non mi trovo a mio agio finché non ho finito di riordinare gli appunti che raccolgo nella fase di brain storming (leggi l’introduzione al metodo progettuale per capire di cosa sto parlando).

Questa mia paranoia coincide spesso con la realtà di molti designer che preferiscono lavorare separando ogni singola area della progettazione in documenti diversi per focalizzare tutta l’attenzione su un determinato aspetto.

Ti suggerisco di fare lo stesso e di sfruttare le pages per separare la progettazione del player in canvas diverse.

Sulla sidebar dei livelli (sidebar sinistra) puoi notare la voce Page 1, con una freccetta laterale che ti permette di espandere la relativa sezione. Fai click su di essa per rivelare il pannello Pages della sidebar.

Per cominciare, rinomina Page 1 in Video Player – MASTER, dopodiché aggiungi una nuova pagina facendo click sul simbolo +.

Rinomina la nuova pagina come Icon Design e crea un nuovo frame di dimensioni 1000×1000.

# Cambiare il colore di background di un Frame

Per cambiare il colore di background di Figma da #FFFFFF(colore di default) a grigio, ti basterà selezionare il frame e sostituire il valore contenuto in fill con C4C4C4

Cambiare il colore di riempimento di un Frame in Figma

Nel nostro esempio resteremo sul valore di riempimento che è impostato di default (#FFFFFF), ma non trascurare quest’informazione perché ti sarà utile fra poco quando lavorerai con le forme.

# Pulsante play: disegnare in vettoriale con Figma

Il frame appena creato sarà l’area in cui andremo a realizzare l’icona vettoriale del nostro player. Per cominciare, iniziamo dal pulsante più classico: il play button.

Prima di tentare una soluzione a caso, cerchiamo di scomporre mentalmente tale icona in una o più forme geometriche. È chiaro che con il tasto play o il pause questo ragionamento sembrerà banale, ma vedrai che questo approccio ti aiuterà più avanti con le icone più complesse.

La domanda che dovrai porti in questo caso sarà: da cosa è composto di solito il tasto play?

Risposta: da un triangolo isoscele inscritto in un cerchio.

# Tecniche di base per il disegno vettoriale

Come prima cosa direi di iniziare dal cerchio che fungerà da base dell’icona. Apri il menu dello Shape Tool e seleziona Ellipse. Ammettendo di voler lasciare 10px di margine ad ogni lato, dovrai creare un cerchio di diametro 980px.

Puoi creare un cerchio in tre modi:

  1. Fai click sulla canvas e trascina per creare una nuova forma vettoriale ellittica partendo dall’angolo in alto a sinistra della forma;
  2. Seguendo la stessa procedura del passo precedente e mantenendo premuto il tasto ALT, puoi creare l’ellissi partendo dal centro della forma;
  3. Cliccando sulla canvas in un punto qualsiasi, puoi generare in automatico un cerchio di dimensioni 100×100;

Nei primi due casi, se vuoi realizzare un cerchio e non un ovale, hai bisogno di tenere premuto anche il tasto SHIFT che permette di creare o scalare forme in modo proporzionato.

Creare un cerchio partendo dall'angolo in alto a sinistra
Creare un cerchio partendo dall’angolo in alto a sinistra tenendo premuto il tasto SHIFT
Creare un cerchio partendo dal centro tenendo premuto il tasto ALT + SHIFT
Creare un cerchio partendo dal centro tenendo premuto il tasto ALT + SHIFT

Per definire le dimensioni corrette della circonferenza a 980px, puoi scegliere di impostarle dal pannello delle proprietà così come abbiamo fatto per il frame all’inizio del tutorial.

Se la nuova forma non sarà perfettamente allineata al frame puoi correggere questa imperfezione con gli strumenti di allineamento.

Dopo aver selezionato il cerchio, puoi notare in alto a destra una serie di icone che ti indicano il metodo di allineamento che puoi applicare a due o più forme. Nel nostro caso vogliamo centrare la circonferenza nel frame sia verticalmente che orizzontalmente. Osserva lo la gif in basso per capire come:

Allineare al centro verticalmente e orizzontalmente una forma in Figma
N.B. Nella gif viene mostrato come allineare un cerchio ad un quadrato (inteso come forma rect). Come vedi, per disporre in un determinato modo più forme devo effettuare una seleziona multipla. Se invece vuoi allineare la forma al frame ti basterà selezionare il cerchio e fare click sui bottoni di allineamento senza effettuare alcuna selezione multipla (accertati prima che siano nello stesso livello).

Adesso voglio rendere trasparente il riempimento del cerchio e dare uno spessore di 50px al perimetro.

Puoi cancellare una qualsiasi proprietà dalla sidebar destra, cliccando sul simbolo - adiacente alla proprietà stessa. Al contrario, per aggiungerne una nuova fai click sul +.

Aggiungere o cancellare proprietà in figma
Fai click sul `-` per rimuovere la proprietà oppure su `+` per aggiungere una nuova.

Dopo aver rimosso il colore di riempimento dal cerchio, aggiungi uno contorno spesso 50px nella sezione Stroke.

Aggiungere contorno in una forma Figma
Aggiungere contorno in una forma Figma

# Disegnare in vettoriale poligoni: completiamo il tasto play

Nell’esercizio della circonferenza hai scoperto qualche shortcut e trucchetto che ti sarà utile per completare questo esercizio.

Per completare il play button hai bisogno di creare un triangolo isoscele centrato orizzontalmente e verticalmente rispetto al cerchio. Se sei arrivato fin qui sarà sicuramente un gioco da ragazzi ottenere un risultato simile a questo:

Creare in vettoriale play button
Un triangolo isoscele di altezza 530px e larghezza 604px centrato orizzontalmente e verticalmente rispetto al cerchio.

Ruotare un oggetto in Figma

L’icona è chiaramente incompleta e ci sono diverse cose su cui possiamo ancora lavorare. Innanzi tutto, seleziona i due livelli che compongono questa forma (Polygon e Ellipse) e trasforma la selezione in componente con lo shortcut: Ctrl + Alt + K. Rinomina il componente come Play Button.

Adesso, ruota l’intero componente di 90 gradi: selezionalo e servendoti delle maniglie di rotazioni che compaiono in prossimità degli angoli della selezione, fai click e trascina. Per effettuare una rotazione a step di 15 gradi, tieni premuto il tasto SHIFT. Una volta che sarai sceso di -90 gradi rispetto alla posizione originale, dovresti aver ottenuto una forma simile a questa:

Tasto play vettoriale dritto
Tasto play vettoriale

# Migliorare una forma vettoriale con bordi e radius

Adesso è ora di migliorare il design di questo bottone. Puoi cominciare rendendo meno spigoloso il triangolo centrale, smussando di 30px gli angoli. Sfrutta la proprietà Corner radius che trovi sulla destra per impostare il valore su tutti gli angoli del triangolo.

Smussare gli angoli di una forma in Figma
Smussare gli angoli di una forma con il corner radius

A questo punto non resta che rimuovere il colore di riempimento e aggiungere al triangolo un bordo di 50px per ottenere un risultato uguale a questo:

Play button completo realizzato con Figma
Play button completo realizzato con Figma

Se sei arrivato fino a questo punto e non hai riscontrato alcuna difficoltà, puoi chiudere l’esercizio rinominando il frame in Play Button e ridurne la dimensione con lo scale tool per ottenere un’icona di dimensioni 100×100.

Fantastico, la prima icona vettoriale è completa!

# Editare e combinare forme vettoriali semplici per creare disegni più avanzati

Il play button è solo un assaggio di quello che puoi ottenere con i Vector Tools.

Icona cartella customizzata con Figma
Icona cartella customizzata con Figma

Osserva con attenzione l’icona in alto e cerca di scomporla mentalmente in forme primitive.

L’icona di una cartella è costituita da un rettangolo combinato con un trapezio.

Scomposizione dell'icona di una cartella
Scheletro dell’icona di una cartella

Non essendo presente in figma la forma di una trapezio, puoi raggiungere questo risultato andando a modificare le proprietà del rettangolo. Un trapezio rettangolo in fondo cos’è se non un rettangolo che ha un vertice spostato più in avanti?

Come puoi notare il vertice inferiore del rettangolo blu è spostato più a destra rispetto al resto della figura. Per ottenere delle forme irregolari di questo tipo ti occorre andare a lavorare sui singoli punti dell’immagine vettoriale.

Crea due rettangoli (846×508 / 626×490). Disponi le due forme come vedi nell’immagine in alto, servendoti degli strumenti di allineamento.

Dopodiché, fai doppio click con il cursore di selezione sulla forma in secondo piano. Dovresti veder comparire dei tondini in corrispondenza di ciascun vertice (punti di ancoraggio). In questa modalità (vector mode) puoi intervenire sui singoli punti andando a modificare le caratteristiche di base dell’oggetto. Per cui, seleziona uno dei vertici per trasformare il rettangolo in un trapezio (vedi animazione in basso).

Al termine dell’operazione fai click sul bottone Done per confermare le modifiche e uscire dalla Vector Mode.

Modificare punti di ancoraggio in Figma
Fai doppio click sull’oggetto, entra in Vector Mode e lavora sui singoli punti di ancoraggio

# Introduzione alle operazioni booleane

Dai un colore di riempimento ad entrambi i rettangoli e rimuovi il contorno. Rinomina anche i due livelli in Oggetto in primo piano e Oggetto in secondo piano.

A questo punto hai bisogno di sapere come combinare due immagini vettoriali in un singolo oggetto. In Figma esistono quattro funzioni che permettono di eseguire delle combinazioni avanzate fra due disegni vettoriali:

  1. Unione (Union Selection);
  2. Sottrazione (Subtract Selection);
  3. Intersezione (Intersect Selection);
  4. Esclusione (Exclude Selection);

Puoi trovare queste opzioni dopo aver selezionato entrambe le figure, nel menu delle boolean groups che vedi comparire in alto.

Operazione booleane Figma
Il menu delle operazione booleane è visualizzabile solo dopo aver selezionato due oggetti della canvas

Nel nostro caso abbiamo bisogno di unire i due oggetti in modo tale che i contorni possano sommarsi escludendo tutte le linee interne alla selezione.

Operazione booleana (union selection) in Figma
Operazione booleana (union selection) in Figma

Adesso smussa gli angoli di 30px per ammorbidire un po’ l’icona.

Se presti attenzione a quest’ultima operazione puoi notare come effettivamente sia stato applicato il corner radius a tutti gli angoli tranne che a quello in basso a sinistra.

Questa situazione accade perché quel punto coincide con il punto di ancoraggio che lega i due oggetti fra loro. Per poterlo smussare hai bisogno di intervenire sull’oggetto in primo piano.

A differenza di altri software di grafica vettoriale, Figma conserva lo stato precedente degli oggetti anche dopo le operazioni booleane. Espandi il livello Union e seleziona l’oggetto in primo piano. Adesso applica nuovamente un radius di 30px per fare in modo che la modifica sia applicata a tutti gli angoli.

Non mi dilungo troppo nell’aggiungere altri dettagli all’icona. Se vuoi puoi cercare di ottenere lo stesso risultato mostrato in precedenza giocando con gli strumenti che ti ho mostrato nel corso di questo tutorial.

Intanto, rimuovi il colore di riempimento e aggiungi 50px di contorno.

Icona cartella realizzata in Figma
Icona cartella realizzata in Figma

Trasforma il tutto in un componente chiamato Folder Icon e riduci il frame alla dimensione 100×100 con lo Scale Tool.

Vuoi altri esercizi pratici sul disegno vettoriale?

È possibile realizzare un quantità immane di icone con Figma ed è davvero difficile riuscire a mettere tutto insieme in un singolo articolo. Se questo tutorial ti è piaciuto e vuoi sapere come realizzerò il design di tutte le altre icone, ti invito a mettere un like alla pagina Facebook.

VAI ALLA PAGINA FACEBOOK

Al raggiungimento di 50 iscrizioni sulla pagina pubblicherò un video tutorial completo dove ti mostrerò tutti passaggi per realizzare tutte le icone che vedi in basso:

Icone da realizzare su Figma