Guida definitiva al layout automatico in Figma
Guida pratica all'Auto Layout di Figma: creazione di una scheda prodotto, un modulo di invio e una pagina intera con esso
27 novembre 2025
19 min
Contenuti:
Che cos'è il layout automatico in Figma
Auto Layout è lo strumento di Figma che consente di disporre e distanziare automaticamente gli elementi all'interno di un gruppo in base alle regole impostate. Se si modifica qualcosa, come la lunghezza del testo o la dimensione dell'immagine, tutto il resto si adatta automaticamente, quindi non è necessario effettuare alcuna regolazione manuale.
Invece di specificare valori esatti per varie impostazioni, si definiscono delle regole:
- Flusso ( precedentemente denominato Direzione): orizzontale, verticale o avvolgimento su una nuova riga.
- Spazio: Spazio tra gli elementi e riempimento all'interno del riquadro principale.
- Allineamento e distribuzione degli elementi secondari.
- Comportamento di ridimensionamento (Hug, Fixed, Fill): per far crescere o ridurre i componenti in base al contenuto.
Come aggiungere e configurare il layout automatico in Figma
Scorciatoie per il layout automatico:
- Shift + A — applica il layout automatico.
- Shift + Alt/Opzione + A — rimuove il layout automatico.
- Ctrl/Cmd + Maiusc + G — separa gli elementi.
- Ctrl/Cmd + D — duplica (clona) un riquadro di layout automatico.
È possibile applicare il layout automatico a un singolo riquadro, che può contenere più elementi quali testo, forme e immagini, oppure a una selezione di elementi; Figma li racchiuderà automaticamente in un nuovo riquadro con layout automatico. Esempi di elementi a cui è possibile applicare il layout automatico:
Vediamo come funziona il layout automatico con i frame. Crea due frame, selezionali e fai clic sul pulsante "Usa layout automatico" oppure premi Maiusc + A.
- Telaio (singolo)
- Cornice + Cornice
- Elemento + Elemento (Figma li racchiuderà in una nuova cornice)
Vediamo come funziona il layout automatico con i frame. Crea due frame, selezionali e fai clic sul pulsante "Usa layout automatico" oppure premi Maiusc + A.
È possibile trovare l'impostazione Layout automatico nella barra laterale destra dell'ispettore quando è attivo un fotogramma o una selezione.
Per verificare se è stato applicato il layout automatico, apri il pannello Livelli. Accanto al nome del fotogramma apparirà l'icona del layout automatico e i fotogrammi selezionati saranno raggruppati in un unico fotogramma con layout automatico.
Il pannello Livelli si trova sulla sinistra. È possibile aprirlo anche utilizzando la scorciatoia Opt/Ctrl + 1.
Se disponi già di un frame con elementi al suo interno, puoi comunque applicare il layout automatico. In questo modo, non dovrai regolare manualmente le dimensioni del frame: ti basterà impostare i margini e la spaziatura e il frame si ridimensionerà automaticamente per adattarsi al contenuto.
Layout automatico in azione: se ridimensioni il rettangolo verde, la cornice si adatterà automaticamente alle nuove dimensioni.
Proprietà chiave del layout automatico
Esaminiamo le principali impostazioni di Auto Layout e il loro comportamento nei layout reattivi. Questi controlli sono disponibili nel pannello di destra quando è selezionato un elemento con Auto Layout abilitato.
Flusso
Il flusso definisce il comportamento degli elementi quando non c'è spazio sufficiente all'interno di un riquadro di layout automatico. Questa impostazione consente di scegliere se gli oggetti rimangono in una singola riga/colonna o passano automaticamente alla riga successiva quando lo spazio nel riquadro non è sufficiente.
1
Forma libera: è possibile spostare gli elementi in qualsiasi punto all'interno della cornice. Sebbene questa opzione sia disponibile nella sezione Layout automatico, essa disattiva di fatto il layout automatico per tali elementi.
Forma libera: posiziona gli elementi liberamente (disattiva il layout automatico).
2
Verticale: gli elementi sono disposti uno sotto l'altro.
Gli oggetti vengono automaticamente impilati in una colonna.
3
Orizzontale: gli oggetti sono allineati orizzontalmente. In questa modalità viene visualizzata un'impostazione aggiuntiva: Avvolgi. Determina se gli elementi fuoriescono dal riquadro (e vengono tagliati) o passano alla riga successiva quando lo spazio è insufficiente.
Layout orizzontale con avvolgimento disattivato.
Layout orizzontale con avvolgimento attivato.
4
Griglia: una nuova modalità che posiziona automaticamente gli elementi su una griglia. Viene visualizzato un pannello Griglia che consente di personalizzare la griglia; gli elementi vengono aggiornati automaticamente quando la si modifica.
Quando si modifica la griglia, gli elementi si adattano automaticamente.
Ridimensionamento
Questa sezione contiene i controlli W (larghezza) e H (altezza). Essi impostano la larghezza e l'altezza dell'intero frame con l'applicazione dell'Auto Layout.
È possibile scegliere tra due modalità:
- Corretto: la larghezza e l'altezza della cornice rimangono invariate, indipendentemente dalle altre impostazioni o dalle dimensioni degli elementi al suo interno.
- Abbraccio (adattabile al contenuto): la larghezza e l'altezza della cornice si regolano in base al riempimento configurato e alle dimensioni degli elementi al suo interno.
Quando Hug è abilitato, modificando la spaziatura tra i quadrati si fa crescere o restringere la cornice.
Divario
Questa impostazione controlla la spaziatura tra gli elementi all'interno di un layout automatico. È possibile impostare separatamente gli spazi orizzontali e verticali.
Esempio: la distanza verticale e orizzontale tra i quadrati all'interno del layout automatico è di 40 px.
Allineamento
Questa impostazione controlla l'allineamento degli elementi all'interno di un layout automatico: a sinistra, a destra, al centro, in alto o in basso. Diventa disponibile quando il flusso del layout è impostato su Orizzontale o Verticale.
Se l'opzione Avvolgi è abilitata, l'allineamento determina anche il posizionamento delle righe/colonne irregolari. Ad esempio, il quadrato viola potrebbe trovarsi al centro per impostazione predefinita, ma è possibile fissarlo a sinistra o a destra.
Imbottitura
Questa impostazione controlla la spaziatura tra i bordi del riquadro e il suo contenuto. Il riempimento può essere impostato individualmente per ciascun lato. Qualsiasi nuovo elemento aggiunto si posizionerà automaticamente rispettando tali impostazioni di riempimento.
Impostazioni aggiuntive
Sono disponibili diverse impostazioni aggiuntive per il layout automatico. Esaminiamole una per una.
Per accedere ad altre impostazioni, clicca su "Impostazioni layout automatico" sotto "Layout automatico".
1
Contorni: il contorno attorno a una cornice o a un elemento. È possibile scegliere se posizionare il contorno all'interno o all'esterno dei bordi dell'elemento.
Ecco come appare la cornice con la funzione di tratto abilitata e disabilitata.
2
Impilamento canvas: definiscecome gli elementi si sovrappongono quando c'è uno spazio negativo. Scegli se il primo o l'ultimo elemento deve essere posizionato davanti.
Questa impostazione non è disponibile quando il layout è impostato su Griglia.
3
Allinea linea di base del testo: allinea gli elementi di testo lungo la stessa linea di base.
Questa impostazione non è disponibile quando il layout è impostato su Griglia.
Quando è abilitata, gli elementi di testo si allineano perfettamente sulla linea di base.
Esempi di casi d'uso
Siamo onesti: tutti questi termini possono sembrare complicati. Senza una pratica diretta, non rimangono impressi e non hanno molto senso. Quindi, invece di memorizzare la teoria, vediamo Auto Layout in azione. Creeremo tre elementi comuni dell'interfaccia: un pulsante, una scheda prodotto e un modulo di registrazione.
Se siete nuovi alle soluzioni senza codice, utilizzate questo codice promozionale esclusivo per ottenere un mese di Tilda Personal Plan invece della prova standard di 2 settimane.
Vedere le istruzioni su come attivarlo
Pulsante
Creiamo un pulsante utilizzando una cornice e un livello di testo. Normalmente, dovresti regolare manualmente la larghezza della cornice in modo che corrisponda alla lunghezza del testo. Ma cosa succede se il testo diventa più lungo? Dovresti ridimensionare nuovamente la cornice. E se la tua interfaccia o il tuo sito web hanno molti pulsanti, questa operazione richiede molto tempo.
Come puoi vedere, quando la lunghezza del testo supera il riquadro, devi regolare manualmente il secondo pulsante.
Abilitiamo il layout automatico per ridurre le regolazioni manuali.
- Applica il layout automatico alla cornice (Shift + A).
- Imposta Hug in modo che la larghezza del pulsante si adatti alla lunghezza del testo.
- Regola l'imbottitura in modo che il testo non aderisca ai bordi della cornice.
Con il layout automatico abilitato, il pulsante si adatta automaticamente alla lunghezza della didascalia.
Scheda prodotto
Le schede prodotto sono utilizzate più spesso nei negozi online. Possono essercene centinaia o addirittura migliaia. Ogni scheda contiene titoli e descrizioni di diversa lunghezza, oltre a immagini di diverse dimensioni.
Con il layout automatico, puoi semplicemente sostituire testo e immagini: tutto il resto si adatta automaticamente.
Una scheda senza layout automatico: con una piccola quantità di testo, tutto sembra a posto.
Ma se il testo diventa più lungo, parte del contenuto fuoriesce dalla scheda.
All'interno della scheda, elementi diversi richiedono spaziature diverse:
• lo spazio tra il titolo e la descrizione è un valore.
• lo spazio tra il testo e l'immagine è un altro.
Per consentire il ridimensionamento automatico della scheda, la costruiremo utilizzando più livelli di layout automatico.
• lo spazio tra il titolo e la descrizione è un valore.
• lo spazio tra il testo e l'immagine è un altro.
Per consentire il ridimensionamento automatico della scheda, la costruiremo utilizzando più livelli di layout automatico.
1
Inizia applicando il layout automatico al livello del titolo e della descrizione. Imposta un flusso verticale e uno spazio di 12 pixel in modo che l'altezza si adatti automaticamente alle diverse lunghezze del testo.
2
Successivamente, applica il layout automatico agli elementi immagine e testo insieme. Ciò consente alla scheda di adattarsi a immagini di dimensioni diverse. Aggiungi un riempimento attorno alla scheda e imposta il colore di sfondo su bianco.
Ora puoi sostituire l'immagine o aggiungere un testo più lungo: Figma regola automaticamente l'altezza della scheda.
Quando aggiungiamo un'altra riga di testo, la scheda si riadatta e nulla si rompe.
Modulo di contatto/invio
Un modulo su un sito web di solito include diversi campi di immissione dati e un pulsante. Tuttavia, se si ridimensiona la cornice, i campi non si allungano automaticamente e la spaziatura tra loro può rompersi.
Un modulo senza layout automatico: i campi non si espandono e nulla viene regolato automaticamente.
Ora applichiamo tutto ciò che abbiamo imparato e creiamo un modulo con tre campi di immissione standard.
1
Aggiungi un'etichetta di campo e una cornice che fungerà da input.
Etichetta del campo di immissione futuro ed elemento che fungerà da campo di immissione.
2
Applica il layout automatico, quindi imposta il flusso su Orizzontale. Assegna all'etichetta una larghezza fissa in modo che tutti i nomi dei campi siano allineati in modo ordinato. Imposta la larghezza del campo di immissione su Riempi: in questo modo, quando ridimensioni il contenitore, il campo di immissione si adatta automaticamente alla sua larghezza.
3
Duplica il campo altre due volte (ad esempio, Cognome e Email).
4
Seleziona tutti e tre i campi, raggruppali e applica nuovamente il layout automatico. Imposta la larghezza del gruppo su Riempi. Ora, quando ridimensioni il contenitore del modulo, i campi al suo interno si adattano automaticamente.
Il modulo è pronto. Aggiungi tutti i campi necessari e posiziona il pulsante Invia sotto, proprio come quello che abbiamo creato in precedenza.
Creazione di un layout "fluido" con il layout automatico
Il layout automatico consente di creare intere pagine web con spaziature che si regolano automaticamente. Si inizia impostando la distanza tra il titolo e la descrizione, quindi si aggiunge lo spazio sotto l'immagine, il pulsante e il resto della cornice. Passo dopo passo, si ottiene un layout completamente automatizzato in Figma.
Quando si crea un layout, è molto comodo che il contenuto si adatti automaticamente alle diverse dimensioni dello schermo. Questo è ciò che viene spesso definito responsive design. Per ottenere questo risultato, è necessario creare un layout fluido.
Per questo esempio, prendiamo la nostra scheda prodotto, duplichiamola due volte e allineiamo tutte e tre le schede a una griglia. In questo modo si adatteranno alla larghezza della cornice.
1
Per prima cosa, crea una cornice, quindi aggiungi una griglia a 12 colonne.
2
Aggiungi tre schede prodotto e posizionale in modo che ciascuna occupi quattro colonne.
3
Per ogni contenitore di schede, imposta la larghezza su Riempi in modo che le schede si allunghino quando ridimensioni il contenitore principale.
4
Per il contenitore che contiene tutte e tre le schede, imposta una larghezza fissa. Nelle impostazioni dei vincoli, scegli l'opzione "L + R" in modo che il layout si estenda con la larghezza della cornice.
Ora puoi sostituire o aggiungere rapidamente qualsiasi elemento e persino ridimensionare il riquadro principale. Tutti gli elementi si adatteranno automaticamente alla sua larghezza.
Tieni presente che in Figma la larghezza e i vincoli di un elemento sono collegati e alcune combinazioni non funzionano insieme.
Se imposti la larghezza di un riquadro con layout automatico su "Adatta al contenuto", questo verrà ridimensionato in base al contenuto al suo interno. Tuttavia, se un livello all'interno di quel riquadro utilizza i vincoli "Sinistra + Destra", si estenderà da un lato all'altro del contenitore principale. Queste due impostazioni sono in contraddizione tra loro: nel primo caso, è il contenuto a determinare la dimensione, mentre nel secondo è il contenitore. Quando ciò accade, Figma darà automaticamente la priorità a una delle due impostazioni.
Se avete bisogno che un elemento si estenda insieme al suo frame padre (come nell'esempio precedente con le schede dei prodotti), assegnate prima all'elemento una larghezza fissa. Quindi potete abilitare i vincoli "Sinistra + Destra" e il suo ridimensionamento avverrà correttamente insieme al padre.
Se imposti la larghezza di un riquadro con layout automatico su "Adatta al contenuto", questo verrà ridimensionato in base al contenuto al suo interno. Tuttavia, se un livello all'interno di quel riquadro utilizza i vincoli "Sinistra + Destra", si estenderà da un lato all'altro del contenitore principale. Queste due impostazioni sono in contraddizione tra loro: nel primo caso, è il contenuto a determinare la dimensione, mentre nel secondo è il contenitore. Quando ciò accade, Figma darà automaticamente la priorità a una delle due impostazioni.
Se avete bisogno che un elemento si estenda insieme al suo frame padre (come nell'esempio precedente con le schede dei prodotti), assegnate prima all'elemento una larghezza fissa. Quindi potete abilitare i vincoli "Sinistra + Destra" e il suo ridimensionamento avverrà correttamente insieme al padre.
Come ignorare le proprietà di layout automatico (posizionamento assoluto)
Cosa succede se è necessario aggiungere un piccolo elemento, come un'etichetta di sconto o un pulsante "Aggiungi ai preferiti", all'interno di una scheda prodotto che utilizza il layout automatico?
In questo caso, l'impostazione Posizionamento assoluto è la soluzione. Consente di posizionare liberamente un elemento all'interno di una cornice di layout automatico ignorando le regole di layout applicate agli altri elementi. Questa opzione diventa disponibile una volta abilitata l'opzione "Ignora layout automatico".
Diamo un'occhiata più da vicino a un esempio in cui dobbiamo aggiungere una piccola etichetta di sconto alla scheda di un prodotto.
1
Per prima cosa, crea l'etichetta dello sconto.
2
Aggiungilo alla scheda del prodotto. Se lo trascini semplicemente all'interno del riquadro Layout automatico, verrà riadattato in base alle regole di layout esistenti e apparirà in un punto qualsiasi tra gli altri elementi.
3
Abilita "Ignora layout automatico". Ora puoi posizionare l'etichetta dove preferisci.
L'impostazione Posizionamento assoluto ha la precedenza sul layout automatico, consentendoti di posizionare gli elementi dove preferisci, ad esempio proprio sopra l'immagine del prodotto.
Domande frequenti: Principali sfumature dell'uso del layout automatico
Come rimuovere il layout automatico in Figma
È possibile rimuovere il layout automatico utilizzando lo stesso pulsante della barra degli strumenti utilizzato per applicarlo. È inoltre possibile utilizzare la scorciatoia Shift + Opzione + A su Mac o Shift + Alt + A su Windows. In questo modo il riquadro del layout automatico torna a essere un riquadro normale.
Se desideri separare singoli elementi raggruppati, puoi utilizzare la scorciatoia Cmd/Ctrl + Maiusc + G.
Quando utilizzare il layout automatico
- Sono necessari elementi per mantenere una spaziatura uniforme. Esempio: un pulsante con icone e testo.
- È necessario aggiornare regolarmente i contenuti. Esempio: un elenco di servizi con un numero variabile di voci.
- Il layout deve essere completamente reattivo su schermi di diverse dimensioni. Esempio: progettazione di una pagina con versioni desktop e mobile.
- Modifichi spesso la struttura. Esempio: voci di menu che aggiungi o rimuovi frequentemente.
- Utilizzi molti elementi di design ripetuti. Esempio: intestazioni e piè di pagina che compaiono su più pagine.
Perché l'opzione Riempi contenitore è disponibile per alcuni elementi ma non per altri?
L'opzione di ridimensionamento "Riempi contenitore" appare solo per gli elementi inseriti all'interno di una cornice di layout automatico. Questo perché "Riempi contenitore" indica all'elemento figlio di ingrandirsi o rimpicciolirsi in base alla logica del layout automatico padre.
Non è possibile impostare Riempi contenitore su un frame di livello superiore o su qualsiasi elemento che non si trovi all'interno di un frame con layout automatico, poiché non esiste un elemento padre con layout automatico di cui l'elemento possa "riempire" lo spazio.
Quando non utilizzare il layout automatico
Il layout automatico non è sempre necessario. Ad esempio, se stai creando qualcosa di semplice, come un banner unico che non prevedi di riutilizzare, non è necessario impostare regole automatiche di spaziatura o layout. Devi solo posizionare l'intestazione e l'immagine all'interno della cornice una volta sola a distanze fisse. Impostare il layout automatico per un layout che non modificherai né ripeterai mai non offre alcun vantaggio reale.
Un banner semplice come questo non necessita realmente dell'Auto Layout.
Se l'articolo vi è piaciuto, condividetelo con i vostri amici. Grazie!
Leggi anche:
Libro di testo gratuito su come progettare, impostare e gestire
landing page ad alta conversione
landing page ad alta conversione
Guida pratica gratuita all'animazione web con esempi e tecniche,
e consigli su come utilizzarli
