Simplificați transferul de la schiță la codul Visual Studio cu Indigo.Design

(Acesta este un articol sponsorizat.) Dacă vă gândiți bine, echipele de software seamănă mult cu echipele sportive. În timp ce fiecare membru al echipei lucrează spre același obiectiv exact, rolul pe care îl joacă și acțiunile pe care le întreprind sunt foarte diferite unul de celălalt.

De aceea, este esențial să existe un mod perfect de a muta mingea de la un membru al echipei la altul.

Din păcate, transferul care are loc în cadrul echipelor de software nu este în mod natural la fel de lină ca ceea ce vezi pe terenul de sport. Și unul dintre motivele principale pentru aceasta este diferitele sisteme și abordări utilizate pentru a construi produse.

Designerii creează interfețe de utilizare perfecte în pixeli în Sketch, doar pentru a trebui să le traducă într-un limbaj pe care dezvoltatorii îl pot folosi atunci când construiesc aplicații în Visual Studio Code IDE. Fără o modalitate simplă de a muta proiectele de produse prin conductă, aceste ineficiențe duc la reluări și depanare costisitoare după ce o aplicație a fost transferată de la designer la dezvoltator.

Inutil să spun că o soluție la problema transferului Sketch-to-IDE a fost de mult timp. Nu este că echipele de software nu știu să colaboreze sau să comunice bine între ele. Doar că sistemele și strategiile lor disparate fac tranziția de la o echipă la alta greoaie, consumatoare de timp și pline de erori.

Astăzi, vom analiza de ce se întâmplă acest lucru și cum poate agenția dvs. să remedieze problema cu două plugin-uri și o platformă cloud de prototipare de la Indigo.Design.

Unde greșește Handoff-ul designer-dezvoltator?

În primul rând, ceea ce ar trebui să întrebăm cu adevărat este:

De ce este o asemenea problemă transferul designer-dezvoltator?

Nick Babich a scris recent despre modul în care designerii fac eforturi mari pentru a crea soluții digitale care sunt măsurate perfect și realizate în mod constant. Dar sistemele de proiectare nu se traduc fluent în sisteme de dezvoltare.

Cu cât designerul face mai mult unei interfețe, cu atât mai mult trebuie să comunice cu un dezvoltator. Deci, nu este suficient să predați un fișier de design Sketch și să lăsați dezvoltatorul să ruleze cu el. Designerii trebuie să furnizeze specificații de design care explică modul în care toate piesele în mișcare trebuie să fie așezate, distanțate, stilizate, colorate, implicate și așa mai departe.

A fost singura modalitate de a vă asigura că o aplicație ajunge la pixeli perfectă în cele din urmă. Chiar și atunci, încă necesită multă implementare din partea dezvoltatorului odată ce acestea sunt în interiorul IDE-ului lor.

După cum vă puteți imagina, întregul proces necesită mult timp pentru a face unui designer. Dar fără specificații de design, dezvoltatorii ajung să fie nevoiți să joace un joc riscant de ghicire.

Nu numai că, dezvoltatorii nu au de obicei obiceiul de a codifica cu HTML și CSS, ceea ce este o muncă obositoare și reprezintă doar interfața de utilizare. Există mult mai mult cod în culise care face ca o aplicație web să funcționeze și nu toți dezvoltatorii sunt adepți sau interesați să învețe să scrie marcajul UI. Când sunt forțați în această poziție, curba abruptă de învățare adaugă mai mult timp proiectelor, iar reelaborarea și depanarea rezultate fac ca costurile să scape de sub control.

Deci, într-adevăr, transferul designer-dezvoltator a devenit o chestiune de al cui timp ne putem permite să-l pierdem?

„

Este designerul cel care trebuie să lineze totul în roșu, astfel încât dezvoltatorul să știe cum să transforme designul în realitate?

Sau:

Este dezvoltatorul care trebuie să se uite la un design, să măsoare manual tot ce este pe ecran și să spere că vor obține toate specificațiile corect doar observându-l?

Nimeni nu câștigă în niciunul dintre scenarii. Și veți consuma marjele de profit în acest proces.

