Îmbunătățirea decalajului dintre design și cod

„Design & Code” este o serie despre experimente de proiectare și inginerie, procese și învățări, aduse de tine de echipa AirSwap.

La AirSwap, avem o abordare asincronă și iterativă la dezvoltarea produsului. Cu toate acestea, una dintre primele provocări cu care ne-am confruntat a fost menținerea unei identități de produs consecvente prin iterații ale funcției, pe mai mulți proprietari de produse. În lucrul la versiunile anterioare ale AirSwap Token Trader și AirSwap Widget, am adunat rapid o mână de fișiere Sketch - fiecare fișier conținea un sac de simboluri și stiluri care reprezentau starea identității noastre de produs la acel moment. Deși acest lucru a funcționat la început, lipsa noastră de o sursă consolidată de adevăr a devenit rapid o mizerie de stiluri învechite din mai multe surse.

Cu mai multe fișiere și simboluri împrăștiate pe toate, a devenit o problemă care gestionează o identitate consecventă.

Fiecare experiență frontend la AirSwap este scrisă în React. La început, am avut un director de componente partajate, o bibliotecă de componente preliminare dacă doriți, cu stilurile potrivite care se potrivesc identității produsului. Cu toate acestea, pe măsură ce am iterat, identitatea noastră de produs sa schimbat. Componentele de design de referință pentru funcții mai noi au făcut mai dificilă identificarea dacă o anumită componentă a existat deja sau a fost necesară pentru a fi implementată. Am luat o decizie timpurie de a folosi componente stilate, ceea ce ne-a permis să repetăm ​​rapid și să construim funcții. Ușoritatea de utilizare care a venit cu componentele stilate a fost un câștig imens, dar ne-a permis, de asemenea, neintenționat să luăm unele decizii slabe în ceea ce privește extinderea stilurilor. Fără reguli stricte cu privire la modul de creare sau extindere a componentelor, baza noastră de coduri a devenit rapid acasă o mulțime de coduri duplicate, cu doar mici diferențe. Aceasta nu numai că a scăzut viteza dezvoltatorului și a crescut datoria tehnică, dar a introdus și inconsistență în identitatea noastră de produs.

Din cauza absenței unui sistem bine definit pe calculatoarele de proiectare, multe fișiere din baza noastră de coduri ar introduce noi componente care sunt similare cu cele existente sau ar face modificări minore ale componentelor existente.

În căutarea unei soluții la aceste probleme, recent am început să experimentăm cum să rezolvăm diferența dintre design și cod.

Tehnologie de design

Ideea tehnologiei de proiectare nu este nimic nou. Instrumente precum Craft și Invision există pentru a-i ajuta pe designeri să-și consolideze stilurile și să pună această informație către dezvoltatori. Aceasta permite mai multor părți interesate să lucreze la diferite caracteristici, menținând în același timp un set consolidat de componente de bază sau o bibliotecă de componente partajată. Totuși, ceea ce aveam nevoie a fost un mod de a nu doar să menținem paritatea între modele, ci să menținem egalitatea dintre componentele care constituie un design și ceea ce există în cod.

Cu aproximativ un an în urmă, echipa de tehnologie de proiectare de la Airbnb a lansat un proiect open source numit react-sketchapp, care a permis reactivarea componentelor în Sketch. Comunitatea React a răspuns favorabil, și destul de curând, componentele stilate au lansat o extensie a bibliotecii lor, stiled-components / primitives, cu suport pentru redarea multi-țintă (inclusiv redarea către Sketch). Aceste proiecte au devenit soluții tehnice fundamentale pentru problemele de inconsistență cu care ne confruntam.

Biblioteca de componente AirSwap

După un audit exhaustiv al widgetului AirSwap, am identificat și recreat în Sketch setul de componente care urmau să fie utilizate pentru toate caracteristicile prezente și viitoare. Ne-am luat apoi timpul pentru a recrea întreaga bibliotecă de componente în React, folosind componente fundamentale / primitive ca fundament. Componentele noastre au fost redate ca simboluri prin react-sketchapp, creând o singură sursă de adevăr pentru proiectele noastre.

Reacționează componentele redate la Sketch

