Verifica

In questa esercitazione dovete consegnarmi il seguente materiale:

1. Scaricate una fotografia orizzontale di una animale da Unsplash. La foto dovrà essere trasformata in 1200×800 e 500×500, salvate entrambe in .jpg e nominare i file con “nome animale + risoluzione”
2. Creare un file Web Grande (1920×1080) e al suo interno realizzare una composizione di immagini e logo di un azienda a scelta tra le seguenti: Chicco, Barbie oppure Lego. Il file dovrà essere salvato sia in formato photoshop (.psd) sia in formato JPG (.jpg).
3. Trasformare i colori delle immagini che trovate nel link download qua a seguito nel seguente modo: Mattoncini lego e il berretto del cane passano da Giallo a Rosso in entrambe, mentre nel controller entrambi gli stick rimovibili dovranno essere verdi (invece di blu e rosso). Consegnare i file in .jpg.

Download

Modalità di consegna

Dovete realizzare tutti gli elaborati all’interno di una cartella nominata con vostro nome e cognome (tutto stampatello minuscolo e con spazio tra nome e cognome). Una volta finito condividere la cartella in air drop.

Valutazione

Verrano valutate le competenze in generale, la qualità del lavoro e i tempi di sviluppo. Ricordate di nominare i file nel modo coretto e tenere una disposizione ordinata.

Prototipi

I prototipi consentono di far interagire i vari componenti delle varie slide. Esempio se creo un menu, con i vari pulsanti posso passare da una pagina all’altra al click.

Per attivare un prototipo utilizziamo il menu nella barra di destra “Prototype”.

Una volta selezionato un componente possiamo decidere di aggiungere un azione relativa al quel componente. Se cliccando e tenendo premuto sul simbolo + accanto al componente, trasciniamo e rilasciamo il mouse su un altra slide i due elementi verranno collegati. Nella barra di destra comparirà un pannello dove possiamo impostare i vari comportamenti dell’interazione. L’azione principale è “On Click”, vuol dire che al click del componente possiamo passare alla frame di destinazione.

Possiamo verificare cioè facciamo nella sezione prototype cliccando sul triangolo di Play in altro a destra.

Animazioni Base tra Slide

Analizzando il pannello di comportamento quando creiamo una connessione nella modalità prototype, troviamo una sezione chiamata animation.

In animation possiamo decidere il tipo di transizione tra una slide e un altra. Di base è impostato in “Instant”, il che vuol dire che l’animazione sarà istantanea. Oppure possiamo usare le varie dissolvenze anche impostando i tempi di transizione.

Interessante è l’impostazione “smart animate” che ci consente di far interagire tra di loro i componenti presenti in entrambi le slide.

Nelle impostazione di animazione impostare Ease in out come metodo e il tempo va espresso in millisecondi.

Gestione avanzata componenti

Quando creiamo un componente possiamo creare più varianti dello stesso componente da utilizzare nelle sue istanze.

Una volta creato il componente basta selezionare il componente appena creato e cliccare nella parte alta, nello stesso punto del comando “crea componente”, troveremo il comando aggiungi variante.

In questo modo quando andremo a creare un istanza del nostro componente possiamo scegliere quale variante utilizzare.

Nel seguente esempio ho creato due slide una a tema chiaro e una a tema scuro. Successivamente ho creato un componente interruttore che mi consente di passare da una slide all’altra, questo componente ha due varianti una per la schermata chiara e uno per la schermata scura.

Gruppo Booleano

Questo tipo di gruppi servono per effettuare operazioni tra forme. Quando disegniamo più forme possiamo farle interagire tra loro utilizzando questi gruppi.

Il tasto di attivazione lo troviamo nella parte alta e ci consentono di sommare, sottrarre o intersecare le varie forme.

Verra creato un gruppo con al suo interno le varie forme selezionate ma come risultato visivo otterremo il risultato dell’operazione scelta.

Esempio la luna dell’esempio precedente è stata creata utilizzando l’operazione sottrai tra due cerchi sfalsati uno sopra l’altro.

Esercizio: Toggle per la dark mode

Creiamo un due frame dimensione desktop nel seguente modo:

---

Disegnamo il toggle creiamo un rettangolo di fondo dimensioni 60×30 e un cerchio 22×22 posizioniamo nel seguente modo:

---

Utilizziamo il plug-in Material Symbols per le icone. Attenzione quando creeremo le icone saranno posizionate all’ esterno del frame, spostarle all’interno.

