Caratteristiche delle Immagini Importate<\/strong><\/p>\n\n\n\n \u2022 L\u2019immagine viene posizionata all\u2019interno di un rettangolo con le proporzioni originali<\/strong>. Se importiamo attraverso lo strumento possiamo anche scegliere altre forme dove posizionare l\u2019immagine.<\/p>\n\n\n\n Modificando le dimensioni del rettangolo, l\u2019immagine non verr\u00e0 deformata<\/strong>, ma tagliata<\/strong> per riempire interamente l\u2019area.<\/p>\n\n\n\n Metodi di Riempimento (Fill)<\/strong><\/p>\n\n\n\n Nel pannello di destra, sotto la sezione Fill<\/strong>, potete scegliere diversi metodi di riempimento per l\u2019immagine:<\/p>\n\n\n\n \u2022 Fill (Base):<\/strong> L\u2019immagine riempie interamente il rettangolo, mantenendo le proporzioni.<\/p>\n\n\n\n \u2022 Fit:<\/strong> L\u2019immagine si adatta interamente all\u2019interno del rettangolo, senza essere tagliata.<\/p>\n\n\n\n \u2022 Crop:<\/strong> Permette di ritagliare l\u2019immagine manualmente.<\/p>\n\n\n\n \u2022 Tile:<\/strong> L\u2019immagine viene ripetuta per creare una texture.<\/p>\n\n\n\n Inoltre, nella sezione Fill<\/strong>, potete regolare la luminosit\u00e0, il contrasto e altri parametri di base dell\u2019immagine.<\/p>\n\n\n\n Figma include una serie di effetti visivi che possono essere applicati agli oggetti o ai livelli.<\/p>\n\n\n\n Gli effetti si trovano nel pannello di destra, sotto il menu Effects<\/strong>.<\/p>\n\n\n\n Aggiungere un Effetto<\/strong><\/p>\n\n\n\n Tipologie di Effetti<\/strong><\/p>\n\n\n\n Ombre<\/strong><\/p>\n\n\n\n Le ombre aggiungono profondit\u00e0 e dimensione al design.<\/p>\n\n\n\n Tipi di Ombre:<\/strong><\/p>\n\n\n\n \u2022 Esterne:<\/strong> Create un\u2019ombra che si proietta all\u2019esterno dell\u2019oggetto.<\/p>\n\n\n\n \u2022 Interne:<\/strong> L\u2019ombra appare all\u2019interno dei bordi dell\u2019oggetto.<\/p>\n\n\n\n Regole per un Buon Design delle Ombre:<\/strong><\/p>\n\n\n\n \u2022 Simulate una luce proveniente dall\u2019alto.<\/p>\n\n\n\n \u2022 Preferite ombre morbide e leggere per evitare di appesantire l\u2019impaginazione.<\/p>\n\n\n\n \u2022 Regolate opacit\u00e0, sfocatura e offset per un effetto naturale.<\/p>\n\n\n\n Sfocatura<\/strong><\/p>\n\n\n\n Figma offre due tipi di sfocatura per aggiungere un effetto visivo sofisticato:<\/p>\n\n\n\n \u2022 Layer Blur:<\/strong> Applica la sfocatura direttamente sul livello dell\u2019oggetto.<\/p>\n\n\n\n \u2022 Background Blur:<\/strong> Sfoca gli elementi di sfondo visibili attraverso l\u2019oggetto, creando un effetto di trasparenza.<\/p>\n\n\n\n \u2022 Nota:<\/strong> Per utilizzare il background blur, impostate un colore trasparente sull\u2019oggetto.<\/p>\n\n\n\n \u2022 Le ombre dovrebbero essere discrete: evitate contrasti troppo elevati o ombre troppo scure.<\/p>\n\n\n\n \u2022 Gli effetti di sfocatura sono particolarmente utili per creare modali<\/strong>, popup<\/strong> o per aggiungere profondit\u00e0 al design.<\/p>\n\n\n\n \u2022 Combinate effetti per ottenere risultati unici, ma mantenete sempre un equilibrio per evitare eccessi visivi.<\/p>\n\n\n\n I layout column<\/strong> 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.<\/p>\n\n\n\n Attivare il Layout a Colonne<\/strong><\/p>\n\n\n\n Con il frame selezionato, vai nel pannello di destra,<\/strong> alla sezione Layout Grid<\/strong> e premi il pulsante +<\/strong> per aggiungere una griglia. Clicca sull\u2019icona accanto a \u201cGrid\u201d e seleziona Columns<\/strong> dal menu a discesa.<\/p>\n\n\n\n Configurare il Layout a Colonne<\/strong><\/p>\n\n\n\n \u2022 Count (Numero di Colonne):<\/strong> \u00c8 comune utilizzare 12 colonne per layout desktop, mentre 4-6 colonne sono pi\u00f9 adatte per i design mobile.<\/p>\n\n\n\n \u2022 Color:<\/strong> Colore delle colonne.<\/p>\n\n\n\n \u2022 Type (Tipo di Colonne):<\/strong> Lasciare Stretch, cio\u00e8 le colonne si ridimensionano automaticamente per occupare tutto lo spazio disponibile nel frame.<\/p>\n\n\n\n \u2022 Width (Larghezza):<\/strong> Se stai usando colonne stretch, lasciare automatico.<\/p>\n\n\n\n \u2022 Margin (Margine Esterno):<\/strong> 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.<\/p>\n\n\n\n \u2022 Gutter (Spazio tra Colonne):<\/strong> Valori comuni: 24px o 16px per web e 8px per mobile.<\/p>\n\n\n\n Visualizzare e Nascondere il Layout<\/strong><\/p>\n\n\n\n Per visualizzare<\/strong> o nascondere<\/strong> il layout, usa la scorciatoia da tastiera Shift+G<\/strong>. Puoi anche cliccare sull\u2019icona occhio accanto al layout grid nel pannello di destra.<\/p>\n\n\n\n 5. Usare il Layout per Allineare i Contenuti<\/strong><\/p>\n\n\n\n Una volta configurato il layout a colonne, utilizza queste linee guida per:<\/p>\n\n\n\n \u2022 Allineare i testi, le immagini e gli altri elementi ai bordi delle colonne.<\/p>\n\n\n\n \u2022 Garantire un layout proporzionato e bilanciato.<\/p>\n\n\n\n \u2022 Creare design responsivi sfruttando diverse larghezze e margini delle colonne.<\/p>\n\n\n\nEffetti<\/h2>\n\n\n\n
\n
Consigli di Design<\/strong><\/h2>\n\n\n\n
Layout a colonne<\/h2>\n\n\n\n
Esercitazione<\/h2>\n\n\n\n
![\"\"](\"https:\/\/www.freemindstudio.it\/istruzione\/wp-content\/uploads\/sites\/3\/2022\/09\/Icon-Download.png\"){kind=icon}
![\"\"](\"https:\/\/www.freemindstudio.it\/istruzione\/wp-content\/uploads\/sites\/3\/2022\/10\/MacBook-Pro-14_-1040x675.png\")
<\/figure>\n","protected":false},"excerpt":{"rendered":"