Incolli un frame copiato da Figma e lo strumento lo ridisegna. Poi legge i numeri del file: misure, padding, gap e sizing di ogni livello. Controlla 17 cose: prima gli errori che si dimostrano con i numeri, poi le scelte che di solito sono sbagliate. Qui trovi perché sono un problema; come si sistema te lo dice la scheda del problema, quando lo trova nel tuo frame.
Il contenuto non entra
Il frame ha una misura decisa ma figli, gap e padding insieme occupano di più. Il layout è già rotto adesso, non solo quando cambierà il testo.
Lista che scorre
Il contenuto va oltre il frame solo in fondo, sull’asse principale: per una lista che scorre è giusto. In Figma conviene dirlo con Clip content e lo scroll del prototipo, così si vede com’è davvero e chi sviluppa sa che scorre.
Testo più grande del suo box
Il testo ha una misura fissa e le righe non ci stanno: in Figma si vede uscire, nel prodotto verrà tagliato o si sovrapporrà.
Box del testo più grande del testo
Il box ha una misura scritta a mano e il testo non lo riempie: lo spazio vuoto conta nel layout, sposta gli allineamenti e i gap non sono più quelli che vedi nel pannello.
Gruppo dentro un Auto Layout
Un gruppo non ha padding, non può andare in Fill e misura sempre il suo contenuto: nel flusso è una scatola che non risponde.
Frame senza Auto Layout
I figli sono messi a mano: se un testo si allunga o un elemento sparisce, gli altri non si spostano.
Livelli fuori dal flusso
Absolute position toglie il livello dal layout: non sposta gli altri e non si sposta con loro. Giusto per badge e overlay, sbagliato per il resto.
Testo al limite
Un testo in Hug si allarga con le parole. Risalendo i contenitori in Hug si arriva al primo con una larghezza decisa: lì resta pochissimo spazio, una parola in più e il layout si rompe.
Wrap con altezza fissa
Con il wrap il numero di righe cambia con la larghezza: se il frame si stringe le righe aumentano. Con un’altezza fissa le nuove righe escono dal frame e coprono quello che c’è sotto.
Contenuto in Fixed invece di Fill
Nella riga nessun figlio è in Fill e il blocco di contenuto (testi che vanno a capo, figli in Fill) ha una larghezza scritta a mano. Se la card cambia larghezza il contenuto resta com’è: lascia un buco o sborda.
Contenitore fisso più grande del contenuto
Un frame trasparente con una misura scritta a mano e dentro meno contenuto: lo spazio vuoto non si vede ma conta, sposta quello che viene dopo e non segue il testo quando cambia. Di solito voleva essere Hug.
Fixed che riempie il padre
Il figlio occupa al pixel lo spazio del padre, ma con una misura scritta a mano: se il padre cambia larghezza o altezza, il figlio resta com’è e lascia un buco o sborda. Di solito voleva essere Fill.
Spazi fuori dalla griglia di 4
Padding e gap che non sono multipli di 4 si notano come piccoli disallineamenti e diventano numeri strani nel codice.
Spazi scritti a mano
Il file usa già variabili per gli spazi, ma qui ci sono numeri scritti a mano: quando il token cambia, questo frame resta indietro.
Frame che non fa niente
Niente riempimento, bordo, effetti, padding o gap, e un solo figlio: è un livello in più nell’albero che non cambia il risultato.
Frame vuoto usato come spazio
Un frame vuoto e schiacciato serve solo a fare distanza. Il gap o il padding fanno la stessa cosa e restano giusti quando il contenuto cambia.
Auto Layout molto annidati
Sei o più Auto Layout uno dentro l’altro sono difficili da leggere e spesso nascondono un livello che si può togliere.
- Il mio file finisce su un server?
- No. La copia di Figma si legge nel browser, sul tuo computer. Non parte nessuna richiesta.
- Funziona con componenti e istanze?
- Sì. Entro anche nelle istanze e controllo il componente da cui vengono: il problema lo trovi segnato «nel componente», lo correggi lì e si sistemano tutte.
- Perché l’anteprima è un po’ diversa da Figma?
- Forme, testi e colori li ridisegno dai dati della copia: immagini, effetti e alcuni font possono cambiare. I numeri dei controlli invece sono quelli del file.