Mogu li dizajneri i inženjeri koristiti jedinstveni izvor istine? 2. dio.

Sada kada ste razumjeli stalni napredak između dizajnera i programera (pročitajte prvi dio ovog članka ovdje), porazgovarajmo o tome kako to popraviti.

Sustavi dizajna i jedinstveni izvor istine (2. dio od 2.)

Proteklih 10 godina donijelo je mnogo zrelosti u svijet web tehnologija. CSS je postao iznimno moćan i narastao je u alate koji omogućavaju predvidljive i održive tijekove rada (od pretprocesora do modula i modnih dodataka). JavaScript je postao standard razvoja za razne platforme. Dodao je značajke koje povećavaju čitljivost (karte, funkcije strelica ...) i modularnost koda (ES6 moduli). Dobila je čak i nevjerojatne alate koji su ekosustav doveli na višu razinu (NPM, Webpack, React.js).

Oboje, napredak u CSS-u i JavaScript-u, dovelo je do brzo rastuće popularnosti modularne arhitekture web aplikacija. Kao posljedica toga, dovela je i do drastične popularnosti dizajnerskih sustava. Potreba za dizajnerskim sustavima potječe od kaosa, skupog održavanja i nedosljednih iskustava s početka interneta. Brz rast popularnosti dizajnerskih sustava postao je moguć zahvaljujući napretku web tehnologija.

Sustavi dizajna nudili su mnoga obećanja:

  • Objedinjavanje izvora istine
  • Predvidivost tijeka razvoja proizvoda
  • Povećanje kvalitete korisničkog iskustva
  • Smanjenje troškova održavanja

Poput revolucije radnog tijeka koju je pokrenuo Toyotin proizvodni sustav, dizajnerski sustavi nudili su ublažavanje boli modernog razvoja proizvoda zahvaljujući sistematizaciji procesa.

Još je prerano za prosudbu cjelokupnog učinka procvata dizajnerskog sustava. Međutim, postaje sve očiglednije da je trenutna generacija dizajnerskih sustava sjajna u sistematizaciji sučelja i samo polu-uspješna u popravljanju prekida između dizajna i inženjerstva.

Uzmimo za primjer dizajnerske tokene koji su temeljni dio mnogih sjajnih dizajnerskih sustava. Pomoću njih se mogu generirati složeni setovi listova stilova i palete boja za alate za dizajn, ali interaktivne komponente bitne za svaki dizajnerski sustav ostat će nepovezane s dizajnerskim alatima.

Malo pokušaja premošćivanja tog jaza nije dobilo masovnu popularnost niti značajnu privlačnost. Najbolji među njima, HTML Sketchapp, nudi uvoz HTML elemenata u Sketch. Nažalost, na putu su izgubljena sva stanja i interakcije. Skica, na kraju alat za vektorsku ilustraciju, ne nudi stanja ili interakcije na razini komponente.

Nemojte kriviti sustave dizajna za taj nedostatak. Kriviti alate za dizajn. Sve dok dizajnerski alati implementiraju vektorski format na dizajnere korisničkog sučelja, implementacija jedinstvenog izvora istine ostat će nemoguća.

Pitanje jedinstvenog izvora istine zvuči teoretski, ali razmislite o praktičnim implikacijama.

Što ako dizajneri mogu upotrijebiti iste komponente koje koriste inženjeri i sve su one pohranjene u zajedničkom dizajnerskom sustavu (s točnom dokumentacijom i testovima)? Mnogi od frustrirajućih i skupih nesporazuma između dizajnera i inženjera prestali bi se događati.

Ponovno pročitajte priču o dva sukobljena odabirača datuma iz prvog dijela ovog članka. Ako je dizajner imao pristup interaktivnoj komponenti sinkroniziranoj s proizvodnom bazom podataka, mogla je donijeti informiranu dizajnersku odluku o iskustvu odabira podataka i ponovne uporabe postojeće komponente. Cijeli sukob će se raspasti, što bi rezultiralo bržim procesom dizajniranja, bržim procesom razvoja i manje frustrirajućim iskustvom za cijeli tim.

Oslanjanje na ručno precrtavanje proizvodno šifriranih komponenata u alatu za ilustraciju vektora nije samo skupo, već je i sklono kritičnim pogreškama.

U savršenoj primjeni sustava dizajna, dizajneri i inženjeri koriste jedinstveni izvor istine kako bi pokrili sve aspekte tijeka rada. Nakon što dizajneri odbace svoje stare alate za vektorsku ilustraciju (neizbježno gube sve probleme povezane sa starom paradigmom), ova razina integracije i zrelosti procesa postat će moguća.

Jedinstveni dizajn - inženjerska suradnja s UXPin Merge

