Od Figme do koda: Naš dizajn-do-razvoj radni tok
Kako premošćujemo jaz između dizajna i razvoja bez noćnih mora pixel-perfect predaje. Spojler: radi se o sistemima, ne o screenshot-ovima.
Predaja dizajna razvoju je tačka gde mnogi veb projekti propadaju. Dizajner zamisli jedno, programer protumači drugo, a klijent na kraju bude razočaran. U IT Family smo usavršili naš radni tok da minimizujemo ovaj jaz.
Dizajn sistemi, ne stranice
Ne dizajniramo pojedinačne stranice, dizajniramo sisteme komponenti. U Figmi gradimo biblioteku višekratno upotrebljivih komponenti (dugmadi, kartica, formulara, navigacionih šablona) sa definisanim varijantama, tokenima za razmake i varijablama boja. Kada dođe vrijeme za razvoj, prevodimo ove komponente direktno u kod komponente.
Ovaj pristup znači da kod preslikava strukturu dizajna. Figma komponenta nazvana "Card / Case Study / Default" postaje React komponenta nazvana CaseCard. Mentalni model ostaje konzistentan između dizajna i razvoja.
Responsivno od samog početka
Svaka komponenta se dizajnira na minimum tri prelomne tačke: desktop (1440px), tablet (768px) i mobilni (375px). Ne dizajniramo prvo desktop pa onda naknadno rješavamo mobilni. Responsivno ponašanje se odlučuje u fazi dizajna tako da nema iznenađenja tokom razvoja.
Predaja
Koristimo Figmin inspect panel i dev mod za tačne mjere, ali ne opsjedamo se pixel-perfect replikacijom. Umjesto toga, fokusiramo se na namjeru: šta ova komponenta treba da komunicira? Kako treba da se osjeća? Koji je obrazac interakcije?
Tipografske skale, odnosi razmaka i tokeni boja su važniji od tačnih pixel vrijednosti. Dugme sa 14px padding-om koje izgleda dobro na svakom viewport-u je bolje od dugmeta sa tačno 16px koje se lomi na nekim ekranima.
Gdje AI pomaže
Koristimo AI alate sa Figminim dizajn kontekstom da ubrzamo prevođenje dizajna u kod. AI razumije vizuelnu strukturu i generiše početni markup i stilove komponente. Zatim dorađujemo izlaz da odgovara tačnoj namjeri dizajna. Ovo skraćuje početno vrijeme implementacije otprilike na pola.
Rezultat: dizajni koji se vjerno prevode u kod, responsivno ponašanje koje radi svuda i proces razvoja koji poštuje i viziju dizajnera i tehničke ograničenja programera.
