1. Principiile de aur: Design care are sens

Inainte de a desena butoane, trebuie sa intelegi structura. Un design bun nu e doar „frumos”, ci e logic.

Ierarhia Vizuala

Nu toate elementele sunt egale. Utilizatorul trebuie sa stie instant unde sa priveasca.

• Contrastul: Foloseste dimensiunea si greutatea fontului (Bold vs. Regular) pentru a diferentia titlurile de textul de corp.

• Spatierea (Whitespace): Nu aglomera elementele. Spatiul gol „aeriseste” designul si grupeaza vizual functionalitatile inrudite.

Consistenta prin Sisteme de Design

Nu inventa o culoare noua pentru fiecare pagina. Foloseste o paleta limitata si un set fix de dimensiuni pentru fonturi. In Figma, acest lucru se traduce prin Styles (Color Styles si Text Styles). Daca modifici culoarea principala in stiluri, ea se va schimba peste tot in proiect.

2. Cum faci trecerea de la Cod la Design (si invers)

Pentru un programator, Figma devine usor de folosit atunci cand incetezi sa-l privesti ca pe o panza de pictura si incepi sa-l vezi ca pe un DOM vizual.

Auto Layout: „Flexbox-ul” din Figma

Acesta este cel mai important instrument pentru tine. Auto Layout functioneaza exact ca flex din CSS.

• Poti seta gap intre elemente.

• Poti alege directia (Vertical sau Horizontal).

• Poti seta padding si aliniere. Daca stapanesti Auto Layout, designul tau va fi responsiv din start, iar programarea lui va fi o simpla traducere a proprietatilor din Figma in CSS.

Nu copia si lipi acelasi buton de 50 de ori. Creeaza o Componenta. Daca ulterior decizi ca butoanele trebuie sa aiba colturile mai rotunjite, modifici „Main Component” si toate instantele se actualizeaza automat.

• Foloseste Properties pentru a crea variante (ex: buton Primary, Secondary, Disabled) exact cum ai face cu niste props in React sau Vue.

3. Workflow-ul „Developer-Friendly”

Daca vrei sa faci design rapid si sa nu te doara capul la implementare, urmeaza acesti pasi:

1. Foloseste Grid-ul: Activeaza un Layout Grid (de regula 12 coloane pentru desktop). Te ajuta sa aliniezi totul matematic, fara sa „o dai pe langa” cu 1-2 pixeli.

2. Numeste-ti layerele (pe bune!): In loc de Frame 452, foloseste Card_Header sau Submit_Button. Te va ajuta enorm cand vei inspecta elementele pentru cod.

3. Foloseste Dev Mode: Figma are un mod special pentru dezvoltatori. Acesta iti arata direct valorile CSS, unitatile de masura (rem/px) si iti permite sa exporti asset-urile (iconite, imagini) cu un singur click.