Construirea și scalarea unui sistem de proiectare în Figma: un studiu de caz

Determinarea modului de a construi un sistem de proiectare pentru o companie multinațională înseamnă catalogarea fiecărei componente și model în detaliu meticulos. Este o întreprindere masivă care necesită atât o imagine de ansamblu, cât și o accent pe specific. Iată cum a realizat un lider de echipă de sistem de proiectare.

Când holdingul ABB, cu sediul în Elveția, și-a propus să creeze un sistem de proiectare, scopul a fost să îmbine un aspect și o senzație consistentă pentru sute de produse software, dintre care multe alimentează sistemele mecanice care țin fabricile, minele și alte site-uri industriale în funcțiune. . Nu era o sarcină mică pentru o companie cu aproape două duzini de unități de afaceri și aproape 150.000 de angajați în întreaga lume. Pentru Abdul Sial, care a ocupat funcția de designer principal de produs în echipa de sisteme de proiectare de 10 persoane a ABB, scalarea bibliotecii de componente și modele depindea de menținerea deschiderii și transparenței, cu accent pe documentația extinsă.

Rolul unui proiectant de sisteme de proiectare

Din ce în ce mai mult, companiile mari precum ABB au echipe dedicate exclusiv creării și întreținerii sistemelor de proiectare. „Un sistem de proiectare permite consecvența, intrarea pe piață într-un timp corect și nu permite producției să se blocheze pe personalizări care nu creează valoare”, spune designerul din Madrid Alejandro Velasco. Sau, după cum explică Alexandre Brito, un designer din Lisabona, Portugalia, „Sistemele de proiectare vin să ofere structură ori de câte ori sunt mulți oameni care folosesc același set de instrumente. E ca și cum toată lumea ar avea aceeași limbă.”

Dacă un ghid de stil tradițional acoperă elementele de bază ale designului - fonturi și culori, de exemplu - un sistem de design are o acoperire mult mai mare. „Un sistem de design este o combinație de ghid de stil, plus componente de design, modele de design, componente de cod și, pe deasupra, documentație”, spune Sial. Când a lucrat la sistemul de proiectare al ABB, aproximativ 120 de designeri l-au folosit în mod regulat. Efortul a reprezentat versiunea 4.8 a sistemului, iar echipa a numit-o „Design Evolution”.

Designerii sistemelor de proiectare joacă un rol diferit față de cei care se concentrează exclusiv pe produse individuale. „Aveți o perspectivă generală asupra tuturor produselor diferite pe care o companie le folosește”, spune Sial.

Lucrul în operațiuni de proiectare necesită, de asemenea, comunicarea cu părțile interesate din întreaga companie. „Designerii sistemelor de proiectare trebuie să fie sociabili”, spune Velasco. „Un designer de sisteme de design trebuie să-i placă foarte mult să lucreze și să vorbească cu oameni care au roluri diferite în cadrul unei organizații. Ei trebuie să fie capabili să distingă ce feedback să includă pentru a construi sistemul de proiectare în jurul nevoilor companiei.”

Ciclul de viață al unei componente

Lucrând la sistemul de proiectare al ABB, Sial a fost ghidat de o filozofie generală: „Documentare, documentare, documentare”. Pentru fiecare element reutilizabil de pe site-urile web ABB, ecranele mobile sau ecranele mari de sine stătătoare, Sial a vrut să arate ceea ce el numește ciclul de viață al unei componente. Asta a însemnat o păstrare extinsă a înregistrărilor pentru toate componentele și modelele - breadcrumbs, anteturi, intrări sau butoane, pentru a numi doar câteva. „Care sunt călătoriile prin care a trecut? Ce decizii au intrat în el? În felul acesta nu recreăm întotdeauna totul. Înainte de a încerca ceva, poți să citești și să vezi că cineva l-a testat deja”, spune Sial.

Din experiența sa, această filozofie este o abatere de la abordarea tipică a documentării. În lumea rapidă a dezvoltării de produse, de exemplu, documentația este adesea scrisă la sfârșitul proiectului sau abandonată cu totul. Dar pentru sistemele de proiectare, spune Sial, documentarea ar trebui să fie mai mult decât o idee ulterioară. „Un sistem de proiectare nu se realizează niciodată; are nevoie de îmbunătățire continuă”, spune el. „Creatorii și consumatorii de sisteme de proiectare doresc să înțeleagă procesele de gândire și deciziile pentru a le îmbunătăți în continuare.”

Documentația este deosebit de importantă pentru un sistem de proiectare la fel de mare precum cel ABB. „Cu o echipă atât de mare, trebuie să fii capabil să crești”, spune el. „Cum ne putem asigura că toți cei care se alătură echipei pot merge rapid la orice componentă și pot înțelege cum a început, cum a fost editat și ce versiune folosesc?”

Găsirea instrumentului potrivit

