Share
Să aruncăm o privire la Sympli; o platformă de colaborare pentru designeri și dezvoltatori. Funcționează cu Xcode, Android Studio, Sketch și Photoshop - în acest tutorial vom acoperi perspectiva designerului, apoi într-un post de urmărire vom vedea cum funcționează Sympli din punctul de vedere al dezvoltatorului.
Când aveți o echipă care lucrează la un UI de aplicație (fie pentru un proiect Android, iOS sau HTML5), faza de tranziție de la design la cod devine adesea stâncoasă, ineficientă și uneori puțin dureroasă.
Odată ce un design Photoshop sau Sketch este terminat, este de obicei redirecționat, ca atare, echipei dev. De acolo, echipa dev se lasă să extragă imaginile, să măsoare dimensiunile și să dau seama manual culorile, setările de fonturi și conținutul de text care trebuie traduse în cod. Dacă se fac modificări în fișierele de design originale, transferul documentelor actualizate prin Dropbox (sau e-mail) este lent, dificil și dificil de urmărit.
Toți acești pași adaugă un timp semnificativ procesului de dezvoltare și, în plus, solicită coderilor să acceseze și să învețe aplicațiile de proiectare pe care altfel nu le-ar fi nevoie. Aceasta înseamnă bani suplimentari cheltuit pe licențe software și plătiți pentru timpul petrecut manual manipularea sarcinilor care se încadrează în "terenul nimănui" între proiectarea și codarea.
Aici Sympli intră pentru a propune o soluție. Mai degrabă decât dacă dezvoltatorii gestionează manual aceste pași "între", Sympli urmărește să automatizeze întregul proces de tranziție. Odată ce un designer și-a terminat UI-ul, îl exporta în Sympli, care apoi gestionează automat pregătirea activelor, măsurarea dimensiunii layout-ului, generarea paletei de culori, extragerea setărilor de font și multe altele.
Apoi Devs poate uita Photoshop sau Sketch chiar exista, si in schimb vizualizeaza desene prin intermediul Sympli unde tot ce le cere pentru a intra direct in afacerea de codare este disponibila pentru ei.
Designerii trebuie să instaleze doar pluginul Sympli pentru Photoshop sau Sketch, ambele fiind disponibile ca descărcări gratuite:
https://sympli.io/downloads/webCoderii au opțiunea de a utiliza pluginul pentru Android Studio, pluginul pentru Xcode sau aplicația web Sympli pentru proiecte bazate pe HTML5 și CSS. Aceste trei sunt gratuite pentru un singur proiect, așa că dacă doriți să urmați de-a lungul timpului, mergeți prin acest cap tutorial la sympli.io și luați-vă un cont.
Acest articol este primul dintr-o serie de două părți. Vom începe prin a privi partea de proiectare a ecuației, care să cuprindă cât de bine să configurați documentele de design și să le exportați în Sympli. Vom păstra, de asemenea, un accent pe codarea orientată pe web, privind modul în care funcționează aplicația Web Sympli. În tutorialul următor, vom începe să folosim Sympli cu Android Studio și Xcode.
Să începem de la început: obțineți pluginul Sympli instalat în software-ul de design preferat.
Primul lucru pe care trebuie să-l faceți este să vă îndreptați spre pagina de descărcări, apoi să apucați și să instalați pluginul Sympli pentru aplicația preferată de proiectare; fie Sketch, fie Photoshop.
După instalare, în Sketch puteți accesa pluginul sub Plugin-uri> Sympli> Export la Sympli. În Photoshop o veți găsi sub Fereastră> Extensii> Sympli.
Rețineți că atunci când executați pluginul pentru prima dată, va trebui să vă conectați pentru a permite comunicarea cu contul dvs. Sympli.
"Proiectele" reprezintă nucleul de lucru cu Sympli. Fiecare proiect poate conține un număr de "modele" sau ecrane și puteți avea mai multe fișiere PSD sau Sketch sursă care se hrănesc într-un singur proiect dacă alegeți.
Proiectele pot fi create pentru Web, iOS sau Android cu rezoluții de 1 ×, 2 × și 3 × suportate pentru fiecare. Așa cum am menționat mai devreme, în acest tutorial ne vom concentra pe web, iar în curând va fi un tutorial care se va concentra pe proiectele iOS și Android.
Puteți crea un nou proiect online prin interfața Sympli "Projects":
Alternativ, puteți face acest lucru de la proiecte în pluginul Photoshop:
Sau în pluginul Sketch, dând clic pe Creați un nou proiect apoi alegeți opțiunile preferate:
Indiferent dacă lucrați cu Sketch sau Photoshop, cel mai bun mod de a pregăti desenele pentru sincronizarea cu Sympli este prin utilizarea tablourilor de artă. Fiecare macheta distinctă a UI ar trebui să fie în propria placă de artă, de exemplu:
Motivul pentru aceasta este că, după exportul către Sympli (pe care o vom acoperi mai târziu), fiecare tablă de artă va fi preluată și procesată separat. Apoi, veți putea să le accesați în mod individual pentru a-și lua proprietățile și informațiile legate de cod. Fiecare placă de artă va fi vizibilă ca un "Design" în interfața Web Sympli, așa cum este cazul:
Sympli este construit pentru a fi conștient de cerințele de scalare pentru rezoluțiile de 1 ×, 2 × și 3 ×. Va face lucruri cum ar fi împărțirea dimensiunilor layout-ului cu două sau trei, după caz, deci este important să știți în prealabil ce factor de scalare aveți nevoie pentru a obține rezultatele corecte.
De exemplu, dacă proiectați un interfață de rezoluție de 2 × pentru iPhone 6, care are o dimensiune a afișajului de 375 pixeli la 667 de pixeli, va trebui să vă asigurați că tablourile dvs. de artă sunt de două ori mai mari decât dimensiunea la 750 x 1134 pixeli.
Când exportați un proiect de 2 x web la Sympli, va diminua la jumătate toate dimensiunile din structura dvs., inclusiv cele rezultate în codul CSS generat (vom vorbi mai târziu despre CSS). Placile de arhitectură de 750 x 1134 pixeli vor fi recunoscute ca desene Sympli de 375 pixeli cu 667 de pixeli cu rezoluție de 2 ×, după cum se vede în colțul din stânga jos al ecranului de mai jos.
Sympli va extrage automat active pentru tine la toate rezoluțiile necesare, dar va trebui mai întâi să-i spuneți care părți ale proiectului ar trebui să fie convertite în imagini. Procesul de a face acest lucru este puțin diferit între Sketch și Photoshop.
În Sketch, selectați stratul sau grupul pentru elementul pe care doriți să îl exportați ca imagine, apoi faceți clic pe Faceți Exportabil + butonul din partea de jos a coloanei din dreapta.
Prima dată când faceți clic pe butonul, va fi pregătită o imagine de rezoluție de 1 × pentru export, deci va trebui să faceți clic pe acesta de mai multe ori pentru rezoluții suplimentare, cum ar fi 2 ×, după cum se vede mai jos.
Dacă lucrați cu Photoshop, selectați stratul sau grupul elementului, apoi în panoul pluginului Sympli Assets Utilities Dați clic pe fila Marchează ca Asset. Acesta va adăuga prefixul "AST:" la strat, prin urmare, marcând-o ca un activ. De asemenea, puteți redenumi manual straturile pentru a adăuga acest prefix în locul preferat.
Când designul dvs. de interfață este gata, selectați tablourile de artă pe care doriți să le exportați. Dacă nu aveți deja o configurare a proiectului, puteți face acest lucru acum prin pluginul Sympli pentru software-ul de proiectare. Ca parte a acestui proces, veți primi opțiunea de sincronizare / exportare a designului dvs. imediat.
Dacă aveți deja o configurare a proiectului, asigurați-vă că identificați cel corect în pluginul Photoshop / Sketch, apoi apăsați pe corespunzător Sincronizare sau Sincronizați acum buton.
Sympli va petrece o clipă exportând imagini și încărcând desenele. Odată ce proiectul dvs. este exportat, îl puteți vedea din pagina "Proiecte" a Sympli. De aici puteți selecta orice design / artboard și accesați-l prin aplicația Web pentru o inspecție mai atentă.
Odată ce proiectul a fost exportat, acesta este gata să fie înmânat echipei dev. Colaboratorii pot accesa proiectul printr-un link care poate fi copiat și trimis prin e-mail direct din aplicația Web Sympli sau din plugin-ul din Sketch sau Photoshop.
În timpul procesului de export, Sympli va fi pregătit și încărcat toate activele pe care le-ați definit în documentul sursă de proiectare. Aceste active pot fi descărcate simultan prin descarca toate în aplicația Sympli sau individual apăsând pictograma gri indicând săgeata îndreptată în partea dreaptă a elementului.
Fiecare material poate fi descărcat ca fișier bitmap (PNG) sau vector (SVG).
Atunci când sunt descărcate ca imagini bitmap, imaginile vor fi descărcate la fiecare rezoluție specificată în timpul configurării proiectului, de ex. 1 ×, 2 ×, 3 ×.
Odată exportat la Sympli, puteți utiliza și "cartografiere" pentru a redenumi activele în zbor. Sistemul de "mapare" își va aminti vechiul nume al activului și îl va asocia cu cel nou pe care l-ați adăugat, deci dacă fișierul sursă este reexportat, activele vor fi actualizate corect, dar vor păstra noile lor nume.
În interiorul aplicației web veți vedea o bară mică ce rulează în partea stângă și vă oferă câteva instrumente utile.
Prin extinderea instrumentului pentru straturi veți obține o reprezentare completă a straturilor în documentul sursă original. Acest lucru este util în special pentru selectarea straturilor care ar putea fi ascunse în spatele altor straturi și, prin urmare, dificil de selectat cu ajutorul unui mouse.
Al doilea instrument este un set de două rigle intersectate a căror cruce poate fi trasă în jurul paginii pentru a măsura distanța dintre marginile UI și punctul central al riglelor.
Al treilea instrument oferă posibilitatea de a adăuga comentarii prin intermediul cărora puteți comunica cu echipa dvs. Activați instrumentul de comentarii, faceți clic pe o poziție în desen, apoi introduceți mesajul dvs. și dați clic pe Trimite.
Una dintre caracteristicile disponibile în aplicația Web Sympli este generată automat CSS. Probabil că veți dori să vă scrieți propriul cod de aspect care să răspundă, deoarece CSS-ul lui Sympli este perfect pixel și absolut poziționat, dar atunci când lucrați de la modelele Sketch, există câteva CSS corecte generate și copiate pentru lucruri precum gradienți, fundaluri, setări de text, umbre, si asa mai departe.
Permiteți-mi să împărtășesc câteva sfaturi rapide care ar putea fi utile atunci când creați elemente UI care urmează să fie convertite în CSS de către Sympli.
Sympli face destul de ușor să obțină dimensiunile diferitelor elemente de design, precum și spațiul din jurul lor. Faceți clic pe un element din proiect sau selectați-l prin intermediul instrumentului "Straturi" și veți vedea că riglele apar în citirile de dimensiuni, după cum se vede mai jos:
Veți obține dimensiunile elementului însuși, precum și distanța de la margini și aproape de vecini în aspect.
Atunci când selectați un element de text, dacă vedeți afișajul din partea dreaptă a aplicației web, veți vedea o citire care va furniza familia de fonturi, dimensiunea fontului, alinierea și culoarea textului. Veți vedea și codul cu toate aceste elemente în secțiunea CSS generată automat.
Sub citire, este posibil să faceți clic pe butonul etichetat Copie pentru a apuca conținutul articolului de text, gata să fie inserat în cod.
Dacă selectați a treia filă din dreapta marcată Aa puteți vedea toate familiile de fonturi utilizate în designul actual.
În plus, toate fonturile utilizate în proiectul general sunt vizibile în rezumat secțiune, despre care vom vorbi în curând.
Culorile sunt extrase automat din documentele dvs. și pot fi accesate sub formă RGB sau Hexcode.
Puteți vizualiza culorile folosite în orice element al designului dvs. făcând clic pe acesta pentru a selecta apoi vizualizarea informațiilor din panoul din dreapta.
De asemenea, puteți vedea o paletă completă de culori detectată de design, asigurându-vă că nu este selectată nimic, apoi faceți clic pe a doua filă din panoul din dreapta cu pictograma picăturii.
Ca și în cazul fonturilor, toate culorile din întregul proiect pot fi accesate de la rezumat zonă. Să aruncăm o privire la asta acum.
Pentru a ajunge la proiect rezumat ecranul mergeți la pagina de nivel superior a proiectului, apoi selectați rezumat fila, localizată după Modele tab. Aici puteți vedea toate culorile și fonturile utilizate în întregul proiect.
Această selecție de culori și fonturi poate fi salvată în ceea ce este denumit de Sympli drept "Brandbook". Brandbook-urile sunt comparabile cu ghidurile de stil, permițându-vă să urmăriți culorile și fonturile asociate anumitor mărci.
Dacă trebuie să se facă modificări în documentele sursă, adăugarea lor la proiectul Sympli corespunzător se poate face în esență în același mod ca și exportul inițial. Selectați tabloul de bord care a fost modificat, apoi executați procesul de export descris mai devreme.
Dacă vizualizați un design prin intermediul aplicației web Sympli atunci când o modificare este încărcată, aceasta va detecta modificările și vă va cere să deschideți versiunea actualizată.
Sympli, adevărat cu numele său, pare într-adevăr să simplifice procesul de colaborare "design to dev". Pentru a afla mai multe despre ceea ce face Sympli și de ce a fost creat, verificați această prezentare de către fondatorul său, veteranul dezvoltatorului mobil Max Ignatyev:
Rămâi acordat pentru tutorialul următor, unde vom acoperi lucrul cu pluginurile Sympli pentru Android Studio și Xcode.
Și dacă doriți să încercați pentru dvs. Sympli, mergeți la sympli.io.
Accentsconagua