Na UXPin-u smo proveli posljednjih 8 godina izrađujući kolaborativni uređivač dizajna temeljen na kodu. Preciznim prikazom, izvanrednim komponentama, naprednim interakcijama na razini komponente (uvjetne interakcije, varijable, integracija API-ja ...) uspjeli smo izbjeći mnoge nedostatke alata za ilustraciju vektora poput Sketch, Figma ili XD. Umjesto da se oslanjaju na stotine statičkih ploča s umjetničkim pločama, UXPin omogućava dizajnerima da izrade potpuno interaktivne komponente koje se mogu ponovo upotrebljavati. Dizajniranje obrazaca s potpunom validacijom postaje lako čak i za dizajnere koji se ne kodiraju.

Kad god dizajner stvori bilo šta na UXPin-u, naš mehanizam za renderiranje gradi HTML CSS i JavaScript (za sve napredne interakcije). Dakle, dizajneri i inženjeri mogu biti sigurni da će postojati 100% podudaranje dizajna stvorenog u UXPin i konačne proizvodnje. Nesporazumi u vezi s animacijama ili ispisivanjem fonta spomenutih u prvom članku ne postoje u svemiru UXPin.

Nismo riješili sve probleme odjednom. Čak je i naš uređivač temeljen na kodu, koji je po svim brojevima najjači na širokom tržištu alata za dizajn, pao u problem objedinjavanja izvora istine. Naš je alat pomogao dizajnerima da izbjegnu mnoge nesporazume, ali nismo imali način da izgradimo trajnu vezu s kodiranim komponentama koje postoje u dizajnerskom sustavu. Nismo ga imali ... do sada.

Prije gotovo dvije godine počeli smo raditi na izgradnji trajne veze između dizajna i inženjerstva. Nakon istraživanja više ideja odlučili smo slijediti sljedeći tijek rada:

  • UXPin se povezuje u Git spremište (alat naredbenog retka instalira se kao ovisnost o razini projekta)
  • UXPin uči o kodu komponenti pohranjenih u skladištu i serializira njegov sadržaj
  • UXPin pokreće postupak izrade i isporučuje proizvodni kod UXPin uređivaču dizajna, gdje su sve komponente identične proizvodnom okruženju, potpuno interaktivne i dostupne dizajnerima (čak i ako ne znaju kodirati)
  • UXPin omogućava povezivanje s poslužiteljem za kontinuiranu integraciju radi omogućavanja automatske sinkronizacije između spremišta Gita i našeg uređivača dizajna (svaka promjena proizvodnog koda automatski se odražava na komponente u uređivaču dizajna UXPin)
  • UXPin pokazuje točne specifikacije za sve dizajnerske projekte koji će pokazati informativne isječke koda kako bi programerima rekli kako implementirati zadani dizajn

Ovaj je pristup bio vrlo ambiciozan i mnogo širi po svom djelokrugu od bilo kojeg konkurentnog rješenja. Od početka smo željeli izbjeći:

  • Stvaranje gimmick značajki sposobno steći određenu pažnju na tržištu, ali ne uspijeva riješiti ključne probleme dizajnersko-inženjerskog tijeka rada
  • Prisiljavanje dizajnera da nauče kodirati (što karakterizira pristup koji je preuzeo Framer)
  • Prisiljavanje timova koji implementiraju naše rješenje za radni tijek stvaraju kod upravo za UXPin (umjesto toga vjerovali smo u plug and play pristup, gdje UMPin može konzumirati nemodificirani proizvodni kod).

Trebalo nam je više od 18 mjeseci, ali drago mi je što mogu reći da je UXPin Merge upravo isporučio rješenje koje uistinu objedinjuje dizajn i inženjering u jedan kontinuirani tijek rada.

Spajanje se neprimjetno povezuje s bilo kojim GIT spremištem, uvozi React.js (podrška više knjižnica i okvira u budućnosti!) Komponente u uređivač dizajna UXPin i drži sve verzije sinkronizirane zahvaljujući CI integraciji. Što god postoji kod, postoji u UXPin-u koji dizajnerima omogućuje pristup stvarnim kodiranim komponentama bez prisiljavanja na učenje kodiranja.

Uz integraciju CI UXPin Merge vodi računa o sinkronizaciji alata Code - Design.

Uz UXPin Merge, dizajneri i inženjeri koriste jedinstveni izvor istine i napokon mogu zajedno raditi bez nepotrebnih nesporazuma i frustracija. Pogodi što? Moguća je savršena implementacija sustava dizajna.

Dizajneri su odmah dostupni složeni dijelovi poput birača datuma.

UXPin Spajanje trenutno je u zatvorenoj beta verziji. U nastavku se prijavite za rani pristup. Našim kupcima i najstrasnijim vjernicima u objedinjeni tijek rada (ako ste to vi, javite nam vaše misli na Twitteru!) Prvo će se ponuditi pristup. Vidimo se na drugoj strani.

Pristupite ranom pristupu spajanju s UXPin-om