1. Folosește corect Constraints (Constrângeri)

• Ce sunt? Constraints controlează modul în care elementele dintr-un frame se redimensionează atunci când frame-ul părinte își schimbă dimensiunea.
• Cum le setezi? Selectează un element, apoi mergi în partea dreaptă la secțiunea „Constraints”. Poți alege să fie „Left”, „Right”, „Top”, „Bottom”, „Center” sau „Scale”.
• Exemplu: Dacă vrei ca un buton să rămână mereu la 24px de marginea din dreapta, setează constraint-ul pe „Right”.

2. Folosește Auto Layout acolo unde este nevoie

• Ce este? Auto Layout permite ca elementele să se aranjeze automat în funcție de conținut, spațiere și reguli definite de tine.
• Cum îl folosești? Selectezi un frame sau un grup de elemente și apeși „+” la Auto Layout în partea dreaptă.
• Avantaje:
  • Spațierea dintre elemente se ajustează automat.
  • Poți adăuga padding, gap, alignment.
  • Ușurează adaptarea designului pentru diferite dimensiuni de ecran.
• Exemplu: Un card cu titlu, descriere și buton – dacă folosești Auto Layout, dacă titlul devine mai lung, butonul va rămâne mereu la aceeași distanță față de margine.

3. Setează corect Frame-ul principal

• De ce contează? Figma are frame-uri predefinite pentru „Desktop”, „Tablet”, „Mobile”. Acestea ajută la simularea reală a unui device.
• Cum setezi? Selectezi frame-ul și, în Properties > Resizing, alegi tipul de device sau setezi manual dimensiunea.
• Recomandare: Nu lucra pe frame-uri „Custom” dacă vrei să vezi cum arată pe device-uri reale.

4. Testează designul pe mai multe dimensiuni

• Preview: Folosește funcția „Preview” din Figma pentru a vedea cum se comportă designul la diferite dimensiuni.
• Simulează device-uri: Poți schimba rapid dimensiunea frame-ului sau poți copia designul într-un frame cu altă dimensiune.

5. Activează „Snap to pixel grid”

• Ce face? Asigură că marginile și elementele sunt aliniate perfect la pixeli, evitând blur sau nealiniere la export.
• Cum activezi? Selectezi elementul și apeși click dreapta > „Snap to pixel grid” sau folosești shortcut-ul din bara de sus.

6. Testează cu „Present”

• Ce este? „Present” deschide prototipul într-o fereastră nouă, simulând experiența reală a utilizatorului.
• De ce e util? Vezi dacă animațiile, spațierile și responsive-ul funcționează corect.