---

Selezioniamo il risultato finale e creiamo il componente:

---

Spostiamo il componente all’esterno del frame e creiamo una nuova variante. Rinominiamo le varianti Light e Dark:

---

Cambiamo i colori della modalità dark e spostiamo il cerchio:

---

Nella sezione asset prendiamo il componente e lo posizioniamo nella prima slide. Poi copiamo e incolliamo nella stessa posizione nella seconda slide e successivamente selezioniamo la variante “Dark”.

---

Entriamo nella modalità prototipo e colleghiamo il pulsante della prima slide con la seconda e viceversa:

---

Premiamo play in altro a destra per provare l’animazione.

Librerie in Figma

Le librerie di Figma sono uno strumento potente che permette di creare e salvare stili (come colori, caratteri e altri effetti) per poterli riutilizzare in modo semplice e coerente nei progetti. Una delle principali funzionalità è che, modificando uno stile salvato, tutti gli elementi che utilizzano quello stile vengono aggiornati automaticamente.

Come Creare un Colore come Stile

• Vai al pannello laterale di destra e trova un’impostazione che supporta i colori, ad esempio Fill (riempimento).

• Clicca sull’icona con i quattro puntini accanto al colore attuale per accedere alle librerie.

• Nel pannello Library, clicca sul pulsante + per aggiungere un nuovo stile.

• Dai un nome al colore e, se desideri, una descrizione che spieghi come e dove utilizzarlo.

• Conferma cliccando su Crea Stile.

⚠️ Nota: Non utilizzare le variabili.

Una volta creato, il colore del tuo elemento cambierà da “custom” al nome dello stile appena definito. Per scollegare un elemento dal suo stile basta cliccare sull’icona della catena spezzata accanto al colore.

Attenzione: Scollegare lo stile da un elemento non comporta la sua eliminazione dalla libreria.

Visualizzare e Gestire gli Stili

Se deselezionamo tutto cliccando su uno spazio vuoto nella tua area di lavoro. Nel pannello laterale destro apparirà l’elenco di tutti gli stili creati (colori, testi, effetti, ecc.). Puoi rinominare, modificare o eliminare gli stili direttamente da questo elenco.

Avanzato: Puoi creare delle cartelle nei stili, basta inserire il nome della cartella, seguito da uno slash ( / ) e poi il nome dello stile.

Esercitazione 1

Impostare una schermata di style guide come quella seguente. Font per le indicazioni IBM Plex Mono.

⚠️ Attenzione: Nome file “Lezione 7”.

Componenti

I componenti in Figma sono elementi riutilizzabili che permettono di creare interfacce più coerenti ed efficienti. Sono particolarmente utili per elementi ripetuti come pulsanti, card, icone o sezioni di un’interfaccia.

Quando crei un componente, puoi utilizzarlo in più parti del progetto e, se lo aggiorni, tutte le sue istanze si aggiorneranno automaticamente.

Creare un Componente

• Crea un pulsante, un’icona o un qualsiasi elemento che vuoi riutilizzare.

• Seleziona l’elemento e premi CMD + ALT + K (Mac) o CTRL + ALT + K (Windows), oppure clicca con il tasto destro e scegli Create Component.

• Noterai un’icona 🟣 viola accanto al livello nel pannello Layers.

Utilizzare un Componente

Dopo aver creato un componente, puoi utilizzarlo in diverse parti del progetto:

• Trascinandolo dalla libreria Assets.

• Copiando e incollando l’elemento direttamente nell’area di lavoro.

Se aggiorni il componente Master, tutte le sue istanze si aggiorneranno automaticamente. Puoi personalizzare alcune proprietà delle istanze senza perdere il legame con il master (ad esempio, cambiare testo o colore di un pulsante).

Se vuoi scollegare un’istanza dal componente principale, seleziona l’istanza e clicca su Detach Instance dal menu di destra.

Varianti dei componenti

Le varianti permettono di creare più versioni di uno stesso componente (es. pulsante attivo/disattivo, grande/piccolo, con/senza icona) mantenendo tutto organizzato all’interno di un unico elemento.

Creare Varianti di un Componente

Per aggiungere una variante seleziona il Componente e clicca sul + in alto a destra.

Imposta le Proprietà delle Varianti

• Nella sezione “Variants”, assegna un nome alle diverse varianti.

• Aggiungi proprietà personalizzate per modificare colore, dimensioni o stato.