Există multe instrumente pentru a construi sisteme de proiectare, inclusiv Figma, Sketch și Adobe XD. Sial a experimentat cu mai multe, încercând un amestec de instrumente de design și management de proiect înainte de a se stabili pe Figma, care oferă spațiu amplu pentru documentare.

Sial și echipa sa au stabilit că fiecare componentă ar trebui să se afle în propriul fișier. „De cele mai multe ori, lucrezi la o singură componentă la un moment dat. Dacă puneți toate componentele într-un singur fișier, încetinește Figma. Oferind fiecărei componente propriul fișier, este mai rapid de deschis și aveți întregul istoric și documentația într-un singur loc”, spune el.

Stabilirea Ierarhiei

Sial a configurat sistemul de proiectare ABB astfel încât fișierul pentru fiecare componentă și model să aibă aceleași pagini. Imaginile care urmează detaliază ce este pe fiecare pagină.

Acoperi

Sial recomandă configurarea unei pagini de copertă simplă pentru fiecare componentă. În Figma, acest lucru permite o previzualizare în miniatură a tuturor componentelor și ajută la navigarea fișierelor. În configurarea ABB, pagina de copertă include numele componentei și faza în care se află: proiectare, dezvoltare sau lansare. Starea poate fi actualizată cu ușurință atunci când componenta progresează.

Inventar, cazuri de utilizare și solicitări

Această pagină conține exemple ale numeroaselor moduri în care o componentă apare în produsul digital al unei companii. În cazul unei componente de câmp de text, de exemplu, pagina de inventar ar arăta cum arată câmpul de text pe abb.com în comparație cu modul în care apare pe un iPhone în comparație cu modul în care apare pe un dispozitiv Android. „Inventarul ne permite să înțelegem clar ce este deja acolo”, spune Sial.

Această pagină ar trebui să arate și modul în care componenta este utilizată incorect. „Acest lucru vă permite să vă uitați la produsele și să vedeți unde există aliniamente și nealinieri”, spune Sial. El sfătuiește echipele care lansează un proiect de sistem de proiectare să înceapă prin a cataloga ceea ce există deja. „Începeți cu inventarul și acesta vă va ghida pe măsură ce creați designul”, spune el.

Referințe, bune practici și analiză competitivă

Sial recomandă crearea unei secțiuni a fiecărui fișier de componentă asemănătoare unei panouri de viziune, arătând modul în care alte companii proiectează piese comparabile. „Ca și în orice altceva, cea mai bună practică este să efectuați o analiză competitivă și să vedeți cum o fac alți oameni”, spune el. „Observați alte produse și vedeți învățările lor.”

Teste și date

Pagina de date cu rezultatele testelor reunește toate datele legate de testarea unei componente, inclusiv rezultatele testării A/B și feedback-ul de la utilizatori și părțile interesate. Pe scurt, Sial spune: „Este întreaga poveste a unei componente.” Poate că echipa de proiectare a încercat o nouă variantă în urmă cu doi ani și a constatat că nu a funcționat? „Poate că am lucrat la acea variație și am renunțat-o din anumite motive”, spune el. Dacă da, acest tip de istorie poate economisi timp semnificativ, asigurându-vă că designerii nu o mai încearcă.

Domeniul de aplicare

Pagina următoare prezintă domeniul de aplicare al unei componente, astfel încât designerii să poată realiza un design. Când ajung la pagina de aplicare, Sial spune: „Ai o poveste. Înțelegeți inventarul tuturor produselor. Știi ce trebuie să construiești și cunoști cerințele. Acum este timpul să-l notăm și să facem un scurt din el.” El adaugă că crearea domeniului de aplicare ar trebui să fie un proces de colaborare cu proprietarii de produse, dezvoltatorii și designerii.

Versiuni

Imaginile versiunilor finale ale componentei se găsesc aici, cu cea mai recentă iterație fixată deasupra. Alți designeri ar trebui să poată analiza și comenta.

Cutie cu nisip

Cutia de nisip permite designerilor să experimenteze cu diferite iterații ale unei componente sau model direct în Figma. „Poate fi dezordonat și nu există standardizare”, spune Sial. „Este doar un loc de joacă în care un designer are libertatea de a face orice.”

Componenta Figma

Fișierul conține, de asemenea, o pagină pentru componenta Figma în sine, un element UI care este ușor de repetat în întregul sistem de proiectare. Designerul poate face modificări la componentă, iar schimbarea respectivă se va popula în toate instanțele acelei componente din companie, păstrând totul consecvent. Această pagină va fi exportată în biblioteca sistemului de design Figma, iar orice designer individual poate glisa și plasa componenta Figma în designul său. Dacă echipa sistemului de proiectare trebuie să facă o schimbare la componentă, o poate face o dată și o poate implementa în întreaga companie.

Reguli de stil

