Tre risposte a una domanda
Nella sezione Resizing del pannello a destra, ogni livello dentro un Auto layout risponde alla stessa domanda per la larghezza e per l'altezza: chi decide quanto sei grande?
- Hug contentsdecidono i figli: il frame li avvolge, padding compreso
- Fixeddecidi tu: la misura resta il numero che imposti
- Fill containerdecide il genitore: il livello si allarga e prende lo spazio che resta
Larghezza e altezza sono indipendenti, quindi un contenitore può stare in Hug in verticale e avere una larghezza fissa. E non sempre scegli Fixed apposta: appena trascini un bordo o scrivi una misura, Figma passa quell'asse su Fixed al posto tuo. Quando un frame smette di crescere, di solito il motivo è questo.
Fill container esiste solo per i livelli che stanno dentro un frame in Auto layout, perché ha bisogno di un genitore da riempire. Il bello arriva quando li combini: un elemento resta in Hug sul suo contenuto mentre quello accanto riempie il resto della riga.
I vincoli: l'altra direzione
L'Auto layout fa reagire un genitore ai suoi figli. I vincoli (Constraints) fanno il contrario: dicono a un figlio come comportarsi quando il genitore cambia misura. Seleziona un livello dentro un frame e la sezione Constraints ti mostra i bordi a cui puoi agganciarlo.
Aggancia un livello a Left and right e terrà la stessa distanza da tutti e due i lati, quindi si allarga con lo schermo. Agganciato a destra e in basso, resta in quell'angolo. Se togli tutti i bordi, il livello passa su Scale e cresce in proporzione al frame.
Prova tu: un gruppo di bottoni che sta su ogni schermo
- Seleziona il Button Group della lezione 2, rendilo largo quanto il frame Login da 393 px e imposta il padding orizzontale a 16, così si allinea alla griglia.
- Imposta l'allineamento del Button Group al centro.
- Seleziona i due bottoni e imposta il ridimensionamento orizzontale su Fill container. Si allargano per tutta la larghezza del gruppo.
- Seleziona il bottone secondario e premi ⇧ Shift + X per scambiare riempimento e bordo: ora si legge come l'azione più leggera.
- Seleziona il frame Login e trascina il bordo destro per allargarlo. Il gruppo di bottoni resta dov'era: non è quello che vuoi.
- Annulla con ⌘ Cmd + Z, seleziona il Button Group e imposta il vincolo orizzontale su Left and right. Allarga di nuovo il frame: ora i bottoni lo seguono.
Da ricordare
- Hug: decidono i figli. Fixed: decidi tu. Fill: decide il genitore.
- Ridimensionare un frame a mano passa quell'asse su Fixed.
- Fill container funziona solo dentro un frame in Auto layout.
- I vincoli fanno reagire i figli al genitore: Left and right si allarga con lo schermo.