Glosarul acoperă termenii esențiali din construcția unui Design System — de la atomic design și design tokens la guvernanță, teme și versionare — oferind definiții clare pentru fiecare concept.
O referință pentru constructorii de design systems
Acest articol face parte din ghidul complet despre Design Systems. Începe de acolo pentru imaginea de ansamblu.
Design systems se află la intersecția dintre design, engineering și strategie de produs. Vocabularul poate fi derutant — mai ales când același termen înseamnă lucruri diferite în organizații diferite. Acest glosar definește conceptele cheie pe care le vei întâlni când construiești, menții sau contribui la un design system scalabil.
A
Atomic design
O metodologie de Brad Frost care structurează componentele UI pe cinci niveluri ierarhice: atomi (elemente HTML de bază ca butoane, input-uri și etichete), molecule (combinații simple ca un câmp de căutare), organisme (secțiuni complexe ca un header de pagină), template-uri (layout-uri la nivel de pagină) și pagini (instanțe specifice cu conținut real). Atomic design oferă un model mental pentru construirea sistemelor din piese mici, componabile. Vezi ghidul nostru Design System 101 pentru cum aplici atomic design în practică.
B
Base token (token de bază)
Un design token care stochează o valoare brută, fără context. Se mai numește token primitiv sau token global. Exemplu: gray-700: #374151. Token-urile de bază sunt referențiate de token-urile semantice dar rareori sunt folosite direct în codul componentelor.
C
Componentă
Un element UI reutilizabil, autonom, cu o structură, un comportament și un aspect vizual definit. Componentele sunt blocurile de construcție ale unui design system — butoane, input-uri, carduri, modaluri și elemente de navigare. O componentă bine construită încapsulează toată complexitatea sa în spatele unei interfețe simple.
Componentă compozită
O componentă construită prin combinarea mai multor componente mai mici. Un form group (etichetă + input + text ajutător + mesaj de eroare) e o componentă compozită. Compozitele gestionează layout-ul și coordonarea între copiii lor, delegând render-ul către primitivele subiacente.
Model de contribuție
Procesul definit prin care persoanele din afara echipei de bază a design system-ului propun, proiectează, construiesc și integrează componente sau modificări noi. Un model sănătos de contribuție include template-uri de submisie, criterii de review și termene clare. Fără unul, sistemul devine un blocaj.
D
Design token
O variabilă cu nume, agnostică de platformă, care codifică o decizie de design. Token-urile înlocuiesc valorile hard-codate (culori hex, dimensiuni în pixeli, nume de fonturi) cu nume semnificative care pot fi traduse în CSS, iOS, Android și orice altă platformă. Sunt puntea dintre intenția de design și implementarea de engineering.
Documentație
Materialul de referință scris și vizual care explică cum se folosește design system-ul. Documentația include specificații de componente, ghiduri de utilizare, exemple de cod, principii de design și note de accesibilitate. Un sistem fără documentație e doar o bibliotecă de componente orfane.
F
Figma library
Un fișier Figma partajat care conține toate componentele design system-ului ca asset-uri reutilizabile. Echipele se abonează la bibliotecă, iar update-urile se publică automat în toate fișierele consumatoare. Bibliotecile Figma sunt echivalentul din design al unui registru de pachete de cod.
G
Guvernanță
Framework-ul operațional care ghidează cum evoluează design system-ul. Guvernanța acoperă ownership-ul, autoritatea decizională, cadența review-urilor, strategia de versionare, politicile de depreciere și rezolvarea conflictelor. Guvernanța bună menține sistemul coerent fără a-l face rigid.
Sistem de grid
Un framework spațial care definește coloane, gutters și margini pentru layout-ul paginii. Sistemele de grid asigură aliniere și proporție consistente pe ecrane. Configurațiile comune includ griduri de 12 coloane pentru desktop și 4 coloane pentru mobil. Design tokens codifică adesea valorile grid-ului pentru consistență cross-platformă.
H
Handoff
Procesul de transfer al specificațiilor de design către engineering pentru implementare. În design systems mature, handoff-ul e minimizat pentru că componentele există deja atât în design, cât și în cod. Obiectivul e reducerea handoff-ului la decizii de layout și conținut, nu specificații individuale de componente. Design-led development explorează cum minimizezi handoff-ul prin colaborare continuă.
I
Sistem de icoane
Un set coordonat de icoane care împărtășesc dimensiune, grosime a conturului, stil și convenții de metaforă consistente. Un sistem de icoane include de obicei un grid standard (24x24 pixeli e comun), convenții de naming și ghiduri de utilizare. Icoanele sunt distribuite de obicei ca SVG-uri sau un icon font.
L
Layout
Aranjamentul spațial al componentelor pe un ecran. Preocupările de layout includ alinierea la grid, spațierea între secțiuni, comportamentul responsiv și fluxul conținutului. Design systems definesc primitive de layout — stack, grid, cluster, sidebar — care gestionează aranjamentele comune.
M
Mode (mod)
O variație a unui set de design tokens care se aplică pe întreg sistemul — cel mai frecvent light mode și dark mode. Modurile schimbă valorile token-urilor semantice menținând numele token-urilor identice, permițând componentelor să se adapteze fără schimbări de cod. Unele sisteme definesc și moduri pentru contrast ridicat, teme de brand sau setări de densitate.
Multi-brand theming
Capacitatea de a aplica identități de brand diferite aceluiași set de componente prin schimbarea valorilor token-urilor. Multi-brand theming e esențial pentru organizațiile care operează mai multe produse sau branduri de pe o bibliotecă comună de componente. Structura componentei rămâne constantă; doar token-urile se schimbă.
N
Convenție de naming
Regulile standardizate pentru numirea token-urilor, componentelor, variantelor și fișierelor. Naming-ul consistent reduce confuzia, permite automatizarea și face sistemul ușor de căutat. Pattern-uri comune includ kebab-case pentru tokeni (color-action-primary) și PascalCase pentru componente (PrimaryButton).
P
Pattern
O soluție reutilizabilă la o problemă comună de design care implică mai multe componente lucrând împreună. Pattern-urile sunt la un nivel mai înalt decât componentele — un flux de login, un tabel de date cu paginare sau un layout de pagină de setări sunt pattern-uri. Documentează cum se combină componentele pentru a rezolva nevoi specifice ale utilizatorilor.
Primitiv
Cel mai basic bloc de construcție dintr-un design system — fie un token primitiv (valoare brută), fie o componentă primitivă (element de bază ca un buton sau text input). Primitivele sunt compuse în structuri din ce în ce mai complexe.
S
Token semantic
Un design token care codifică semnificație mai degrabă decât o valoare brută. Exemplu: color-text-primary se mapează pe un token de bază precum gray-900 în light mode și gray-100 în dark mode. Token-urile semantice sunt stratul care permite theming, moduri și adaptare contextuală.
Scală de spațiere
Un set predefinit de valori de spațiere folosite pentru padding, margin și gap în tot sistemul. Scalele de spațiere se bazează de obicei pe o unitate de bază (4px sau 8px) și urmează o progresie geometrică sau liniară: 4, 8, 12, 16, 24, 32, 48, 64. Spațierea consistentă creează ritm vizual și reduce deciziile arbitrare.
Storybook
Un instrument open-source pentru construirea, testarea și documentarea componentelor UI în izolare. Storybook randează fiecare componentă cu variantele și stările sale, servește ca documentație vie și permite testare vizuală de regresie. E cel mai adoptat instrument pentru mediile de dezvoltare a design systems.
T
Temă
Un set coordonat de valori de token care definesc o identitate vizuală distinctă. O temă poate reprezenta un brand, un mod (light/dark) sau o variantă de produs. Temele se aplică global și cascadează prin fiecare componentă care referențiază token-uri semantice.
Arhitectura token-urilor
Organizarea structurală a design tokens pe straturi — de obicei niveluri primitiv, semantic și de componentă. Arhitectura token-urilor determină cum curg valorile de la definiții brute la semnificații contextuale la aplicații specifice componentelor. O arhitectură bine proiectată face theming-ul, modurile și scalarea directe.
Scală tipografică
Un set definit de dimensiuni de font, greutăți, line heights și valori de letter spacing care stabilesc ierarhia tipografică. Scalele tipografice includ de obicei cinci până la opt niveluri — de la caption-uri mici la heading-uri display mari — și sunt codificate ca design tokens pentru consistență cross-platformă.
V
Variantă
O variație predefinită a unei componente care servește un context sau caz de utilizare diferit, menținând aceeași structură de bază. Un buton poate avea variante pentru acțiuni primare, secundare, terțiare și destructive. Variantele sunt proiectate și documentate ca parte a specificației componentei, nu ca personalizări ad-hoc.
Version control (controlul versiunilor)
Practica de urmărire și gestionare a schimbărilor în codul și asset-urile design system-ului în timp. Design systems folosesc semantic versioning (major.minor.patch) pentru a comunica natura schimbărilor: versiunile majore conțin breaking changes, versiunile minore adaugă funcționalități, iar versiunile patch corectează bug-uri. Versionarea permite consumatorilor să facă upgrade în propriul ritm.
Pentru terminologie UX dincolo de design systems, vezi glosarul UX de la A la Z. Salvează-l și trimite-l colegilor care sunt noi în practică. Termenii se vor schimba, dar fundamentele rămân.
Întrebări Frecvente
Ce sunt design tokens?
Design tokens sunt variabile cu nume, agnostice de platformă, care codifică decizii de design precum culori, spațiere și tipografie. Ele fac punte între intenția de design și implementarea de engineering pe toate platformele.
Ce este atomic design?
Atomic design este o metodologie de Brad Frost care structurează componentele UI pe cinci niveluri ierarhice: atomi, molecule, organisme, template-uri și pagini. Oferă un model mental pentru construirea sistemelor din piese mici și componabile.
Ce este un token semantic?
Un token semantic codifică semnificație, nu o valoare brută. De exemplu, color-text-primary se mapează pe gray-900 în light mode și gray-100 în dark mode, permițând adaptare contextuală fără schimbări de cod.
De ce este importantă guvernanța într-un Design System?
Guvernanța definește ownership-ul, autoritatea decizională, cadența review-urilor și politicile de depreciere. Fără ea, un Design System devine incoerent și iese din sincronizare cu produsul în câteva luni.