Le immagini in Figma

Nell’articolo precedente ti ho mostrato la base per realizzare delle icone personalizzate attraverso gli strumenti di grafica vettoriale. In questo, voglio mostrarti come usare le immagini raster in Figma.

Essendo Figma un tool specifico per progetti web, le immagini sono trattate in modo lievemente differente dai comuni software di grafica. Non pensare che questa caratteristica possa essere penalizzante, anzi…

Sei sei un web designer o lavori in una web agency, Figma sarà per te un ambiente confortevole anche se l’uso che fai dei software di grafica si limita al semplice editing.

# Metodi di caricamento delle immagini

# Posizionare le immagini nell’area di lavoro dalla barra degli strumenti

Per lavorare con le immagini in Figma, hai bisogno di sapere prima di tutto come importarle nell’area di lavoro. Torna sul file che abbiamo creato precedentemente (Strumenti di base) e crea una nuova pagina chiamata Editing Images. Per caricare un’immagine in questa pagina, apri il menu a tendina cliccando sul burger menu a sinistra, vai su File e seleziona la voce Place Image (oppure attiva la funzione con lo shortcut Ctrl + Shift + K). Puoi effettuare la stessa operazione anche attraverso la toolbar di Figma, accedendo al sotto menu dello strumento forma.

# Posizionare immagini multiple nella canvas

Una caratteristica piuttosto interessante del metodo Place Image, consiste nell’effettuare dall’esplora risorse una selezione multipla delle immagini. Questa funzionalità permette allo stesso tempo di mantenere un perfetto controllo degli oggetti in fase di posizionamento.

Come puoi notare infatti, se esegui una selezione multipla di immagini e fai click sul bottone Apri, esse non saranno importate direttamente nella canvas. Ogni immagine verrà caricata in uno stack provvisorio, in attesa di essere posizionata. Con questo sistema hai la possibilità di rilasciare ciascuna immagine nel punto che desideri.

Per ottenere degli oggetti con dimensioni diverse esegui un click & drag come se stessi creando una nuova forma.

Se analizzi l’immagine con maggiore attenzione dalla barra delle opzioni, noterai che essa non viene interpretata in Figma come un tipo a sé, ma è trattata proprio come riempimento (Fill) di una forma.

Ciò vuol dire che quando posizioniamo un’immagine su Figma, non facciamo altro che creare un oggetto a cui verrà applicato come riempimento l’immagine selezionata. Questa logica di inserimento è molto famigliare ai web designer, a cui capita spesso di caricare le immagini come background dei <div>.

È questo il motivo per cui il metodo di inserimento delle immagini in Figma non è chiamato Import image come in altri software, bensì Place Image (posiziona immagine).

# Posizionare le immagini in oggetti preesistenti

Il place image offre vantaggi non indifferenti perché rende le operazioni di ridimensionamento e sostituzione delle immagini estremamente semplici, senza incorrere in problemi di distorsione.

A questo punto si aprono diversi scenari, perché se le immagini sono interpretate come riempimento di una figura, evidentemente potrò posizionarle a partire da oggetti preesistenti. In pratica avrò modo di scegliere l’immagine di riempimento di una forma, dopo averla creata.

Segui questo procedimento:

• Disegna un quadrato, un cerchio e un triangolo sulla canvas;
• Apri il sotto menu dello strumento forma e seleziona il metodo Place Image;
• Seleziona dall’esplora risorse che comparirà in sovrapposizione all’area di lavoro 3 immagini e fai click su Apri;
• Appena l’esplora risorse si chiuderà, potrai cliccare nuovamente su una delle tre forme per applicare la prima immagine dello stack al riempimento dell’oggetto (che di default è un solid gray #C4C4C4).
• A questo punto procedi con le restanti immagini cliccando sulle altre due forme.

# Importare l’immagine dal web

Se non vuoi scaricare l’immagine direttamente sul sistema operativo, Figma ti permette di saltare questa fase e di copiarla direttamente dal browser. Prova a cercare un’immagine in rete, copiala e torna sull’area di lavoro in Figma. A questo punto ti basterà eseguire un semplice incolla con CTRL + V per veder comparire l’immagine sulla canvas.

# Sostituire l’immagine

Se desideri sostituire un’immagine con un’altra, puoi farlo in modo molto semplice attraverso il pannello delle proprietà. Seleziona l’oggetto su cui intendi intervenire e fai click sul parametro Image presente nella sezione Fill, all’interno del pannello delle proprietà. Una volta selezionato il riempimento si aprirà una piccola finestra mobile che ti permetterà di sostituire l’immagine caricata, con un’altra.

Per farlo, sposta il mouse sul piccolo riquadro che mostra la preview dell’immagine. Noterai che al passaggio del cursore in quest’area, comparirà il bottone Choose Image. Fai click su di esso per aprire nuovamente l’esplora risorse e selezionare la nuova immagine.

# Drag and Drop e introduzione alle Smart selection

Le immagini possono essere caricate singolarmente o in modalità multipla anche attraverso un semplice drag & drop, trascinando i files dall’esterno del programma all’interno dell’area di lavoro.

Con questo metodo puoi iniziare a fare pratica con alcune delle funzionalità più avanzate presenti in Figma, che riguardano il posizionamento e l’allineamento di gruppo attraverso le smart selections.

Per cominciare, trascina nell’area di lavoro un gruppo di immagini. Una volta visualizzate nella canvas, potrai gestire in modo particolarmente fluido la distanza che intercorre l’una dall’altra o scambiarne la posizione.

Per attribuire un margine pari a ciascuna immagine, ti basterà sfruttare le maniglie fucsia che compaiono tra un oggetto e l’altro (ricorda di restare con tutti gli oggetti selezionati). Trascinando tali maniglie verso destra o verso sinistra, potrai attribuire lo stesso margine ad ogni figura.

Un’altra soluzione consiste nello scambiare di posto l’oggetto di una selezione con un altro presente nel gruppo, trascinando gli anchor point (i pallini fucsia posti al centro di ogni immagine). Questa soluzione è molto comoda qualora tu abbia bisogno di creare una griglia di immagini stile feed di Instagram.

# Tecniche di editing dell’immagine

# Editare le immagini su Figma

Passiamo ora all’editing delle immagini. Figma non è un tool pensato per effettuare operazioni di foto ritocco, tuttavia offre una serie di funzionalità che possono tornare utili, come ad esempio la regolazione dei valori di contrasto, luminosità, esposizione, saturazione, ecc.

Per mettersi all’opera su queste semplici regolazioni basterà selezionare l’immagine e agire sul livello di riempimento che troviamo nel pannello delle proprietà. Come puoi notare, sotto l’anteprima dell’immagine che ci viene mostrata, abbiamo una serie di parametri che possiamo modificare facendo scorrere uno slider orizzontale.

Se sei pratico di altri software per l’editing delle immagini, non avrai alcuna difficoltà a comprendere il tipo di modifica che andrai ad applicare.

In caso contrario, sta tranquillo ti guido io:

• Exposure: ti permette di regolare la quantità di luce presente nell’immagine.
• Contrast: detto in parole molto semplici ti permette di contrastare o, al contrario, appiattire l’immagine. In termini tecnici, serve a regolare quella che è definita la gamma tonale dell’immagine. Per cui spostando il cursore verso destra o verso sinistra puoi scegliere di limitare o espandere l’intervallo di tutti i valori tonali che compongono l’immagine. Se aumentiamo il valore di contrasto, espandiamo l’intervallo tonale tra un’area e l’altra. Se lo riduciamo avremo l’effetto contrario, cioè un restringimento di tale intervallo che causerà una maggiore uniformità e appiattimento dell’immagine.
• Saturation: interviene sul colore intensificando o indebolendo l’insieme delle tonalità che compongono l’immagine. *Piccolo trick: spingendo la saturazione a 0, otterrai facilmente un’immagine in bianco e nero!
• Temperature: serve a dare carattere all’immagine applicando un sorta di filtro freddo (blu) o caldo (arancione).
• Tinta: è uguale al parametro della temperatura, solo che permette di effettuare la regolazione dal verde al rosso.
• Highlights: amplifica o limita l’intensità dei punti di luce presenti nell’immagine.
• Shadows: amplifica o limita la presenza di aree scure nell’immagine.

# Analogie Figma – CSS: metodi di riempimento degli oggetti

Chi leggerà quest’articolo con un bagaglio base di CSS capirà subito l’utilità di gestire le immagini attraverso Figma.

Quando aggiungiamo un’immagine come metodo di riempimento di un rettangolo, abbiamo la possibilità di scegliere fra quattro metodi di riempimento: Fill (riempi), Fit (adatta), Crop (ritaglia), Tile (replica). In CSS è piuttosto semplice convertire questi metodi in codice:

# Il metodo FILL

Il metodo fill permette di espandere le dimensioni dell’immagine lungo tutta l’area dell’oggetto, in modo che possa ricoprirlo interamente. Questa soluzione può causare dei ritagli qualora non venissero rispettate le proporzioni dell’immagine.

Come si potrebbe scrivere il metodo Fill in CSS?

/* Esempio di conversione del metodo Fill */
div {
background-image: url(http://placekitten.com/g/200/200);
background-size: cover;
background-position: center center;
}

# Il metodo FIT

Non importa quali siano le dimensioni dell’oggetto, l’immagine dovrà essere contenuta al suo interno e mostrata interamente. Questo non provocherà alcun ritaglio dell’immagine ma potrebbe causare la creazione di spazi vuoti nel box dell’immagine.

Come scriveremmo il metodo FIT in CSS?

/* Esempio di conversione del metodo Fit */
div {
background-image: url(http://placekitten.com/g/200/200);
background-size: contain;
background-position: center center;
}

Nella gif seguente ti mostro un esempio pratico della differenza che c’è tra fit e fill in Figma.

# Il metodo CROP

Puoi ridimensionare l’immagine a tuo piacimento e riposizionarla entro i limiti dell’oggetto a cui appartiene.

Ecco un esempio di come si potrebbe riscrivere in CSS il metodo crop:

/* Esempio di conversione del metodo Crop */
div {
background: url(http://placekitten.com/g/200/200);
background-size: 200px 200px;
width: 100%;
height: 200px;
background-repeat: no-repeat;
background-position: center center;
}

# Il metodo TILE

Puoi creare pattern e tiles replicando l’immagine entro l’area dell’oggetto. Puoi ovviamente scegliere la dimensione della singola tile per ottenere un numero maggiore o minore di copie come riempimento della forma.

In CSS il metodo tile può essere scritto in modo abbastanza simile al metodo crop, eccezion fatta per l’istruzione background-repeat.

/* Esempio di conversione del metodo Tile */
div {
background: url(http://placekitten.com/g/200/200);
background-size: 200px 200px;
width: 100%;
height: 200px;
background-repeat: repeat;
background-position: left center;
}

Nella .gif in basso ti mostro un’animazione che ti aiuta a capire meglio il comportamento dei metodi crop e tile.

Ora che hai imparato le basi delle immagini in Figma, sei pronto per cominciare ad affrontare gli argomenti più complessi. Dal prossimo articolo inizieremo a creare i primi UI components basati su casi di studio reali. In questo modo potrai approfondire gli aspetti più avanzati del programma e iniziare finalmente a realizzare qualcosa di concreto.

Al prossimo appuntamento!