Auto layout-ul în Figma se destramă: 7 cauze și ce să apeși

28 august 2026 · 9 minute · Tomsa Daria

Șapte cauze pentru care auto layout-ul se comportă altfel decât te așteptai și ce anume trebuie apăsat în panoul Design în fiecare caz. Un articol pentru cei care au deja Figma deschis.

Fill container este gri: obiectul nu este în interiorul unui container cu auto layout

Simptomul este ușor de recunoscut: selectezi un bloc, deschizi lista derulantă de lângă câmpul W și nu găsești acolo Fill container — fie lipsește, fie este inactiv. Pare că fișierul s-a stricat. Nu s-a stricat: modurile de dimensionare nu sunt disponibile mereu, iar aceasta este o regulă, nu un bug.

Cele trei moduri răspund la o singură întrebare — cine decide ce lățime are obiectul. Fixed — tu, printr-un număr. Hug contents — conținutul: containerul se strânge după copiii lui. Fill container — părintele: obiectul ocupă tot spațiul liber. De aici și limitările. Hug apare doar la frame-urile cu auto layout și la layerele de text: un frame obișnuit nu are cu ce să măsoare conținutul, el fiind așezat prin coordonate. Fill apare doar la un obiect care se află în interiorul unui frame cu auto layout: te poți întinde doar față de un părinte care știe despre spațiul liber.

Concluzia practică: dacă în listă nu există Fill, întrebarea nu este despre obiect, ci despre părintele lui. Verifică pe rând:

• Selectează în panoul Layers părintele blocului — chiar părintele, nu blocul în sine — și apasă Shift + A. În panoul Design îi va apărea secțiunea Auto layout, iar copilului îi va apărea în listă modul Fill.
• Verifică în arborele de layere că obiectul este într-adevăr în interiorul frame-ului. Tragerea pe pânză nu pune întotdeauna obiectul înăuntru: vizual el stă deasupra, dar în arbore stă alături. Atunci Fill nu va apărea, oricât ai activa auto layout-ul la vecin.
• Dacă obiectul este împachetat într-un grup, modurile se referă la grup, nu la el. Desfă grupul (Cmd/Ctrl + Shift + G) — auto layout-ul lucrează cu frame-uri.
• Frame-ul de sus al ecranului nu este imbricat în nimic, deci nu are de la cine să ia Fill. Lățimea ecranului este întotdeauna Fixed — asta este normal, nu o greșeală.

Hug, Fill și Fixed: ce promite de fapt fiecare mod

Modul se stabilește separat pentru lățime și pentru înălțime — sunt două liste independente, lângă W și lângă H. Jumătate dintre ciudățenii vin din faptul că omul l-a schimbat pe unul și așteaptă efectul de la celălalt. Iată un set de corespondențe de lucru, care acoperă aproape orice interfață:

Buton — lățime Hug, înălțime Fixed 48: butonul îmbrățișează eticheta, iar un text lung dă un buton lat. Câmp de introducere — lățime Fill, înălțime Fixed: câmpul ocupă toată lățimea formularului, iar formularul decide cât înseamnă asta. Card de produs într-un rând — lățime Fill, înălțime Hug: cardurile împart lățimea în mod egal, iar înălțimea vine din conținut. Text în interiorul cardului — lățime Fill, înălțime Hug: doar așa un titlu lung se va rupe pe rânduri, iar cardul va crește după el. Fotografie — lățime Fill, înălțime Fixed, plus modul de umplere Fill, ca imaginea să fie decupată, nu turtită.

Acum, defecțiunea principală a acestui modul și, totodată, cea mai greu de înțeles la prima vedere: Fill în interiorul lui Hug. Un card cu lățime Fill se află într-un container cu lățime Hug. Părintele așteaptă dimensiunea de la copii, copiii — de la părinte, iar Figma rezolvă disputa cum poate: strânge blocul într-o fâșie îngustă sau îl întinde până la un număr ciudat. Semnul: blocul se comportă în salturi și nu reacționează la modificări care ar trebui să îl influențeze.