Figma creerà automaticamente un single component con più varianti accessibili dal pannello delle proprietà.

Quando utilizzi un componente con varianti:

• Seleziona l’istanza nell’area di lavoro.

• Nel pannello laterale Properties, troverai un menu a tendina per selezionare la variante desiderata.

Le varianti permettono di gestire le modifiche in modo più intuitivo e organizzato, senza dover creare e gestire molteplici componenti separati.

Organizzare il lavoro

Un’organizzazione efficiente del progetto in Figma aiuta a mantenere ordine, migliorare la collaborazione e velocizzare il flusso di lavoro. Una buona pratica è suddividere il progetto in più pagine per separare design, componenti e altre risorse.

Le pagine si trovano nel pannello laterale sinistro, accanto ai menu Layers e Assets.

Struttura consigliata

1. Design → Contiene tutte le schermate e il layout del progetto.
2. Componenti → Raccoglie tutti i componenti e le varianti, evitando di mescolarli con il design.
3. Thumbnail (Copertina) → Contiene l’anteprima visibile nel file di Figma.

Disegnare all’interno della pagina Design e una volta individuato un componente spostarlo nella pagina componenti. Nella pagina componenti creare tutti gli stili e componenti necessari.

Nella pagina Thumbnail creare la copertina che sarà visibile nella dashboard dei progetti. Dimensioni copertina 1600×960 px. Per impostare il frame come copertina click con il destro sul frame e “Set as thumbnail”.

Esercitazione 2

Proseguendo sul file precedente replicare la seguente schermata.

Dividere così le componenti (i primi due componenti li trovi nella cartella condivisa materiali)

Importare un immagine

Figma offre diversi modi per importare immagini, rendendo il processo semplice e flessibile:

1. Trascinamento Diretto: trascinate l’immagine dalla vostra cartella direttamente nell’area di lavoro di Figma.
2. Copia e Incolla dal Web: Copiate un’immagine da una pagina web e incollatela direttamente in Figma usando Cmd+V (Mac) o Ctrl+V (Windows).
3. Strumento “Image/Video”: Dal pannello degli strumenti, cliccate sull’icona Image/Video (sotto lo strumento Forma). Questa funzione consente anche di importare immagini multiple contemporaneamente.

Caratteristiche delle Immagini Importate

• L’immagine viene posizionata all’interno di un rettangolo con le proporzioni originali. Se importiamo attraverso lo strumento possiamo anche scegliere altre forme dove posizionare l’immagine.

Modificando le dimensioni del rettangolo, l’immagine non verrà deformata, ma tagliata per riempire interamente l’area.

Metodi di Riempimento (Fill)

Nel pannello di destra, sotto la sezione Fill, potete scegliere diversi metodi di riempimento per l’immagine:

• Fill (Base): L’immagine riempie interamente il rettangolo, mantenendo le proporzioni.

• Fit: L’immagine si adatta interamente all’interno del rettangolo, senza essere tagliata.

• Crop: Permette di ritagliare l’immagine manualmente.

• Tile: L’immagine viene ripetuta per creare una texture.

Inoltre, nella sezione Fill, potete regolare la luminosità, il contrasto e altri parametri di base dell’immagine.

Effetti

Figma include una serie di effetti visivi che possono essere applicati agli oggetti o ai livelli.

Gli effetti si trovano nel pannello di destra, sotto il menu Effects.

Aggiungere un Effetto

1. Premete il pulsante + accanto a Effects.
2. Selezionate l’effetto desiderato dal menu a comparsa.

Tipologie di Effetti

Ombre

Le ombre aggiungono profondità e dimensione al design.

Tipi di Ombre:

• Esterne: Create un’ombra che si proietta all’esterno dell’oggetto.

• Interne: L’ombra appare all’interno dei bordi dell’oggetto.

Regole per un Buon Design delle Ombre:

• Simulate una luce proveniente dall’alto.

• Preferite ombre morbide e leggere per evitare di appesantire l’impaginazione.

• Regolate opacità, sfocatura e offset per un effetto naturale.

Sfocatura

Figma offre due tipi di sfocatura per aggiungere un effetto visivo sofisticato:

• Layer Blur: Applica la sfocatura direttamente sul livello dell’oggetto.

• Background Blur: Sfoca gli elementi di sfondo visibili attraverso l’oggetto, creando un effetto di trasparenza.

