Learn Figma Now Compra il libro EN
Lezione 1 di 5 · 5 min

Frame che crescono con il contenuto

Un bottone è una scatola con una parola dentro, e quando cambi la parola la scatola dovrebbe seguirla. Tutta l'idea dell'Auto layout sta qui, ed è l'abitudine che trasforma un wireframe in un'interfaccia che qualcuno può davvero costruire.

Le griglie sono statiche, l'Auto layout no

Le griglie ti danno precisione e allineamento, ma non reagiscono quando cambia il contenuto. Se ti è capitato di spostare cose a mano perché un'etichetta si è allungata o un nuovo elemento doveva entrare, sai già quanto velocemente si rompe un layout.

L'Auto layout funziona al contrario. Dai qualche regola a un frame, e Figma sposta e distanzia gli elementi al posto tuo ogni volta che qualcosa cambia.

Stesso cambio di testo, due risultati. Il rettangolo disegnato resta fermo e la scritta esce fuori, mentre il frame in Auto layout misura il contenuto e lo segue.

Un frame che misura il suo contenuto

Quando applichi l'Auto layout a un frame, diventa un contenitore dinamico che cresce o si restringe con quello che ha dentro. Le regole sono tre, e nella prossima lezione le vediamo una per una:

  • Direzionei figli si impilano in colonna o in riga
  • Gaplo spazio tra un figlio e il successivo
  • Paddinglo spazio tra i figli e il bordo del frame

Se conosci il CSS, questo è il Flexbox: un frame con l'Auto layout si comporta come un div con display: flex, e gap, allineamento e padding diventano regole CSS vere. Per questo insisto tanto con i miei studenti: quando progetti così, chi sviluppa legge il tuo layout e lo costruisce quasi com'è.

Prova tu: il primo bottone

Nel libro questo è il primo elemento vero della schermata Login di un'app per pianificare viaggi. Puoi seguire in qualsiasi frame vuoto, per esempio un frame iPhone 16 da 393 per 852.

  1. Fai clic dentro il frame per creare un livello di testo e scrivi Login.
  2. Con il testo selezionato premi ⇧ Shift + A. Figma lo avvolge in un nuovo frame e applica l'Auto layout in un colpo solo.
  3. Rinomina il frame Button / Primary / Default. Le barre serviranno quando lo trasformerai in un componente.
  4. Dai al frame un colore di riempimento, poi imposta il padding orizzontale e verticale a 16, un valore del sistema a 8 punti.
  5. Nella griglia di allineamento scegli il centro, così l'etichetta resta in mezzo al bottone.
  6. Fai doppio clic sul testo e scrivi Login to your account. Guarda il frame seguirlo, poi rimetti il testo di prima.

Perché cresce: Hug contents

Il frame ha seguito il testo perché la sua larghezza è su Hug contents, il valore predefinito di un nuovo frame in Auto layout: si stringe intorno ai figli, padding compreso. Fixed e Fill container sono le altre due opzioni, e sono la lezione 3.

Ancora una cosa che voglio farti notare. Prima un bottone era un rettangolo con un testo sopra, adesso è un frame che contiene il testo. Questo piccolo cambio è quello che rende possibile tutto il resto del corso.

Da ricordare

  • Le griglie sono statiche, l'Auto layout reagisce al contenuto.
  • ⇧ Shift + A mette la selezione in un frame e applica l'Auto layout in un colpo solo.
  • L'Auto layout di Figma funziona come il Flexbox del CSS.
  • Hug contents è il motivo per cui il bottone segue la sua etichetta.