Regula care rezolvă asta: într-un lanț de containere, cel puțin un nivel trebuie să fie Fixed sau limitat de o lățime maximă. Dimensiunea trebuie să vină de undeva. De obicei se fixează containerul exterior al conținutului — de exemplu, 1200 după grilă — iar tot ce este înăuntru se întinde de la el.

Tot de acolo, din lista modurilor, vin și limitările: opțiunile Add min width și Add max width (și cele similare pentru înălțime). Fill are o proprietate neplăcută — se întinde nelimitat, iar un rând de text lat de 1200 este ilizibil. Pentru un bloc de text se pune un maximum de 640, adică aproximativ 70 de semne pe rând. Pentru un card de produs — un minimum de 240: sub el fotografia devine inutilă. Aceste două numere fac responsivitatea aproape automată și elimină jumătate din corecturile manuale la lățimi mici.

Blocul iese din frame: Clip content și când se activează

Bifa Clip content din secțiunea Frame taie tot ce iese în afara frame-ului. Tentația de a o activa imediat ce ceva iese în afară este mare, dar mai întâi merită să răspunzi de ce a ieșit conținutul: Clip content ascunde simptomul, nu repară layout-ul.

Prima cauză: un copil are lățime fixă mai mare decât lățimea interioară a părintelui, adică lățimea părintelui minus padding-ul din stânga și din dreapta. Auto layout-ul nu strânge copiii Fixed — îi desenează cinstit peste bordură. Tratamentul: lățime Fill la copil sau min width în locul unui număr rigid.

A doua cauză: părintele are înălțime fixă, iar conținutul a crescut — de exemplu, titlul a ocupat două rânduri în loc de unul. Tratamentul: înălțime Hug la părinte, ca el să crească după conținut.

Unde Clip content este necesar la obiect: un bloc media cu fotografie și colțuri rotunjite, altfel colțurile pozei ies de sub rază; o bandă de filtre cu derulare orizontală. Unde nu are voie să fie activat: dacă blocul are o umbră care iese în afara marginilor; dacă deasupra se află o etichetă cu Absolute position, care atârnă intenționat peste margine; dacă înăuntru există o listă derulantă care, în prototip, trebuie să se deschidă peste vecini.

Totul s-a deplasat pe un singur rând: direcție și aliniere

Elementele s-au așezat pe rând, în loc de coloană. Direcția înseamnă cele trei pictograme din secțiunea Auto layout: vertical, orizontal și Wrap (trecerea pe rândul următor, când conținutul nu încape). O direcție orizontală la un container pe care îl credeai vertical este cea mai frecventă cauză a lui «totul s-a deplasat». Verific-o prima.

Elementele s-au depărtat spre margini, iar la mijloc a rămas o gaură. În câmpul Gap este valoarea Auto, adică space between. Procedeul este util: așa se face un antet cu logoul în stânga și meniul în dreapta, fără dreptunghiuri goale de distanțare. Dar activat din greșeală, arată ca o defecțiune. Scrie un număr în câmp și elementele se vor aduna la loc.

Conținutul este lipit în altă parte. Pătratul din nouă puncte este alinierea, iar el nu întinde, ci lipește: răspunde la întrebarea «unde stă conținutul», atunci când containerul este mai mare decât conținutul. Dacă într-un rând cardurile au înălțimi diferite și vrei să le faci egale, alinierea nu ajută — este nevoie de modul Fill pe înălțime chiar la carduri.

Elementul nu se mișcă cu mouse-ul, iar câmpurile X și Y sunt inactive. Așa și trebuie: auto layout-ul ignoră coordonatele copiilor săi. Ordinea este dată de ordinea layerelor — într-un container orizontal, primul de jos din lista Layers merge în stânga. Le poți rearanja și pe pânză: ia elementul și mută-l, Figma va arăta o linie albastră de inserare și îl va repoziționa în flux. Iar dacă un element chiar trebuie să stea într-un punct arbitrar — eticheta de reducere din colțul cardului — selectează-l și activează Absolute position, pictograma cu un cadru și un punct din secțiunea Auto layout. El va ieși din flux, dar va rămâne în interiorul frame-ului.