• Nota: Per utilizzare il background blur, impostate un colore trasparente sull’oggetto.

Consigli di Design

• Le ombre dovrebbero essere discrete: evitate contrasti troppo elevati o ombre troppo scure.

• Gli effetti di sfocatura sono particolarmente utili per creare modali, popup o per aggiungere profondità al design.

• Combinate effetti per ottenere risultati unici, ma mantenete sempre un equilibrio per evitare eccessi visivi.

Layout a colonne

I layout column sono una funzione fondamentale in Figma per strutturare e allineare i contenuti, particolarmente utile per il design responsivo. Segui i passaggi seguenti per attivare e configurare un layout a colonne su un frame.

Attivare il Layout a Colonne

Con il frame selezionato, vai nel pannello di destra, alla sezione Layout Grid e premi il pulsante + per aggiungere una griglia. Clicca sull’icona accanto a “Grid” e seleziona Columns dal menu a discesa.

Configurare il Layout a Colonne

• Count (Numero di Colonne): È comune utilizzare 12 colonne per layout desktop, mentre 4-6 colonne sono più adatte per i design mobile.

• Color: Colore delle colonne.

• Type (Tipo di Colonne): Lasciare Stretch, cioè le colonne si ridimensionano automaticamente per occupare tutto lo spazio disponibile nel frame.

• Width (Larghezza): Se stai usando colonne stretch, lasciare automatico.

• Margin (Margine Esterno): Imposta lo spazio ai lati del layout. Valori standard: dai 32px ai 300px per web dipende dalla dimensione del frame, dai 32px ai 16px per il mobile.

• Gutter (Spazio tra Colonne): Valori comuni: 24px o 16px per web e 8px per mobile.

Visualizzare e Nascondere il Layout

Per visualizzare o nascondere il layout, usa la scorciatoia da tastiera Shift+G. Puoi anche cliccare sull’icona occhio accanto al layout grid nel pannello di destra.

5. Usare il Layout per Allineare i Contenuti

Una volta configurato il layout a colonne, utilizza queste linee guida per:

• Allineare i testi, le immagini e gli altri elementi ai bordi delle colonne.

• Garantire un layout proporzionato e bilanciato.

• Creare design responsivi sfruttando diverse larghezze e margini delle colonne.

Esercitazione

Scarica Materiale

Replicare la schermata come l’immagine seguente. La dimensione del frame è MacBook Pro 14” e il layout deve essere impostato a 12 colonne con margine a 160px e gutter a 16px.

Scaricate il pacchetto foto.

⚠️ Attenzione: Nome file “Lezione 6”.

Progetta una calcolatrice. Standard, scientifica oppure una calcolatrice speciale per qualsiasi cosa. Utilizzare come dimensione quadro Iphone 13.

Creare Linee Rette

Con lo strumento Penna è possibile creare linee e forme. Per disegnare una linea retta:

1. Cliccate su un punto per iniziare la linea.
2. Cliccate su un secondo punto per terminare la linea.

Suggerimenti per linee dritte e precise

• Tenendo premuto Shift mentre si disegna, è possibile mantenere l’orientamento della linea a 0°, 45° o 90° rispetto al punto iniziale.

Premete Esc per interrompere il disegno in qualsiasi momento:

• Se interrompete il tracciato prima di chiudere, otterrete un poligono aperto.

• Se il punto finale coincide con il punto iniziale, il tracciato sarà un poligono chiuso.

Modalità modifica disegno

Una volta terminato, rimarrete nella modalità di modifica della linea, per uscire, cliccate sulla X (“Close”) nel pannello inferiore oppure premete Esc.

Dopo aver creato la linea utilizzate il pannello di destra per modificarne l’aspetto: colore, spessore e stile.

Creare Linee Curve

Lo strumento Penna può essere utilizzato anche per creare linee curve.

Come disegnare una linea curva

1. Iniziate come per una linea retta, cliccando sul punto di partenza.
2. Cliccate e trascinate il mouse sul secondo punto: appariranno delle maniglie.
3. Le maniglie determinano l’andamento della curva:

• La lunghezza delle maniglie influenza la profondità della curva.

• La direzione delle maniglie stabilisce la tangente della curva.

Chiudere o interrompere la curva

• Premete Esc per interrompere il disegno e ottenere una curva aperta.

• Se il punto finale coincide con quello iniziale, otterrete una forma chiusa.

Modificare le Linee

Per modificare una linea o una forma:

1. Selezionatela con lo strumento di selezione.
2. Fate doppio clic sulla linea per entrare nella modalità di modifica.

Strumenti di modifica aggiuntivi

• Strumento Curvatura (Curvature Tool): Serve per convertire un punto di controllo in uno con maniglie (curvo) o senza maniglie (angolare).

• Strumento Secchiello (Fill Tool): Consente di aggiungere un riempimento (non consigliato).

Uscire dalla modalità di modifica

• Cliccate due volte all’esterno della forma.

• In alternativa, premete Esc.

Esercitazione

Scarica Materiale

1. Scaricate il file di esercitazione e apritelo in Figma.
2. Seguite i tracciati e ricalcate le figure utilizzando linee rette e curve.

⚠️ Attenzione: Nome file “Lezione 5”.

Presentazione | Bottoni

---

Le regole base

Uno dei metodi di interazione con gli applicativi per l’utente finale sono i bottoni. In genere consentono di spostarsi di pagina oppure dare conferme e effettuare azioni. Possono essere cliccati attraverso Mouse oppure con le dita in caso di touch screen. In questo ultimo caso ricordate che la dimensione deve essere agevole per essere cliccata.

Fondamentale è capire la differenza tra Padding (generalmente segnato in verde), Margin (generalmente segato in arancione), Border (segnato in blu).

Sostanzialmente il padding è lo spazio interno tra la scritta e la fine del bottone, border è il contorno mentre il margine è lo spazio esterno, cioè la distanza tra il nostro elemento e gli altri.

Le dimensioni del pulsante devono essere proporzionate, di solito si usa l’altezza della scritta per impostare il padding sopra e sotto. Mentre il padding destra e sinistra due o tre volte circa l’altezza della scritta.

Attenzione da non fare:

1. Non utilizzare Padding troppo piccoli sia sopra/ sotto sia destra/sinistra.
2. Non creare mai più di una linea di testo all’interno del pulsante.
3. Non creare pulsanti troppo fantasiosi.

Gerarchia dei pulsanti

Una parte fondamentale ricorrente in molti elementi di grafica è la gerarchia. Anche nei pulsanti hanno delle gerarchie, e vengono divisi nel seguente modo:

Pulsante primario: viene utilizzato per le azioni più importanti oppure alle quali vogliamo dare più importanza. Esempio nei siti web per accedere a pagine rilevanti o dare input di invio. Mentre per gli applicativi vengono utilizzate generalmente per dare l’input alle azioni più importanti, come confermare un acquisto o inviare un messaggio.

Pulsante Secondario e Terziario: vengono utilizzati per quelle azioni che non sono fondamentali ma che servono per la navigazione dell’applicativo. In genere sono pulsanti che si usano di meno di quelli primari.

Come disegnare bottoni in Figma

Creare un pulsante in Figma è un processo semplice e veloce utilizzando Auto Layout. Ecco i passaggi:

1. Creare il testo del pulsante

• Selezionate lo strumento Testo e scrivete il contenuto del pulsante (ad esempio, “Invia”).

• Assicuratevi che il testo sia impostato su Auto Width:

• Questo consente al box di testo di adattarsi automaticamente alla lunghezza del contenuto.

2. Aggiungere un’icona (opzionale)

• Se il pulsante include un’icona, posizionatela accanto al testo.

3. Applicare l’Auto Layout

1. Selezionate il testo (e l’icona, se presente).
2. Attivate l’Auto Layout premendo Shift+A oppure dal pannello di destra.

Se avete solo un elemento (ad esempio, solo il testo senza icone):

• Prima create un gruppo selezionando il testo e premendo Cmd+G (Mac) o Ctrl+G (Windows).

• Poi applicate l’Auto Layout al gruppo.

4. Personalizzare il pulsante

Una volta attivato l’Auto Layout, potete personalizzare il pulsante nel pannello di destra:

• Spaziatura interna (Padding): Regolate il padding per definire lo spazio tra il testo/icone e i bordi del pulsante.

• Spaziatura tra elementi: Regolate la distanza tra l’icona e il testo, se presente.

• Colore di Fondo: Create uno sfondo per il pulsante aggiungendo un riempimento (Fill) , se necessario.

• Colore Traccia: aggiungete una traccia (Stroke), se necessario.

• Raggiatura: Impostate gli angoli del pulsante (es. arrotondati o squadrati).

Esercitazione