În continuare, designerii și dezvoltatorii sistemului de design creează pagina cu regulile de stil, un fel de captivant pentru elementele care, spune Sial, „nu sunt vizibile în design”. De exemplu, cum se va randa componenta când derulați în jos pe pagină? De asemenea, echipa de proiectare ține evidența întrebărilor sau problemelor nerezolvate. El spune că a fost surprins de cât de integrală s-a dovedit a fi această pagină: „La început, am crezut că această pagină nu este atât de importantă, dar acum ne dăm seama că ne petrecem cea mai mare parte a timpului aici.”

Predea

Notele de predare sunt instrucțiunile pentru dezvoltatori privind scrierea codului pentru componentă. Documentul de predare începe cu anatomia componentei, apoi include variațiile acesteia.

Documentele de predare a sistemului ABB includ, de asemenea, jetoane de proiectare. Devenind din ce în ce mai populare în sistemele de proiectare la scară largă, cum ar fi cele ABB, jetoanele de design sunt informații despre stil independente de platformă despre elementele UI, cum ar fi culoarea, fontul sau dimensiunea fontului. Cu simbolurile de proiectare, un designer poate schimba o valoare - să indice că un buton de îndemn ar trebui să fie portocaliu în loc de albastru, de exemplu - și această modificare se va popula oriunde este folosit simbolul, indiferent dacă este pe un site web, iOS, sau platforma Android.

Sial a creat, de asemenea, un plug-in de jetoane Figma pentru a extinde domeniul de aplicare a jetoanelor pe care designerii le pot crea în Figma. „Figma acceptă culori, tipografie, umbre și stiluri de grilă”, spune el. Pluginul va genera jetoane pentru mai multe variabile, cum ar fi opacitatea și lățimea chenarului. De asemenea, creează o convenție de denumire standardizată, astfel încât designerii să nu fie nevoiți să țină evidența numelor de simboluri manual. „Plug-in-ul face puntea dintre dezvoltatori și designeri. Le permite ambelor să lucreze la o singură sursă de adevăr pentru proiectare; dacă cineva face o schimbare într-un loc, acea schimbare are efect peste tot în design și cod”, spune el.

Sial subliniază că în sistemul său, dezvoltatorii joacă un rol activ pe parcursul creării unei componente. „De la început, ne-am implicat dezvoltatorii atunci când aveam ceva pregătit să le arătăm”, spune el. „Atunci ne-am dat seama că nu funcționează, iar acum începem literalmente sesiunile de start cu ei.”

Pagina Web de documentare

Ultima pagină a fiecărui fișier conține o pagină web cu designul final, care arată cum arată componenta ca produs finit. „Creăm o pagină care arată cum va arăta exemplul live, astfel încât utilizatorii, în acest caz, designerii noștri, să poată vedea cum va arăta la sfârșitul zilei pe un site web real”, spune Sial.

Colaborarea este cheia

Rolul unui designer de sisteme de proiectare este multifațetat. După cum spune Alejandro Velasco, „Proiectarea unui sistem de design implică atât de multe roluri, iar dacă conduc asta, sunt lipiciul proiectului.”

Este o acțiune enormă și nu neapărat mișcarea potrivită pentru toate companiile. Startup-urile, de exemplu, ar putea face mai bine să înceapă cu un sistem gata de fabricație, cum ar fi Google Material Design sau IBM Carbon Design System, decât să dedice resurse extinse pentru a crea unul. Totuși, ar putea veni momentul când asta nu va fi suficient, spune Alexandre Brito: „De îndată ce ai mai mulți designeri care lucrează împreună, începi să realizezi că este nevoie ca cineva să construiască reguli care sunt mai în concordanță cu produsul sau marca pe care o construiești.”

Construirea unui sistem de proiectare necesită muncă și dedicare; este nevoie și de colaborare. Sial subliniază că implicarea tuturor părților interesate în dezvoltarea sistemului ABB pe tot parcursul procesului a fost o prioritate. „A fost o muncă cu adevărat iterativă cu întreaga mea echipă. Totul a fost să-i ascultăm și ne-am făcut timp să învățăm și să-l testăm temeinic și să dezvoltăm această structură”, spune el.

A avea o structură care include o documentație extinsă, inclusiv istoric și bune practici, este esențiala sistemului de proiectare Figma. „Este un succes pentru că oamenii pot citi documentația într-un singur loc”, spune Sial. „Ei pot vedea totul, începând de la cazul de utilizare până la design și trecând la predarea și pagina finală a componentelor. Oamenii pot vedea întregul ciclu de viață al unei componente.”

Puteți răsfoi fișierul Figma al lui Abdul Sial în întregime aici: Component Template .

Citiri suplimentare pe Blogul Toptal Design:

• Consistența este cheia - Cum să construiți un sistem de proiectare Figma
• Puterea structurii – Un ghid pentru proiectarea modelelor de sistem
• Înțelegerea sistemelor și modelelor de proiectare
• Puterea Figma ca instrument de proiectare
• Mini Tutorial – Utilizarea caracteristicilor Figma pentru întregul proces de proiectare