Spațierile trăiesc după regulile lor: padding-ul containerului versus gap-ul dintre copii

Două numere diferite stau alături în panou și sunt confundate permanent. Padding este spațiul interior al containerului, distanța de la bordura lui până la conținut; se stabilește din două câmpuri, pe orizontală și pe verticală, iar pictograma cu patru pătrate din dreapta desface toate cele patru laturi separat. Gap este distanța dintre copii și nu are nicio legătură cu bordurile containerului.

Simptomul: între două blocuri nu este distanța scrisă în Gap. Caută astfel:

• Vecinul are propriul padding, iar distanța reală este gap-ul plus spațierea lui.
• Între blocuri se află un container imbricat, cu propriul padding: pe pânză este invizibil, dar în panoul Layers se vede imediat.
• În câmpul Gap este Auto — atunci numărul din el nici nu se folosește.
• Unul dintre vecini este în modul Fill: el mănâncă tot spațiul liber, iar ceea ce arată ca o distanță este partea lui goală. Ține cursorul apăsând Alt și Figma va arăta numerele reale.
• Layerul de text este mai înalt decât literele lui: înălțimea rândului este dată de interliniere, iar deasupra și dedesubt rămâne aer. Se citește ca o spațiere în plus, dar aparține textului, nu containerului.

Testul pe conținut «incomod»: titlu lung, câmp gol, preț pe două rânduri

Auto layout-ul se destramă nu în momentul construirii, ci în momentul în care în el ajung date reale. De aceea o componentă se verifică nu pe textul comod, pe care l-ai inventat chiar tu, ci pe cel extrem. Cinci minute de test la limită economisesc o oră de refaceri.

Ce introduci: un titlu dintr-un cuvânt și un titlu pe trei rânduri — cardul trebuie să crească în jos, iar rândul să rămână drept. Un preț de «890 ₽» și unul de «124 900 ₽» — blocul de prețuri nu trebuie să se suprapună peste prețul vechi și nici să împingă butonul. O etichetă dezactivată și un preț vechi dezactivat — în locul lor nu trebuie să rămână spațiu gol. Lățimi ale cardului de 240 și 400 — fotografia nu se deformează, butonul se întinde, textul se rupe pe rânduri. Și, în final, un rând din patru carduri cu titluri de lungimi diferite — toate trebuie să aibă aceeași înălțime.

Ce repari, dacă testul nu a trecut. Titlul lung a întins cardul într-o fâșie și a stricat rândul — layerul de text are lățimea Hug, iar el are nevoie de Fill și de înălțime Hug: doar așa textul se rupe pe rânduri. Este al doilea caz ca frecvență după Fill în interiorul lui Hug și merită verificat primul, când un rând de carduri se destramă brusc.

Descrierea a crescut la cinci rânduri — limitează numărul de rânduri cu parametrul Max lines din secțiunea Text: pentru descrierea dintr-un card, două rânduri sunt de obicei de ajuns.

Cardurile dintr-un rând au ieșit cu înălțimi diferite — selectează cardurile din rând și pune-le înălțimea Fill, iar rândului însuși aliniere la marginea de sus. Atunci toate vor deveni la fel de înalte ca cel mai înalt. Butonul se va lipi de partea de sus; ca să coboare, dă blocului cu text înălțimea Fill în interiorul cardului — el va mânca spațiul în plus, iar butonul va ajunge la marginea de jos. Spațiul liber se dă blocului care poate crește: acesta este un procedeu standard, nu un truc.

Dacă după o astfel de trecere vrei să construiești cardul o singură dată și corect, în loc să îl repari mereu de la capăt — în cursul «Interfețe în Figma» auto layout-ului îi este dedicat un modul separat, de 2 h 15 min, care se termină cu practica «un card de produs care se întinde»: același card, același test la limită din cinci puncte, doar că fiecare defecțiune este analizată.