Pot exista unele agenții care cred că forțarea designerilor și dezvoltatorilor să lucreze pe aceeași platformă este cea mai bună soluție. În acest fel, nu este nevoie să faceți toată această traducere sau interpretare în timpul transferului de la Sketch la Visual Studio Code. Dar asta duce adesea la creativitate înăbușită din partea designerului sau la o capacitate împiedicată de a construi soluții software eficiente din partea dezvoltatorului.

Deci, care este răspunsul?

Îmbunătățiți transferul designer-dezvoltator cu Indigo.Design

Nu este ca Indigo.Design este prima platformă care încearcă să rezolve problemele de transfer pentru echipele de software. InVision și Zeplin și-au oferit ambele propriile soluții.

Fiecare dintre aceste platforme a făcut specificațiile vizuale mai accesibile pentru dezvoltatori, îmbunătățind, în consecință, eficiența echipelor de designer-dezvoltatori. Specific:

• Designerii nu mai trebuie să marcheze interfața de utilizare, deoarece platformele gestionează liniile roșii.
• Dezvoltatorii pot extrage manual specificațiile de design fără ajutorul designerilor.

Acestea fiind spuse, cu platforme precum InVision și Zeplin, dezvoltatorii trebuie încă să inspecteze fiecare element și să îl codeze manual pe baza specificațiilor extrase. De asemenea, aceste platforme nu au creat încă o punte perfectă între Sketch și Visual Studio Code.

Deci, dacă designerii și dezvoltatorii doresc să lucreze cât mai eficient unul cu celălalt, Indigo.Design a dezvoltat un răspuns la problema lor:

Pasul 1: Proiectați în Sketch

Există într-adevăr un singur lucru în această fază care trebuie să se schimbe pentru designer. Aplicația, paginile și fluxul vor fi în continuare proiectate ca de obicei în Sketch, folosind componente din Indigo.Design UI Kit.

Cu toate acestea, nu mai este nevoie să compilați linii roșii sau specificații pentru aplicație. Indigo.Design are grijă de asta pentru tine.

Pentru a profita de acest lucru, designerul dvs. trebuie să renunțe la orice sistem de prototipare pe care îl folosea înainte. Cu acest nou sistem simplificat și fără erori, designerul dvs. își poate împinge cu ușurință designurile în cloud folosind pluginul Indigo.Design.

Acesta poate fi accesat în Plugins menu > Indigo.Design > Publish Prototype :

Nu este nevoie ca designerul să exporte fișiere și să le încarce într-un alt sistem pentru ca clienții să le examineze sau cu care dezvoltatorii să lucreze. Ei trebuie să rămână exact acolo unde sunt pentru a publica prototipul.

Este nevoie de doar aproximativ un minut pentru a finaliza procesul. Proiectantului i se oferă apoi un link către cloud pe care îl poate partaja clienților și altora pentru a revizui și comenta prototipul.

Pasul 2: Lucrați în Indigo.Design Cloud

Este ușor să-i aduci pe alții în cloud. Link-ul furnizat îi va duce în cloud-ul de experiență, unde designul poate fi revizuit:

Este ușor să lăsați comentarii deasupra designului. Tot ce trebuie să facă utilizatorii este să deschidă panoul Comentarii, să arunce un indicator și să-i atașeze comentariul:

Totuși, există mai mult în acest software de colaborare decât atât. Prototipul poate fi editat și din cloud.

Pentru a accesa aceasta, designerul, dezvoltatorul și oricine altcineva cu acces de grup vor localiza proiectul din biblioteca de prototip:

Faceți clic pe „Editați prototip” pentru a intra în editorul Indigo.Design:

Odată ce un ecran este selectat, designerul poate adăuga un hotspot pentru a crea o nouă interacțiune în aplicație.

De asemenea, puteți utiliza editorul Indigo.Design pentru a inspecta specificațiile interfeței de utilizare a aplicației:

Plasarea cursorului peste un element dezvăluie specificațiile de spațiere relative. Făcând clic pe un element dezvăluie mult mai multe detalii:

De asemenea, dezvoltatorul poate edita sau copia CSS-ul curat scris și scos din acest panou. (Deși nu ar trebui, așa cum voi explica în pasul următor.)

Vedeți ce vreau să spun despre economisirea timpului designerilor în generarea specificațiilor? Pur și simplu împingând acest design în cloud Indigo.Design, specificațiile sunt generate automat.

Pasul 3: Construiți codul Visual Studio