Replicare la seguente schermata tenendo le proporzioni corrette nei vari pulsanti e nella barra di ricerca.

⚠️ Attenzione: Nome file “Lezione 4”.

Creare e Modificare Forme Base

Per creare forme base, utilizziamo il pannello degli strumenti. Cliccando sulla freccia accanto all’icona delle forme, possiamo scegliere tra diverse opzioni: linee, rettangoli, cerchi, triangoli e altre forme predefinite.

⚠️ Ricordate: una volta terminato il disegno di un elemento, è necessario tornare allo strumento selezione per continuare a lavorare.

Modificare le dimensioni delle forme

1. Selezionate l’oggetto.
2. Spostate il cursore su uno dei bordi o degli angoli dell’elemento:

• Cliccate e trascinate per ridimensionare la forma.
• Utilizzate il tasto SHIFT per mantenere le proporzioni durante il ridimensionamento.
• Premete OPTION / ALT per scalare la forma partendo dal centro.

Modifiche dal pannello laterale

Nel pannello di destra, nella sezione POSITION e LAYOUT, è possibile:

• Regolare la posizione e le dimensioni dell’elemento in modo preciso, inserendo valori numerici.
• Aumentare o diminuire i valori usando le frecce direzionali della tastiera (SU e GIÙ).
• Eseguire calcoli direttamente nei campi numerici (es. 30+10, 20/4, ecc.).

Modificare i colori

Per modificare i colori di un oggetto o di un gruppo di oggetti:

1. Selezionate l’elemento desiderato.
2. Nel pannello di destra, sotto la sezione APPEARANCE, trovate:

• FILL: il riempimento dell’elemento.
• STROKE: la traccia (o contorno).

Modifiche al riempimento (FILL)

Il colore è rappresentato da un codice HEX. Mentre Cliccando sul quadrato del colore, si apre un pannello da cui è possibile:

• Selezionare un colore.
• Applicare una sfumatura al posto di un colore pieno.

Per togliere il colore di riempimento premere il tasto ”-”.

Modifiche alla traccia (STROKE)

Per attivare una traccia, cliccate sul pulsante ”+” accanto a STROKE. Nelle impostazioni è possibile regolare:

• Il colore.
• Lo spessore.
• La posizione (interno, esterno, o centro).
• Altri parametri avanzati.

Opzioni aggiuntive

Nella sezione APPEARANCE, è possibile regolare anche:

• Opacità: per rendere l’elemento più trasparente.
• Raggiatura degli angoli: utile per creare forme con bordi arrotondati.

Duplicare e allineare gli elementi

Duplicare gli elementi

• Metodo classico: Copiate e incollate l’elemento utilizzando i comandi Ctrl / Cmd + C e Ctrl / Cmd + V.
• Metodo rapido: Tenete premuto Option / Alt e trascinate l’elemento con il mouse.

Se si utilizza il metodo rapido, per ripetere la duplicazione in sequenza, premete Ctrl / Cmd + D dopo aver duplicato un elemento.

Allineare gli elementi

1. Quando selezionate più elementi, appariranno i comandi di allineamento nella barra in alto.
2. Selezionando un singolo elemento, questo verrà allineato al Frame in cui si trova.
3. Nel pannello di destra, sotto POSITION, trovate ulteriori opzioni di allineamento e distribuzione.

⚠️ Distanze tra gli elementi: sempre nel pannello di destra, sotto LAYOUT, è possibile visualizzare e regolare la distanza tra più elementi selezionati.

Testi

Per creare un testo:

1. Selezionate lo strumento Text dal pannello degli strumenti.
2. Cliccate e trascinate per creare un rettangolo di testo nell’area di lavoro.

Modificare il testo

Nel pannello di destra, è possibile personalizzare diverse caratteristiche del testo:

1. Font: scegliete il carattere desiderato.
2. Dimensioni: impostate la grandezza del testo.
3. Interlinea e spaziature: regolate la distanza tra righe, paragrafi e lettere.
4. Allineamento: impostate l’allineamento del testo (sinistra, centro, destra, giustificato).

⚠️ Opzioni avanzate per il box di testo

Nella sezione LAYOUT, trovate tre opzioni fondamentali per gestire la dimensione del rettangolo di testo:

• Auto Width: il box si adatta automaticamente alla lunghezza del testo.
• Auto Height: il box si espande in altezza in base alla quantità di testo.
• Fixed Size: il box ha una dimensione fissa, indipendentemente dalla lunghezza del testo.