Auto layout-uri imbricate: de ce trei niveluri sunt normale, iar șapte sunt o greșeală

Imbricarea se gândește înainte de a desena. Pentru un card de produs, ea arată astfel: containerul vertical exterior Card, iar în el Media (fotografia și eticheta deasupra), Text (titlu și descriere), Prețuri (orizontal: cel actual și cel vechi) și butonul. Motivul grupării este unul singur și absolut practic: distanțele din interiorul unui grup și cele dintre grupuri sunt diferite — 8 în interiorul textului și 16 între blocuri — iar un singur container plat oferă o singură valoare de Gap.

Trei-patru niveluri sunt normale. Șapte sunt semnul că ai împachetat lucrurile din mers. Deosebirea este simplă: fiecare nivel trebuie să aibă un motiv — direcție, distanță, fundal sau padding. Un nivel fără motiv este un ambalaj cu un singur copil, cu gap zero și padding zero; el se desface cu Cmd/Ctrl + Shift + G, fără consecințe.

De unde apar nivelurile în plus. Primul: Shift + A, apăsat pe un singur obiect, îl împachetează într-un frame-ambalaj separat. Uneori este necesar — un buton chiar este un frame cu auto layout în jurul unei singure etichete — dar mai des nu. Semnul: în panoul Layers a apărut un nivel de imbricare în plus; anulează cu Cmd/Ctrl + Z și selectează dintr-o dată toate obiectele necesare. Al doilea: încercarea de a repara o defecțiune cu încă un ambalaj. Ea dă aparența de ordine pentru o zi, iar peste o săptămână în fișier sunt șapte niveluri și niciunul nu poate fi atins fără a-l strica pe vecin.

Checklist: ce verifici înainte de a repara manual

Înainte de a muta ceva cu mouse-ul, parcurge lista de sus în jos. În nouă cazuri din zece, răspunsul se află în primele trei puncte.

• Părintele blocului chiar are auto layout activat — în panoul Design există secțiunea Auto layout.
• Blocul se află în interiorul acestui părinte în arborele Layers, nu alături de el.
• Direcția containerului este cea la care te-ai gândit, iar în câmpul Gap este un număr, nu Auto.
• Layerele de text au lățimea Fill și înălțimea Hug.
• Nicăieri nu există Fill în interiorul lui Hug fără un nivel fix mai sus pe lanț.
• Cardurile și coloanele au min width, iar blocurile de text — max width.
• Toate valorile de padding și gap sunt luate dintr-o singură scară: 4, 8, 12, 16, 24, 32. Nu există valori ciudate — 13 și 22 sunt urma tragerii cu mouse-ul, nu o decizie.
• Elementele care stau peste celelalte sunt marcate cu Absolute position, nu au ieșit din flux de la sine.
• Clip content este activat doar acolo unde chiar este necesar.
• Testul la limită, pe titlu lung, prețuri extreme și două lățimi, a fost trecut.

De ce merită dus lucrul până la capăt

Auto layout-ul nu este un mod de desenare, ci o cale de a descrie reguli. În loc de «acest text stă cu 24 de pixeli mai jos», spui «elementele merg vertical, cu o distanță de 24», iar de acolo încolo regula este respectată fără tine. Cât timp în fișier rămâne fie și un singur bloc așezat prin coordonate, macheta se va destrăma exact în acel loc.

Există și o a doua consecință, despre care lumea află de obicei mai târziu. În modul pentru dezvoltatori, un bloc construit prin coordonate arată distanțele calculate din realitate: 23, 25, 24. Dezvoltatorul va vedea trei numere diferite acolo unde tu te gândeai la unul singur și le va repeta în cod. Auto layout-ul predă padding-ul și gap-ul ca valori explicite — și acesta este principalul argument practic în favoarea lui. Ce mai merită verificat înainte de predarea fișierului analizăm în articolul cum predai macheta dezvoltatorului.