Immagini ed Effetti
Importare un immagine
Figma offre diversi modi per importare immagini, rendendo il processo semplice e flessibile:
- Trascinamento Diretto: trascinate l’immagine dalla vostra cartella direttamente nell’area di lavoro di Figma.
- 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).
- 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
- Premete il pulsante + accanto a Effects.
- 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
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”.