Esercitazione

Replicare la schermata seguente assicurandovi di:

1. Create tutti gli elementi necessari che siano allineati correttamente.
2. Mantenete le distanze uguali come immagine di riferimento.
3. Utilizzate le guide, i comandi di allineamento e i tasti di duplicazione per velocizzare il lavoro.

⚠️ Per spegnere e accendere rapidamente le guide premere SHIFT + R

⚠️ Attenzione: Nome file “Lezione 2”.

Nuovi livelli e gruppi

Creare un nuovo livello

Per creare un nuovo livello, basta disegnare un elemento qualsiasi all’interno di un Frame. Noterete che nella barra dei Layers apparirà il nuovo elemento e poiché è stato creato all’interno del Frame, il livello verrà posizionato automaticamente al suo interno.

Se spostiamo l’elemento fuori dal Frame utilizzando lo strumento Move, anche nella barra dei Layers il rettangolo si sposterà all’esterno del Frame. Riposizioniamolo nuovamente all’interno.

Gestire i livelli

Disegnando altri elementi, noteremo che i livelli vengono aggiunti uno sopra l’altro nella barra dei Layers.

Creare un gruppo

1. Selezioniamo più elementi (usando il mouse o tenendo premuto Shift per selezionare).
2. Premiamo Cmd+G (Mac) o Ctrl+G (Windows) per creare un gruppo.
3. Nella barra dei Layers apparirà il nuovo gruppo, indicato con una cartella, cliccando sulla freccia accanto al gruppo, possiamo espandere o contrarre il contenuto.

Opzioni aggiuntive per i gruppi

Nel pannello di destra è possibile trasformare un gruppo in un Frame cliccando sull’apposita opzione.

Sciogliere un gruppo

Per sciogliere un gruppo, selezionatelo e premete Cmd+Shift+G (Mac) o Ctrl+Shift+G (Windows).

Plugins

I Plugins sono risorse esterne sviluppate da terze parti che possono essere integrate in Figma per aggiungere funzionalità extra.

Come accedere ai Plugins

1. Aprite il menu Action (l’ultimo a destra).
2. Andate su Plugins & Widget.
3. Cercate i plugin desiderati.
4. I plugin utilizzati di frequente possono essere salvati per un accesso rapido.

Plugins consigliati

• Boxicons (attenzione: scegliete quello corretto, non Iconduck).

• Material Symbols: una libreria di simboli e icone.

• Unsplash: per aggiungere immagini.

• Lorem Ipsum: per generare testo segnaposto.

Auto Layout

L’Auto Layout è uno strumento potente per creare regole di impaginazione dinamiche.

Attivare e personalizzare Auto Layout

1. Selezionate un gruppo o una serie di elementi.
2. Premete il comando rapido Shift+A oppure attivatelo dal pannello di destra.

Nel pannello di destra è possibile:

• Impostare l’orientamento (verticale o orizzontale).

• Definire l’allineamento degli elementi.

• Regolare lo spazio tra gli elementi.

• Modificare il padding, ovvero lo spazio tra gli elementi e il bordo del contenitore.

Opzioni Aggiuntive

Un Auto Layout si comporta come un Frame, consentendo di aggiungere o gestire elementi al suo interno.

Se un elemento non deve seguire le regole dell’Auto Layout, è possibile selezionarlo e cliccare su “Ignore Auto Layout” nella sezione Position del pannello di destra.

Operazioni Booleane

Le operazioni booleane consentono di combinare più forme con varie modalità:

• Unione: combina le forme in un unico elemento.

• Sottrazione: sottrae una forma dall’altra.

• Intersezione: mantiene solo l’area comune tra le forme.

• Esclusione: mantiene le aree non sovrapposte.

L’opzione “Flatten Selection” trasforma l’operazione booleana in un tracciato, rendendolo un elemento unico e modificabile.

Esercitazione

Creare un file con un frame smartphone nel quale posizionare un Menu nella parte inferiore.

Scegliete uno dei seguenti stili proposti per il menu.

⚠️ Attenzione: Nome file “Lezione 3”.

Specifiche menu:

• Icone: utilizzate Boxicons, dimensione 36×36 px.
• Font: DM Sans, dimensione 10 px.
• Spaziatura: distanza verticale tra icona e testo di 8 px.
• Padding del menu: minimo 16 px.

Colori:

