Pot proiectanții și inginerii să folosească o sursă unică de adevăr? Partea 2.

După ce ați înțeles încurcarea constantă dintre designeri și dezvoltatori (citiți partea unu a acestui articol aici), să vorbim despre cum să remediați acest lucru.

Sisteme de proiectare și o sursă unică de adevăr (partea 2 din 2)

Ultimii 10 ani au adus multă maturitate în lumea tehnologiilor web. CSS a devenit extrem de puternic și a crescut în instrumente care au permis fluxuri de lucru previzibile și durabile (de la preprocesoare la module și linters de stil). JavaScript a devenit standardul de dezvoltare pentru o varietate de platforme. Acesta a adăugat caracteristici din ce în ce mai mari de lizibilitate (hărți, funcții de săgeată ...) și modularitatea codului (modulele ES6). A obținut chiar instrumente uimitoare care au adus ecosistemul la nivelul următor (NPM, Webpack, React.js).

Ambele, progresele în CSS și JavaScript, au dus la o popularitate în creștere rapidă a unei arhitecturi modulare a aplicațiilor web. În consecință, a dus și la o popularitate drastică a sistemelor de proiectare. Nevoia de sisteme de proiectare a provenit din haosul, întreținerea costisitoare și experiențele inconsistente ale web-ului timpuriu. Creșterea rapidă a popularității sistemelor de proiectare a devenit posibilă datorită progresului tehnologiilor web.

Sistemele de proiectare au oferit multe promisiuni:

  • Unificarea surselor de adevăr
  • Prezicibilitatea fluxului de lucru pentru dezvoltarea produsului
  • Creșterea calității experienței utilizatorului
  • Scăderea costului de întreținere

Ca o revoluție a fluxului de lucru începută de Toyota Production System, sistemele de proiectare au oferit atenuarea durerilor dezvoltării moderne a produselor, datorită unei sistematizări a proceselor.

Este încă prea devreme pentru a evalua efectul general al dezvoltării sistemului de proiectare. Cu toate acestea, devine din ce în ce mai evident că generația actuală de sisteme de proiectare este excelentă pentru sistematizarea ingineriei frontend și doar semi-reușită la remedierea deconectării dintre proiectare și inginerie.

Luăm, de exemplu, jetoane de design, care sunt o parte fundamentală a multor sisteme de proiectare grozave. Acestea pot fi utilizate pentru a genera seturi complexe de foi de stil și palete de culori pentru instrumentele de proiectare, însă componentele interactive esențiale pentru orice sistem de proiectare vor rămâne deconectate de la instrumentele de proiectare.

Puține încercări de a reduce acest decalaj nu au obținut nici popularitate în masă și nici tracțiune semnificativă. Cel mai bun dintre ei, HTML Sketchapp, oferă un import de elemente HTML către Sketch. Din păcate, toate stările și interacțiunile se pierd pe drum. Schița, în cele din urmă un instrument de ilustrare vectorială, nu oferă stări sau interacțiuni la nivel de componentă.

Nu acuzați sistemele de proiectare pentru acest neajuns. Instrumente de proiectare blame. Atâta timp cât instrumentele de proiectare aplică formatul vectorial pe designerii interfeței utilizatorului, implementarea unei singure surse de adevăr va rămâne imposibilă.

Problema unei singure surse de adevăr sună teoretic, dar gândiți-vă la implicațiile practice.

Ce se întâmplă dacă proiectanții ar putea folosi aceleași componente folosite de ingineri și sunt toate stocate într-un sistem de proiectare comun (cu documentație și teste precise)? Multe dintre neînțelegerile frustrante și costisitoare dintre proiectanți și ingineri ar înceta să se întâmple.

Revizuiți povestea a doi selecționatori de date în conflict din prima parte a acestui articol. Dacă proiectantul ar avea acces la o componentă interactivă sincronizată cu baza de date de producție, ea ar putea lua o decizie de proiectare în cunoștință de cauză despre experiența selectării datelor și reutilizării unei componente existente. Întregul conflict s-ar dizolva, rezultând un proces de proiectare mai rapid, un proces de dezvoltare mai rapid și o experiență mai puțin frustrantă pentru întreaga echipă.

Bazându-se pe redescrierea manuală a componentelor codate de producție într-un instrument de ilustrare vectorială nu este doar scump, dar este, de asemenea, predispus la erori critice.

În implementarea perfectă a unui sistem de proiectare, proiectanții și inginerii folosesc o singură sursă de adevăr pentru a acoperi toate fațetele fluxului de lucru. Odată ce designerii își abandonează vechile instrumente de ilustrare vectorială (pierzând inevitabil toate problemele legate de această veche paradigmă), acest nivel de integrare și maturitate a procesului va deveni posibil.