Crearea bibliotecii de componente a devenit baza procesului nostru preliminar de proiectare end-to-end la AirSwap. Proiectele pentru componente au venit pe primul loc, urmate de implementare. Deoarece foloseam componente stilate și react-sketchapp, am putea returna codul implementat la Sketch pentru revizuire. După aprobare, componentele redate vor deveni noile proiecte, gata pentru revizuirea viitoare, dacă este necesar.

Versiuni multiple ale bibliotecii de componente, redate în Sketch și încărcate în Figma

Introduceți Figma

Acest ciclu elimină diferența dintre cod și design. Cu toate acestea, am descoperit rapid beneficiile suplimentare ale acestei soluții atunci când am început să facem majoritatea lucrărilor noastre de proiectare pe Figma. Deoarece instrumentele noastre de proiectare ne permit să creăm documente Sketch din biblioteca noastră de componente, încărcăm fiecare nouă revizuire la Figma. Comentariile și cererile de modificări pot fi făcute în mod interactiv la ultima revizuire, care oferă specificații pentru următoarea revizuire, care trebuie încărcate numai atunci când sunt adresate toate comentariile anterioare. Acest lucru nu este perfect perfect (totuși), dar creează un proces de revizuire a utilizatorilor care este similar informativ cu solicitările de extragere de la GitHub.

Folosind noua noastră bibliotecă de componente pentru a construi machete pentru noua tranzacție OTC de conversație AirSwap

În plus, folosind funcțiile de bibliotecă partajate ale Figma, putem oferi acces la aceste componente pe toate computerele noastre de proiectare. În calitate de ingineri, în timp real, putem vizualiza și edita în mod colaborativ aceste calculatoare, ceea ce oferă o indicație clară pentru ce componentă este folosită. Acest lucru elimină complet orice ghicire cu privire la existența sau nu a unei componente, deoarece numele componentei este afișat pe Figma.

Numele componentei este afișat în Figma, care oferă imediat informații dezvoltatorilor care vizualizează modelele

Ce urmeaza

Mergând mai departe, intenționăm să îmbunătățim și să modificăm acest proces pentru a se încadra mai bine în activitatea noastră de dezvoltare a produselor. Există încă mai multe etape manuale și ineficiente.

În primul rând, Figma nu oferă în prezent o API care poate fi scrisă pentru documente, necesitând să încărcăm manual fișierele Sketch generate. Cu suportul API adecvat, putem integra cu ușurință acest proces end-to-end în conducta noastră de integrare continuă. Avem în vedere un viitor în care o conductă CI redă un fișier Sketch dintr-o etichetă sau o ramură dintr-o repo (sau mai bine, redă obiecte Figma native în loc să treacă prin Sketch), încărcă acel fișier în Figma și leagă acel document rezultat la o tragere. cerere. Comentariile de la Figma pot fi transferate în GitHub, oferind o comunicare și feedback fără probleme între design și cod.

În plus, chiar dacă am creat fundamentul tehnic pentru biblioteca de componente, noi încă trebuie să stabilim reguli practice privind modul și când ar trebui să extindem componentele și / sau să le creăm noi. Ce proprietăți ale căror componente pot fi modificate de la caz la caz și când un număr mare de modificări indică necesitatea creării unei noi componente? Trebuie să identificăm răspunsuri naturale la aceste probleme, în mod ideal, să oferim modalități automatizate de aplicare a acestor decizii.

Cu această nouă bibliotecă de componente, am observat o creștere a productivității și a eficienței odată cu transferurile de design pentru cod. Deși departe de a fi perfect, capabilitățile complete de la capăt ale acestui nou proces ne-au permis să creștem viteza cu care vom itera la lucrări, menținând totodată un nivel ridicat de integritate în identitatea produsului. Conversația în jurul tehnologiei de proiectare și design se dezvoltă rapid în multe echipe de produse din întreaga lume. Designul este ceva care ne interesează profund la AirSwap, iar tehnologia de proiectare a devenit o intersecție interesantă de dezvoltare a produselor pe care ne putem folosi pentru a ne ajuta în transportul unor produse nemaipomenite.

  • Abonați-vă la blogul AirSwap
  • Alăturați-vă canalului nostru oficial de pe Telegram
  • Urmăriți-ne pe Twitter
  • gaseste-ne pe Facebook
  • Abonați-vă la subreditul nostru