Acum, să presupunem că designul tău este suficient de bun pentru a intra în dezvoltare. Mutarea unui prototip Indigo.Design la Visual Studio Code este la fel de ușoară precum a fost mutarea de la Sketch.

Preluați linkul cloud original furnizat de pluginul Indigo.Design în Sketch. Dacă nu îl mai ai, e în regulă. Îl puteți prelua din ecranul biblioteci în Indigo.Design:

Tot ce trebuie să facă dezvoltatorul acum este să instaleze extensia Indigo.Design Code Generator. Acesta este ceea ce permite Visual Studio Code să vorbească direct cu Indigo.Design pentru a prelua prototipul.

Odată ce extensia este configurată, dezvoltatorul va face următoarele:

Deschideți shell-ul aplicației care a fost deja dezvoltat. Apoi, lansați Indigo.Design Code Generator. Aici veți introduce link-ul cloud:

Aceasta va dezvălui o fereastră pop-up cu design-urile aplicațiilor care trăiesc în cloud, precum și componentele individuale din care sunt compuse.

Dezvoltatorul are opțiunea de a genera cod pentru toate componentele aplicației sau de a merge componentă cu componentă, verificând doar pe cele de care au nevoie. Acest lucru este util în special dacă o aplicație este în desfășurare și dezvoltatorul trebuie doar să importe componente noi în VSC.

Făcând clic pe „Generează elemente de cod”, componentele selectate vor fi adăugate în Angular ca HTML și CSS lizibil și semantic.

Dezvoltatorul are acum mai puține griji în ceea ce privește reconstrucția stilurilor sau configurarea altor specificații. În schimb, își pot petrece timpul construind funcționalități de afaceri și rafinând cu adevărat produsul.

O notă despre acest proces

Este important de subliniat că acest flux de lucru Sketch – cloud – Visual Studio Code nu funcționează doar cu prima iterație a unui design. Dezvoltatorii pot construi în timp ce designerii lucrează prin feedback cu clienții sau studii de utilizare cu utilizatorii - ceva pentru care Indigo.Design a luat în considerare.

Deci, să presupunem că designerul a mutat o interfață de utilizare a formularului de autentificare prin Indigo.Design și dezvoltatorul a generat codul pentru a pune lucrurile în mișcare.

În timp ce lucra la formular, dezvoltatorul a implementat un cod de autentificare în fișierul TypeScript.

Între timp, însă, designerul a primit un mesaj de la client, în care îi anunța că trebuie implementat o nouă autentificare universală cu Google. Ceea ce înseamnă că UX-ul trebuie să se schimbe.

Când actualizarea este gata și prototipul este sincronizat cu Indigo.Design, designerul trimite un mesaj dezvoltatorului pentru a-i anunța despre modificări. Deci, dezvoltatorul lansează Visual Studio Code Generator încă o dată. Cu toate acestea, atunci când regenerează ecranul de conectare, ei selectează „Nu suprascrie” în fișierul TypeScript. În acest fel, ei pot păstra codul pe care l-au scris în timp ce importă simultan noul HTML și CSS.

Dezvoltatorul poate face apoi toate ajustările necesare pe baza designului actualizat.

Învelire

Indigo.Design a creat efectiv un transfer eficient și fără erori pentru designerii care lucrează în Sketch și dezvoltatorii care lucrează în Visual Studio Code.

Designerii nu pierd timpul proiectând pe o platformă și prototipând pe alta, elaborând specificații de proiectare sau ocupându-se de exporturile de fișiere. Dezvoltatorii nu pierd timpul încercând să recreeze intenția de proiectare dintr-un fișier static.

După cum a spus Jason Beres, senior VP pentru dezvoltare de produse pentru Indigo.Design:

Cu generarea codului Indigo.Design, toate aceste erori sunt evitate 100%. Nu numai că se menține spiritul designului, dar se creează HTML și CSS perfect pixeli, astfel încât dezvoltatorul să nu fie în situația nefericită de a trebui să se potrivească manual cu designul.

Și prin rezolvarea problemelor tehnice din fluxurile de lucru și transferul designer-dezvoltator, agenția dvs. va reduce foarte mult costul reproceselor și depanării. De asemenea, veți spori profiturile oferind echipei dvs. de software o modalitate mai eficientă și mai rapidă de a obține aplicații prin proces și în stare perfectă de pixeli.