Disciplina
Sistem koji vaš tim zaista koristi.
Tokeni, komponente i dokumentacija oko njih — napravljeni tako da svaki sledeći ekran nastaje brže od prethodnog i da doslednost nadživi one koji su je uspostavili.
Zašto sistem
Doslednost je inženjerski problem.
Vodič kroz stil opisuje nameru. Sistem obavezuje tim da je se drži.
Većini timova ne nedostaje ukus, nego zajedničko mesto na koje se odlažu odluke. Bez njega se na svakom novom ekranu iznova raspravlja o razmacima, boji i stanjima, a odgovor svaki put odluta malo dalje. Posle šest meseci niko ne ume da kaže koja je od četiri sive nijanse prava, jer su sve četiri u produkciji.
Dizajn sistem te odluke jednom prebacuje u kod: imenovani tokeni za boju, tipografiju, prostor i pokret, komponente koje nose stanja kakva stvarni interfejs traži i dokumentacija koja objašnjava nameru, a ne samo API. Dizajneri i inženjeri onda raspravljaju o proizvodu, a ne o marginama.
Pravimo sisteme dovoljno male da se drže u glavi i dovoljno stroge da ih vredi poštovati. Ako se pravilo ne može objasniti jednom rečenicom, obično i ne treba da bude pravilo — a komponenta koja postoji samo u biblioteci je teret, a ne imovina.
Šta dobijate
Šta obuhvata rad na sistemu.
Istih osam delova svaki put, odmerenih prema proizvodu, a ne prema ambiciji.
Skup tokena
Boja, tipografija, prostor, radijus, senka i pokret kao imenovane vrednosti u jednom izvoru, izvezene za alat za dizajn i za kod.
Svetla i tamna tema
Obe teme izvedene iz istih tokena i proverene prema zahtevima kontrasta, a ne odokativno.
Biblioteka komponenti
Komponente koje vaš proizvod stvarno koristi, sa svim stanjima: učitavanje, prazno, greška, onemogućeno, fokus.
Pristupačnost u komponenti
Kretanje tastaturom, redosled fokusa, kontrast i smanjeni pokret rešeni su jednom, unutar komponente, umesto da ih rešava svako ko je koristi.
Figma biblioteka usklađena sa kodom
Jedna biblioteka i jedan skup naziva, tako da komponenta u fajlu i komponenta u kodu znače istu stvar.
Dokumentacija o upotrebi
Pisano uputstvo kada komponentu treba koristiti, kada ne treba i šta raditi kada ništa u sistemu ne odgovara.
Pravila doprinosa
Kako promena ulazi u sistem, ko je pregleda i kako se verzionišu i najavljuju izmene koje narušavaju kompatibilnost.
Plan usvajanja
Redosled migracije za ekrane koje već imate, postavljen tako da prve nedelje pokažu vidljiv napredak.
Proces
Kako se sistem gradi i usvaja.
Pet faza, svaka se završava nečim što vaš tim može da otvori, pokrene ili pročita.
Popis
Popisujemo interfejs koji već imate — svako dugme, svaku nijansu, svaku vrednost razmaka — i pokazujemo koliko varijanti je zaista u produkciji.
Definisanje
Prvo dolaze tokeni i imenovanje. Imena su najteži deo i deo koji sve ostalo nasleđuje, pa ih rešavamo pre nego što se bilo šta nacrta dvaput.
Izrada
Komponente pišemo prema stvarnim ekranima iz vašeg proizvoda, a ne prema demo stranici, pa se nezgodni slučajevi pojave dok su još jeftini.
Dokumentovanje
Uz svaku komponentu idu njena namena, stanja i ograničenja. Čemu komponenta ne služi jednako je korisno kao i čemu služi.
Usvajanje
Prve ekrane migriramo zajedno sa vašim timom, a zatim predajemo proces doprinosa da bi sistem nastavio da živi i bez nas.
Prikaz
Komponenta od tokena do produkcije.
Snimak ekrana — biće dodat kada prvi prikaz sistema bude odobren za objavu.
Detaljnije
Četiri dela koja moraju da se slažu.
Tokeni, komponente, dokumentacija i usvajanje nisu četiri isporuke u nizu; to je jedna stvar viđena sa četiri strane. Token koji niko ne koristi je samo promenljiva. Komponenta bez dokumentacije je nagađanje. Dokumentacija bez usvajanja je stranica na vikiju.
Zato ih gradimo zajedno i proveravamo na isti način: uzmemo pravi ekran iz vašeg proizvoda i pred vašim timom ga sastavimo iznova, iz sistema.
- Tokeni svaku odluku imenuju jednom.
- Komponente nose stanja, a ne onaj ko ih poziva.
- Dokumentacija objašnjava nameru, ne samo listu svojstava.
- Usvajanje se meri migriranim ekranima.
Alati
Čime gradimo sisteme.
- Figma
- Tokens Studio
- Style Dictionary
- W3C Design Tokens
- React
- TypeScript
- Storybook
- Radix UI
- Tailwind CSS
- Chromatic
- Playwright
- axe
Biramo ih prema timu, a ne po pravilu kuće — sistem koji se sukobljava s vašim alatima niko neće usvojiti.
Studije slučaja iznad su ilustrativni primeri, a ne stvaran rad za klijente, a svaka slika na ovoj strani je privremeni okvir.Pogledajte kako predstavljamo stvaran rad
Pitanja
Šta timovi prvo pitaju.
Četiri pitanja koja se ponove u gotovo svakom razgovoru o sistemu.
Da li je naš proizvod dovoljno veliki za dizajn sistem?
Ako više od jedne osobe dizajnira ili gradi ekrane, onda jeste — ali se prava veličina veoma razlikuje. Timu od dvoje ljudi obično trebaju tokeni i desetak komponenti, a ne platforma.
Obim svodimo na najmanji sistem koji uklanja rasprave koje zaista vodite, a kažemo otvoreno i kada je iskren odgovor da bi vodič kroz stil bio dovoljan.
Već imamo biblioteku komponenti. Možete li da radite sa njom?
Obično možemo. Popišemo šta postoji, zadržimo ono što zaslužuje svoje mesto i tamo gde je struktura zdrava radije preimenujemo nego što gradimo iznova.
Pisanje od nule je poslednja opcija. Ako je zaista opravdano, reći ćemo to pre nego što iko planira budžet i objasniti šta se time dobija.
Ko održava sistem posle primopredaje?
Vaš tim, uz pisani proces doprinosa: kako se promena predlaže, ko je pregleda i kako se verzionišu i najavljuju izmene koje narušavaju kompatibilnost.
Možemo ostati uz vas jedan ciklus pregleda, dok stižu prvi doprinosi, da bi proces bio proveren pre nego što se povučemo.
Da li dizajneri i inženjeri dobijaju isti sistem?
U tome je cela poenta. Jedan skup naziva, jedna Figma biblioteka i jedan paket u kodu, objavljeni zajedno.
Kada se to dvoje razmimoiđe, u sistem se više nema poverenja i ljudi se tiho vrate kopiranju ekrana.
Sledeći korak
Donesite ekran koji stalno pravite iznova.
Pošaljite link ka proizvodu ili nekoliko snimaka ekrana. Reći ćemo šta bi sistem zaista promenio, gde se ne bi isplatio i šta bi obuhvatile prve dve nedelje.