• Colore primario: #0491C5.
• Colore nero: #454545.
• Sfondo del menu: Bianco.

Creare un progetto

All’apertura di Figma, la schermata iniziale permette di creare nuovi progetti o di aprire progetti esistenti.

Nella colonna di sinistra, oltre alle informazioni di login, troviamo:

• Drafts (bozze);
• Teams (spazi collaborativi per i team).

In alto a destra, nelle impostazioni, è possibile cambiare il tema: è consigliato utilizzare il tema scuro per ridurre l’affaticamento visivo.

È importante ricordare che Figma è un software basato sul web, il che significa che è necessaria una connessione a Internet per scaricare, lavorare e salvare i file.

Per iniziare, accediamo alla sezione Drafts e creiamo il nostro primo progetto cliccando su “New design file”. Dopo aver cliccato, si aprirà la pagina di lavoro del file.

Area di lavoro

Una volta creato un progetto, ci troviamo nella schermata di lavoro di Figma, che è composta da:

1. Pannello Strumenti Inferiore: contiene gli strumenti principali.
2. Barra di sinistra: mostra il nome del file (di default “Untitled”), che può essere modificato con un semplice clic, i Layers (Livelli) e gli Assets (Risorse).
3. Barra di destra: è un menu dinamico che mostra le proprietà degli elementi selezionati.
4. Area centrale: è la finestra di lavoro principale dove si svolge il design.

Frames

I Frames sono i contenitori in cui possiamo inserire forme, testi e immagini. Puoi immaginare i Frames come singole schermate del tuo progetto.

Come creare un Frame

1. Clicca sull’icona Frame nel pannello degli strumenti in alto.
2. Nella barra di destra, seleziona un dispositivo (es. Phone) e scegli la dimensione, ad esempio iPhone 16.
3. Il Frame apparirà al centro dell’area di lavoro.

Nella barra dei Layers, il Frame appena creato verrà visualizzato come un nuovo elemento. Per rinominarlo, fai doppio clic sul nome e scrivi, ad esempio, “Home”.

Per rimuovere una tavola selezionarla e premi Cancella sulla tastiera.

Zoom e Panning

Ecco le scorciatoie per ingrandire e spostare l’inquadratura:

• Zoom:
• Ctrl / Cmd + scroll del mouse (per ingrandire o ridurre);
• Ctrl / Cmd + “+” (per aumentare lo zoom);
• Ctrl / Cmd + “-” (per ridurre lo zoom).
• Panning (spostare l’inquadratura):
• Space + Click e trascina con il mouse.

Annullare comando

Qualsiasi operazione può essere annullata o ripristinata:

• Annullare: vai su Modifica > Annulla (o usa la scorciatoia Ctrl / Cmd + Z).
• Ripristinare: vai su Modifica > Ripristina (scorciatoia Ctrl / Cmd + Shift + Z).

⚠️ Nota: se esegui una nuova operazione dopo aver annullato un comando, l’opzione Ripristina verrà disattivata.

Salvare lavoro

Figma salva automaticamente il tuo lavoro, quindi non è necessario eseguire salvataggi manuali.

Distanze e righelli

Visualizzare i righelli

• Vai su Figma Logo > View > Rulers oppure premi Shift + R.

Aggiungere e rimuovere guide

• Per posizionare una guida, trascinala dai righelli fino all’area di lavoro.
• Per cancellare una guida, trascinala nuovamente sul righello o selezionala e premi Cancella sulla tastiera.

Misurare le distanze

Durante il posizionamento delle guide, premi Alt / Option per vedere le distanze tra la guida e altri elementi.

Per misurare la distanza tra due elementi:

1. Seleziona il primo elemento.
2. Posiziona il mouse sul secondo elemento e premi Alt / Option.

⚠️ Attenzione: il tasto Alt / Option viene utilizzato anche per duplicare un elemento durante lo spostamento.

Esercitazione

Crea un file Figma e rinominalo “Lezione 01”.

All’interno del file, aggiungi due Frames:

• Uno con dimensione iPhone.
• Uno con dimensione MacBook Pro 16”.

Posiziona i Frames affiancati e inserisci due guide per ciascun Frame:

• 32px di distanza dai bordi per l’iPhone.
• 160px di distanza dai bordi per il MacBook Pro.

Rinominare le tavole nel seguente modo:

• ”Home – Smartphone” per l’iPhone.
• ”Home – Desktop” per il MacBook Pro.