Folosind Component Properties și Variants în Figma, poți grupa toate aceste variante într-un singur set de componente, unde fiecare variantă este o opțiune a acelei componente. Astfel, faci designul mai organizat, actualizările mai rapide și colaborarea mai eficientă.

Pași concreți pentru a crea variante eficiente:

1. Creează componenta de bază

Construiește primul element, de exemplu un buton cu design-ul standard (culoare, text, margini).

2. Selectează componenta și transform-o în Componentă

Selectează elementul și apasă Ctrl + Alt + K (Windows) pentru a-l transforma în componentă.

3. Creează variantele

Cu componenta selectată, în sidebar-ul din dreapta, apasă pe butonul „+” de lângă Variants pentru a crea o variantă nouă. Repetă pentru câte variante ai nevoie (ex: hover, apăsat).

4. Defineste proprietățile componentei

Pentru fiecare variantă, denumește proprietățile (ex: State: Default, State: Hover, State: Pressed). Poți adăuga și alte proprietăți precum Size (Small, Medium, Large).

5. Personalizează fiecare variantă

Schimbă culorile, textul, iconițele sau alte elemente pentru fiecare variantă conform proprietăților definite.

6. Folosește variantele în design

Când inserezi componenta în pagină, vei putea schimba proprietățile direct din panoul de proprietăți, fără să inserezi componente separate.

Beneficii

• Spațiu de lucru mult mai curat și organizat

• Actualizări simultane la toate variantele

• Prototipare și dezvoltare mai rapide și mai clare.