Lecția 08 · Stiluri și componente¶

Problema pe care o rezolvă¶

Ai un afiș cu 20 de elemente portocalii. Profesorul îți spune: „schimbă portocaliul în verde”.

• Fără stiluri: selectezi fiecare element, schimbi culoarea, cauți pe cele pe care le-ai ratat, mai găsești două a doua zi. 15 minute și o greșeală.
• Cu stiluri: schimbi stilul brand/primary. Toate cele 20 se actualizează. 3 secunde, zero greșeli.

Diferența crește exponențial cu mărimea proiectului. Într-un design de aplicație cu 40 de ecrane, fără stiluri nu se poate lucra deloc.

Stiluri¶

Un stil este o valoare salvată cu un nume, pe care o aplici în multe locuri. Figma are patru tipuri:

Cum creezi un stil¶

1. Selectează un element care are deja valoarea dorită.
2. În panoul din dreapta, la secțiunea respectivă (Fill / Text / Effects / Layout grid), apasă pe cele patru puncte.
3. Apasă + și dă-i un nume.

Cum numești stilurile¶

Deja am stabilit regula în lecția 03: după rol, nu după aspect. Acum adaugă și structura de foldere, prin /:

brand/
  primary
  primary-hover
  secondary
surface/
  base
  raised
  overlay
text/
  strong
  base
  muted
  inverse
feedback/
  success
  warning
  error

heading/
  h1
  h2
  h3
body/
  large
  base
  small
label/
  caps
  mono

Componente¶

Un stil salvează o valoare. O componentă salvează o structură întreagă: forme, texte, spațiere, toate împreună.

Componentă vs. instanță¶

• Componenta principală (main component) — originalul. Are un romb violet ◆ în panoul Layers.
• Instanța — o copie legată de original. Are un romb gol ◇.

Modificările din componenta principală se propagă în toate instanțele. Modificările dintr-o instanță rămân locale.

Cum creezi o componentă¶

1. Selectează elementele (de obicei un frame cu tot ce trebuie înăuntru).
2. Ctrl+Alt+K (Windows) / Cmd+Option+K (Mac), sau butonul ◆ din bara de sus.
3. Dă-i un nume descriptiv, cu structură de foldere: button/primary, card/project, icon/wifi.

Apoi o plasezi cu Ctrl+D sau din panoul Assets (stânga), unde apar toate componentele fișierului.

Ce se poate suprascrie într-o instanță¶

Proprietăți¶

O proprietate (component property) transformă o suprascriere manuală într-un câmp pe care îl completezi în panoul din dreapta. Patru tipuri:

Cum adaugi o proprietate¶

1. Intră în componenta principală.
2. Selectează stratul pe care vrei să-l faci configurabil.
3. În panoul din dreapta, lângă proprietatea respectivă, apasă pe iconița cu romb mic.
4. Create property → nume + valoare implicită.

Acum, orice instanță arată în panoul din dreapta un câmp cu acel nume. Nu mai trebuie să intri în straturi ca să schimbi textul.

Variante¶

O variantă grupează mai multe versiuni ale aceleiași componente într-una singură, cu un selector.

Exemplu: un buton¶

Proprietăți:

3 × 3 × 3 = 27 de variante dintr-o singură componentă. În panoul din dreapta al oricărei instanțe apar trei meniuri derulante.

Cum construiești un set de variante¶

1. Creează prima componentă (button, tipul primary, mărimea medium, starea default).
2. Selecteaz-o și apasă Create component set (butonul cu patru pătrate din bara de sus).
3. Apare un chenar violet punctat. Înăuntru, apasă + pentru fiecare variantă nouă.
4. În panoul din dreapta, la Properties, redenumește proprietățile (Property 1 → Type) și valorile.

Instance swap — slot-uri¶

Cea mai utilă proprietate, și cea mai puțin cunoscută de începători.

Problema: ai un card de proiect care conține o pictogramă. Ai 8 pictograme diferite. Faci 8 componente de card?

Soluția: faci o componentă de card, în care pictograma este ea însăși o instanță. Apoi adaugi o proprietate de tip Instance swap pe ea. În fiecare instanță de card, alegi din meniu ce pictogramă vrei.

card/project  (componentă)
├── frame
│   ├── ◇ icon/wifi      ← slot: Instance swap
│   ├── text: Titlu      ← proprietate Text
│   └── text: Descriere  ← proprietate Text

Organizarea bibliotecii¶

Un fișier cu 60 de componente fără structură e mai rău decât niciuna. Structura minimă:

Pagina: Foundations
  ├── Paleta de culori (toate stilurile, vizual)
  ├── Scara tipografică
  └── Sistemul de spațiere

Pagina: Components
  ├── Secțiunea: Primitives     → button, input, badge, avatar
  ├── Secțiunea: Icons          → setul de 24 × 24
  └── Secțiunea: Composites     → card, header, nav, footer

Pagina: Screens / Designs
  └── Lucrul propriu-zis

Convenția de nume¶

Când NU folosești componente¶

Componentele au un cost: timp de construcție și complexitate. Nu merită pentru:

• Un element folosit o singură dată. Un titlu de afiș nu e componentă.
• Un afiș unic care nu va avea variante.
• Forme decorative care se schimbă de fiecare dată.

Exerciții¶

Exercițiu 1 — Sistem de stiluri complet¶

Creează, într-un fișier nou, setul complet de stiluri de culoare și text din lecțiile 03 și 04. Apoi construiește un card de proiect care folosește exclusiv stiluri — niciun HEX scris de mână.

Exercițiu 2 — Buton cu variante¶

Construiește un set de variante pentru un buton cu proprietățile Type (primary, secondary, ghost) și State (default, hover, disabled). Nouă variante.

Exercițiu 3 — Card cu slot de pictogramă¶

Construiește o componentă card/feature cu: o pictogramă (slot), un titlu (proprietate Text) și o descriere (proprietate Text). Plasează 4 instanțe cu pictograme diferite din setul făcut în lecția 07.

Mini-proiect: bibliotecă de bază pentru cercul de informatică¶

Construiește un fișier Design System cu trei pagini (Foundations, Components, Playground) care conține: setul complet de stiluri, setul de 8 pictograme din lecția 07, și patru componente — button (cu variante), badge, card/project și input.

Rezumat¶

• Stilurile salvează valori (culoare, text, efect, grilă); le numești după rol, cu / pentru foldere.
• Un element corect făcut arată în panoul din dreapta un nume de stil, nu un cod HEX.
• Componenta ◆ e originalul, instanța ◇ e copia legată. Modificările curg de sus în jos.
• Într-o instanță poți schimba text, culori, imagini și vizibilitate — nu structura.
• Proprietățile (Text, Boolean, Instance swap, Variant) transformă suprascrierile în câmpuri.
• Variantele grupează versiuni; nu construi 27 dintr-o dată.
• Instance swap = slot; orice element care variază, dar rămâne același tip, e slot.
• Ține componentele principale pe o pagină separată.
• Regula de trei: sub trei utilizări, componenta nu merită.

Pasul următor: → Lecția 09: Auto Layout