Perché l'Auto Layout di Figma si sposta dopo aver importato una pagina web

Una fila di card allineata nel browser arriva in Figma con una card quattro pixel più in basso. Niente è rotto abbastanza da poterlo indicare. Ecco cosa è successo davvero.

Importi una pagina web in Figma, il pannello dei livelli si riempie e qualcosa non torna. Una fila di card che nel browser era allineata ha ora una card quattro pixel più in basso. Una navigazione centrata è centrata all'incirca. Niente è rotto abbastanza da poterlo indicare, ma il file non corrisponde più allo screenshot che hai lasciato aperto accanto.

Quasi sempre è l'Auto Layout, applicato dove non doveva. Vale la pena capire perché succede, perché la soluzione non è «disattivare l'Auto Layout»: è saper riconoscere quando i due sistemi di impaginazione coincidono davvero e quando uno strumento sta tirando a indovinare.

Due motori di impaginazione che non erano fatti per coincidere

Un browser dispone una pagina con il CSS. Flexbox, grid, float, flusso inline, margini che collassano, un line-height che spinge il testo fuori dalla propria box, arrotondamenti sub-pixel diversi da piattaforma a piattaforma. Decenni di regole, e la maggior parte sono casi limite che contano una volta sola.

Figma dispone un frame con l'Auto Layout. Un sistema molto più piccolo, e volutamente: una direzione, una spaziatura, quattro valori di padding, l'allineamento su due assi, e per ogni figlio un grow e uno stretch. Non molto altro.

L'Auto Layout non è una reimplementazione di flexbox. Gli somiglia come una bicicletta somiglia a una moto. Così quando un convertitore legge display: flex e imposta layoutMode: "HORIZONTAL", sta facendo un'affermazione: questi due sistemi metteranno ogni figlio nello stesso punto. A volte è vero. Spesso è quasi vero, che è peggio.

Dove i due divergono in silenzio

Alcuni casi concreti, tutti con l'aria di flexbox e nessuno riproducibile dall'Auto Layout.

• Margini sugli item flex. In CSS un figlio porta il proprio margine, incluso margin-left: auto per spingere un gruppo a destra. L'Auto Layout ha una sola spaziatura per l'intero frame e nessun margine per figlio.
• space-around e space-evenly. L'Auto Layout ha SPACE_BETWEEN. Gli altri due distribuiscono lo spazio residuo in modo diverso, e non esiste impostazione che li riproduca.
• align-items: baseline. Testi di dimensioni diverse appoggiati a una linea di base comune, cosa frequente in titoli e righe di prezzo. L'Auto Layout allinea per bordi e centri di box, non per linee di base.
• flex-grow frazionario. flex: 1 diventa layoutGrow: 1. flex: 2 e flex: 0.5 non diventano niente.
• flex-wrap. Una riga che va a capo è una geometria diversa da una riga sola, e dove va a capo dipende dalla larghezza del contenitore al momento della cattura.
• La rimisurazione del testo. È quella che frega gli strumenti. Un livello di testo adattato al proprio contenuto lo misura Figma, con il font che Figma possiede, alla dimensione che Figma calcola. Se quella misura si discosta dal browser anche di un pixel, tutti i fratelli successivi nello stack si spostano.

Per via di quest'ultimo punto il problema spesso salta fuori solo dopo aver installato un font mancante, o solo sul computer di qualcun altro.

Perché i convertitori lo applicano comunque

Perché un file pieno di frame con Auto Layout sembra un prodotto migliore di uno pieno di rettangoli posizionati in assoluto. Fa la sua figura in una demo e vale un punto nell'elenco delle funzioni. E nel caso comune, una riga semplice o una griglia di card a spaziatura uniforme, è davvero meglio: ridimensioni il frame e si comporta come deve.

Il guaio è che lo strumento non distingue il caso comune da quello che ci va vicino senza verificare, e verificare costa più che non verificare.

Cosa fare

Se hai già importato

Prendi il frame che sembra sbagliato e imposta la modalità di layout su nessuna, nella sezione layout del pannello di destra. I figli mantengono la posizione attuale, quindi se lo spostamento è già avvenuto questo lo congela invece di annullarlo. Per questo la mossa utile è quasi sempre reimportare, non riparare.

Prima però controlla una cosa: i font che la pagina usava sono installati sul tuo computer? Un font sostituito rimisura ogni livello di testo, e nessuna regolazione di layout salva un file il cui testo ha la larghezza sbagliata. Figma ti dice quali font mancano all'apertura.

Se stai scegliendo uno strumento

Chiedi cosa fa quando i due sistemi divergono. Le risposte possibili sono tre e una sola regge.

1. Applicare l'Auto Layout ovunque veda flexbox. Veloce, bello in demo, e ti consegna un file che si è spostato senza dirtelo.
2. Non applicarlo mai. Sempre corretto, mai utile. Ti ritrovi una pila di livelli assoluti, esatti e faticosi da modificare.
3. Applicarlo solo dove riproduce l'originale. Corretto e utile, ma richiede che lo strumento preveda davvero cosa farà Figma e confronti.

Come decide Snapture

Snapture sceglie la terza, e il meccanismo sta in un paragrafo.

Al momento della cattura sa già dove si trova ogni elemento, perché ha letto la pagina renderizzata: possiede il rettangolo reale, calcolato dal browser, per ogni figlio. Prima di applicare un layout simula cosa farebbe il motore di Figma con lo stesso frame — il padding, la spaziatura, l'allineamento, la distribuzione del grow — e produce un rettangolo previsto per ogni figlio. Poi confronta i due insiemi. Se ogni figlio cade entro mezzo pixel da dove l'aveva messo il browser, il layout viene applicato. Se anche uno solo sbaglia, l'intero frame conserva coordinate assolute esatte.

Dall'altra parte c'è una seconda verifica. Dopo che il plugin di Figma ha applicato il layout, rimisura i figli, stavolta contro il motore vero e non contro una previsione, e se qualcosa si è mosso oltre quello stesso mezzo pixel riporta il frame alle coordinate catturate. Questa verifica esiste perché un livello di testo può essere rimisurato in fase di import in un modo che nessuna simulazione prevede.

Come si vede nella pratica

Far girare il convertitore su pagine reali dà l'idea di quanto sia selettivo. Sono i numeri della stessa misurazione pubblicata sulla pagina delle misure.

La riga interessante è quella di MDN. Cinque frame con Auto Layout su 253 nodi sembra un fallimento dello strumento. È lo strumento che lavora: l'impaginazione degli articoli di MDN è soprattutto flusso di documento e float, cosa che l'Auto Layout non modella affatto, quindi il filtro ha rifiutato quasi tutto e ha tenuto posizioni esatte. Per quella pagina è lo scambio giusto.

Linear, al contrario, è costruito quasi interamente con righe flex a spaziatura uniforme. 261 dei suoi frame superano davvero il confronto, e quelli si comportano bene quando li ridimensioni in Figma.

In breve

L'Auto Layout dopo un import è affidabile solo se qualcosa lo ha verificato. Flexbox e Auto Layout si sovrappongono abbastanza da ingannare un convertitore e differiscono abbastanza da spostarti il file, e la differenza si presenta di solito come qualche pixel invece che come una rottura evidente: esattamente il tipo di errore che costa più tempo a trovare.

Se uno strumento non sa dirti cosa fa quando i due divergono, dai per scontato che non verifichi.

English · 한국어 · 日本語 · 简体中文 · 繁體中文 · Español · Português · Français · Deutsch · Русский · Italiano · Bahasa Indonesia