Unified Design - Colaborare inginerească cu UXPin Merge

La UXPin, am petrecut ultimii 8 ani construind un editor de design colaborativ bazat pe coduri. Cu o redare precisă, componente statice, interacțiuni avansate la nivel de componentă (interacțiuni condiționate, variabile, integrare API ...), am reușit să evităm multe dintre deficiențele instrumentelor de ilustrare vectorială precum Sketch, Figma sau XD. În loc să se bazeze pe sute de plăci de artă statice, UXPin le permite proiectanților să creeze componente de stat complet interactive și reutilizabile. Proiectarea formularelor cu validare completă devine ușoară chiar și pentru designerii care nu codează.

Ori de câte ori un proiectant creează ceva în UXPin, motorul nostru de redare creează HTML CSS și JavaScript (pentru toate interacțiunile avansate). Deci proiectanții și inginerii pot fi siguri că nu va exista o potrivire de 100% între proiectele create în UXPin și implementarea finală a producției. Neînțelegerile privind animațiile sau redarea de fonturi menționate în primul articol nu există în universul UXPin.

Nu am rezolvat toate problemele dintr-o dată. Chiar și editorul nostru bazat pe coduri, care, cu toate acestea, pare a fi cel mai puternic de pe piața largă a instrumentelor de proiectare, a căzut într-o problemă a unificării surselor adevărului. Instrumentul nostru i-a ajutat pe designeri să evite multe neînțelegeri, dar nu am avut o modalitate de a construi o conexiune durabilă cu componente codificate existente într-un sistem de proiectare. Nu am avut-o ... până acum.

În urmă cu aproape 2 ani, am început să lucrăm la construirea unei conexiuni de durată între proiectare și inginerie. După ce am explorat mai multe idei, am decis să urmăm următorul flux de lucru:

  • UXPin se conectează la un depozit Git (instrumentul de linie de comandă este instalat ca dependență de nivel de proiect)
  • UXPin află despre codul componentelor stocate în depozit și serializează conținutul acestuia
  • UXPin rulează procesul de construire și livrează codul de producție editorului de design UXPin, unde toate componentele sunt identice cu mediul de producție, complet interactiv și disponibil pentru designeri (chiar dacă nu știu să codeze)
  • UXPin permite conectarea la un server de integrare continuă pentru a permite sincronizarea automată între un depozit Git și editorul nostru de proiectare (fiecare modificare a codului de producție se reflectă automat în componentele din editorul de design al UXPin)
  • UXPin prezintă specificații exacte pentru toate proiectele de proiectare care vor arăta fragmente de cod informativ pentru a spune dezvoltatorilor cum să implementeze un proiect dat

Această abordare a fost extrem de ambițioasă și mult mai largă în domeniul său de aplicare decât orice soluție competitivă. Din start am vrut să evităm:

  • Crearea unei caracteristici gimmick capabile să câștige o anumită atenție pe piață, însă nu reușesc să remedieze problemele cheie ale proiectului - fluxului de lucru
  • Obligarea proiectanților să învețe să codeze (ceea ce caracterizează abordarea adoptată de Framer)
  • Forțând echipele care implementează soluția noastră de flux de lucru să creeze cod doar pentru UXPin (în schimb am crezut într-o abordare plug and play, unde codul de producție nemodificat poate fi consumat de UXPin).

Ne-a luat peste 18 luni, dar sunt fericit să spun că UXPin Merge tocmai a furnizat o soluție care unifică cu adevărat designul și ingineria într-un singur flux de lucru continuu.

Fuziunea se conectează perfect la orice depozit GIT, importă React.js (suport pentru mai multe biblioteci și cadre pe viitor!) În editorul de design al UXPin și păstrează toate versiunile în sincronizare datorită integrării CI. Orice există în cod, există în UXPin, oferind designerilor acces la componente codificate reale, fără a-i obliga să învețe codarea.

Odată cu integrarea CI, UXPin Merge are grijă de Codul - Sincronizarea instrumentelor de proiectare.

Cu UXPin Merge, designerii și inginerii folosesc o singură sursă de adevăr și pot lucra în sfârșit împreună fără neînțelegeri și frustrări inutile. Ghici ce? Implementarea perfectă a unui sistem de proiectare este posibilă.

Componentele complexe, cum ar fi selecționatoarele de date, sunt disponibile imediat proiectanților.

UXPin Merge este în prezent într-o versiune beta închisă. Înscrieți-vă pentru acces rapid. Clienții noștri și cei mai pasionați credincioși într-un flux de lucru unificat (dacă sunteți voi, anunțați-vă gândurile pe Twitter!) Vor primi mai întâi acces. Ne vedem pe partea cealaltă.

Obțineți acces timpuriu la UXPin Merge