Jedan izvor istine, ne šest Figma fajlova.
Poznata situacija: tri malo drugačija dugmeta, dve nijanse iste plave, skala razmaka koja je zapravo ono što je delovalo u redu u dva ujutru. Dizajn sistem to rešava — ne gomilanjem pravila radi pravila, nego time što svima, dizajnerima i developerima, daje jedno mesto za proveru umesto nagađanja.
Ovo gradim prvo kroz tokene — boja, razmak, tipografija, animacija, definisani jednom i korišćeni svuda, tako da rebrend ili tamni režim ne postane projekat od šest nedelja koji dira četiri stotine fajlova.
Deo koji većina sistema preskoči jeste dokumentovanje graničnih slučajeva — šta se dešava kad je tekst dugmeta predugačak, kako izgleda prazno stanje, kako se komponenta ponaša na sporoj vezi. Tu se obično najviše vremena uštedi.
- Produkt timove01
- Startape u rastu02
- Firme sa više proizvoda03
- Figma
- Design tokens
- HTML & CSS
- JavaScript
Napravljen da se
zaista koristi.
-
01
Analiza
Prođem kroz postojeći proizvod i popišem šta već postoji — svako dugme, svaku vrednost razmaka, svaku nedoslednost. Iznenadili biste se koliko se samo time raščisti.
-
02
Temelji
Boja, tipografija, razmak i animacija, definisani kao tokeni umesto tvrdo ukucanih vrednosti, tako da promena jedne stvari ne znači pretragu kroz svaki fajl.
-
03
Biblioteka komponenti
Izrađena u Figmi sa pravim varijantama i stanjima — ne samo idealnim scenarijem. Dugmad, forme, kartice, navigacija, dokumentovano dovoljno dobro da ih novi dizajner može koristiti bez pitanja.
-
04
Predaja koda
Tokeni i komponente isporučeni u formatu koji vaši developeri stvarno mogu koristiti, sa imenovanjem koje se poklapa između Figme i koda.
-
05
Usvajanje
Sistem koji niko ne koristi je samo dokumentacija. Pobrinem se da se prvih nekoliko pravih ekrana napravi njime, da dokaže sebe umesto da leži u fioci.
Imate projekat
koji već neko vreme leži?
Hajde da popričamo.
Najbolji projekti kreću rano — i kada još nisu do kraja definisani. Pošaljite mi ono što imate i u roku od jednog dana dobićete iskreno mišljenje, a ako se poklopimo — i mali plan za nastavak.
Pošalji mi opis projekta