„Tako dizajn sistemi umiru: ne ukinuti, samo obiđeni.“
Jedan dizajn sistem, trideset brendova, i aplikacija koja se više nije mogla instalirati
Sto komponenti koje nose više od trideset bijelih labela — i tri godine kasnije, isti klijent nas je zvao da spasimo njihovu Android aplikaciju.
Klijent prodaje softver koji fotografiju tlocrta pretvara u procjenu troška i fazni plan radova — i prodaje ga pod brendovima drugih firmi.
Njihov centralni dizajn sistem izgradili smo u dva mjeseca, snagom jednog inženjera. Tri godine kasnije vratili su nas za nešto sasvim drugo: njihova Android aplikacija prestala je biti instalabilna na aktualnim uređajima.
To je jedini klijent u našem radu koji se vratio — i to na drugoj disciplini. To govori više od bilo koje komponente.
2022 · Problem
2025 · Ograničenje
Šta smo uradili
Dizajn sistem, 2022, jedan inženjer
Dizajn tokeni izvezeni iz Figme u JSON i generisani u SCSS, sa oko sto komponenti nad njima, organizovanih po veličini, tipu i vrsti. Verzionisan, distribuiran kao paket, sa svojom dokumentacijom.
~100 komponenti u 2 mjesecaNijedna komponenta ne zna svoju boju
Samo ime tokena. Novi klijent je novi set vrijednosti, ne novi kod. To je cijeli razlog zašto je trideset labela održivo.
Novi brend bez novog kodaNamjerno neovisno o frameworku
Biblioteku koriste dva različita proizvoda; vezivanje za framework značilo bi da svaki potrošač izvan tog frameworka treba svoju implementaciju istog dizajna — što je upravo problem zbog kojeg dizajn sistem postoji.
Dva proizvoda, jedna bibliotekaTaksonomija na sto komponenti nije urednost
Bez dosljedne organizacije biblioteka te veličine postaje pretraga po imenima fajlova — developer ne nađe što mu treba u trideset sekundi, zaključi da ne postoji, i napiše svoj CSS. Tako dizajn sistemi umiru: ne ukinuti, samo obiđeni.
Trideset sekundi do komponenteAndroid spašavanje, 2025, tim od troje
Vratili smo aplikaciju da radi i na aktualnim i na starijim uređajima. Usklađivanje dozvola za kameru nakon izmjene politike trgovine, nadogradnja zavisnosti za pregled dokumenata, i posao pomjeren sa glavne niti.
Novi i stari uređaji
Tokeni izvezeni iz Figme u JSON i generisani u SCSS. Komponenta zna ime tokena, nikad vrijednost — pa je novi brend novi set vrijednosti, ne novi kod. Bez toga je sto komponenti kroz trideset labela tri hiljade varijanti koje niko ne održava.
Rezultat
- ~100 komponenti koje nose 30+ bijelih labela, izgrađeno snagom jednog inženjera u dva mjeseca
- Verzionisan paket sa dokumentacijom, koriste ga dva proizvoda
- Aplikacija koja je postala neinstalabilna, vraćena i na nove i na stare uređaje
- Isti klijent, nakon tri godine, na nepovezanoj disciplini
Šta bismo uradili drugačije
Dokumentacija je bila vlastita, a ne standardni alat, što ju je učinilo još jednom stvari za održavanje i još jednom stvari koju novi developer mora naučiti. Za biblioteku sa trideset brendova koji je koriste, izabrali bismo dosadnu standardnu opciju.
- JavaScript
- CSS
- SCSS
- design tokens
- Figma
- npm
- Android