Design system
Un curs despre cum transformi un set de machete într-un sistem: tokenuri, scări, componente și reguli pe care le pot folosi și alții. Construim un sistem pentru un produs real — de la auditul ecranelor existente până la documentație și versionare.
Ce vei putea face
8 module, un singur proiect
01 De ce ai nevoie de un sistem și când nu ai2 lecții · 1 h 40 minDeschis
Analizăm ce probleme rezolvă un design system și în ce proiecte doar încurcă. Stabilim scara viitorului sistem și granițele lui: ce intră în el și ce rămâne o soluție punctuală.
02 Auditul machetelor existente3 lecții · 2 h 04 min
Adunăm toate ecranele produsului și le descompunem în elemente care se repetă. Notăm diferențele de culori, fonturi și spațieri și decidem ce unim și ce eliminăm.
03 Tokenuri: baza sistemului3 lecții · 2 h 09 min
Trei niveluri de tokenuri — primitive, semantice și valori de componentă. Analizăm denumirea, structura fișierului și transformăm spațierile, colțurile rotunjite și umbrele în scări clare.
04 Scara tipografică2 lecții · 1 h 35 min
Construim scara dimensiunilor de text, a interlinierii și a greutăților. O transformăm într-un set de stiluri de text în Figma și o verificăm pe ecrane reale, cu texte lungi.
05 Paletă de culori, teme și contrast3 lecții · 2 h 05 min
Construim paleta de bază cu trepte de nuanțe, legăm de ea tokenurile semantice și obținem tema deschisă și cea întunecată. Verificăm contrastul și corectăm perechile problematice.
06 Biblioteca de componente și stările lor3 lecții · 2 h 26 min
Construim componentele pe tokenuri și variante: de la butoane și câmpuri de introducere până la carduri și ferestre modale. Lucrăm setul complet de stări pentru fiecare element.
07 Compoziție și grile2 lecții · 1 h 26 min
Stabilim grilele și breakpoint-urile pentru diferite dimensiuni de ecran. Analizăm densitatea interfeței, ritmul vertical și regulile după care componentele se adună într-o machetă.
08 Documentație, predare și întreținere3 lecții · 2 h 35 min
Descriem componentele astfel încât sistemul să fie înțeles fără tine: scop, anatomie, stări și interdicții. Predăm sistemul echipei și configurăm versionarea și acceptarea modificărilor.
Ce primești
O structură gata de pagini Figma: primitive, tokenuri semantice, stiluri de text și componente-șablon — poți începe construcția imediat.
O listă de patruzeci de verificări pentru culori, fonturi, spațieri și stări — ajută să vezi rapid diferențele din ecranele existente.
O matrice gata a perechilor «text — fundal» pentru tema deschisă și cea întunecată, cu raportul calculat și combinațiile problematice marcate.
Structura descrierii: scop, anatomie, stări, reguli de folosire și interdicții — se completează în cincisprezece minute pentru fiecare componentă.
Primul modul este deschis în întregime
Urmărește lecțiile primului modul și prima temă. Dacă formatul nu ți se potrivește, nu ai pierdut nimic.