Sympli pentru dezvoltatori

Introducere

Dacă nu ați auzit de el înainte, Sympli este un instrument conceput pentru a simplifica procesul de realizare a unei interfețe concepute în Photoshop sau Sketch și implementarea acestuia pentru web sau ca aplicație funcțională iOS sau Android. Fluxul de lucru funcționează astfel: în primul rând, un designer creează o proiect pentru web, iOS sau Android care pot conține orice număr modele. Aceste modele reprezintă diferite ecrane care ar trebui să fie disponibile în aplicația pe care o dezvoltați. Apoi, dezvoltatorul poate folosi aceste modele pentru a crea cu ușurință o interfață pentru un site web sau pentru o aplicație nouă.

În acest articol, vă voi arăta câteva din multele caracteristici pe care Sympli le oferă dezvoltatorilor să creeze cu ușurință aplicații pentru iOS sau Android, pe baza lucrărilor realizate de designeri.

Dacă doriți să vedeți ce are de oferit Sympli pentru designeri, atunci verificați acest articol de Kezz Bracey: 

1. Plugin-uri IDE

Folosirea Sympli ca dezvoltator începe cu descărcarea și instalarea unui plugin pentru Android Studio sau Xcode. Instalarea acestor pluginuri este foarte ușoară, iar tutorialele video afișate pe paginile legate de descărcări vă vor ajuta în cazul în care aveți probleme.

2. Inspectarea machetelor de proiectare

Sympli plugin pentru Android și Xcode oferă acces la specificațiile de design interactiv (unele echipe folosesc termenul "documente de linii roșii"). Deschideți un mockup și dați clic pe elementele de design pentru a obține toate informațiile necesare pentru implementarea designului în aplicația dvs..

După cum se arată în următoarea imagine de ecran, Sympli vă oferă toate informațiile pe care le-ați putea avea nevoie cu privire la o anumită vizualizare, astfel încât să puteți implementa un design pixel-perfect manual în cod sau în Interface Builder sau Layout Editor.


Rețineți că Sympli convertește automat pixelii în machete de proiectare în puncte, precum și alți parametri, cum ar fi umplerile, umbrele și marginea termenilor și unităților specifice Android sau iOS.

De asemenea, în cazul în care macheta a fost creată în Sketch, pluginul Sympli va afișa regulile de redimensionare aplicate widgeturilor din Sketch, ceea ce îi ajută pe dezvoltatori să stabilească valori de constrângeri corecte.

Drag & Drop Views

Una dintre principalele caracteristici ale Sympli pentru dezvoltatori este abilitatea de a glisa și plasa vizualizări dintr-un design într-un fișier Android XML sau iOS Storyboard. Sympli se ocupă de o mulțime de hassle atunci când creează interfețe prin poziționarea și dimensionarea opiniilor tale exact așa cum apar în designul original. În plus, Sympli poate configura, de asemenea, multe alte atribute, cum ar fi culoarea de fundal și fonturile personalizate pentru vizualizările de text.

Pentru a aplica stilul la vizualizarea existentă în Interface Builder în Xcode, apăsați butonul "Shift", apoi trageți și plasați elementul de design în vizualizare.

Pentru a genera un cod de styling pentru vizualizările create în mod programat, trageți și fixați în codul controlerului cu butonul din dreapta al mouse-ului apăsat.

De aici, tot ce trebuie să faceți este să modificați constrângerile opiniilor dvs., astfel încât să se poată adapta cum v-ați aștepta la dispozitive cu dimensiuni diferite ale ecranului. Pentru iOS acest lucru ar însemna adăugarea constrângerilor automate de aspect, iar pentru Android ar însemna configurarea vizualizărilor în aspectul corect al aspectului pentru design. 

Construirea de vizualizări personalizate cu Sympli

În plus față de generarea de cod de styling pentru vizualizările standard, pluginul Sympli pentru Xcode ajută dezvoltatorii să creeze comenzi personalizate pe baza datelor vectoriale de la design mockup.

Selectați o formă vectorală pe machetă și apăsați pe butonul "Snippet" de lângă numele unui strat din panoul cu detalii. Acest lucru va aduce o fereastră pop-up cu cod Swift care atrage în același mod în care a fost proiectat programat. Există, de asemenea, o opțiune la îndemână pentru a copia un cod de pregătire Xcode Playground pentru a continua construirea unei vizualizări personalizate, cu o previzualizare live a locului de joacă imediat.


Acest lucru este extrem de util pentru orice aplicație care necesită desenarea manuală a vederilor pe ecran.

3. Importul de active

Atâta timp cât totul a fost configurat și încărcat corect de către designer, Sympli poate avea grijă să importe imagini și fonturi personalizate folosite în design. La import, Sympli solicită proiectantului să numească imaginea sau fontul în conformitate cu cele mai bune practici ale platformei. De exemplu, dacă este apelată o imagine Imaginea 1 este încărcat într-un proiect Android, Sympli îi va cere designerului să îl redenumească IMAGE_1. Acest lucru vă asigură că nu trebuie să pierdeți timpul de dezvoltare redenumirea fișierelor, astfel încât acestea să poată fi încărcate cu ușurință. În plus, dezvoltatorii pot crea reguli de redenumire, astfel încât să fie aplicate de fiecare dată când macheta este actualizată.

În ambele pluginuri Xcode și Android Studio, dând clic pe butonul prezentat mai jos când vizualizați imaginile sau fonturile într-un design, le veți importa în proiect. 

Sympli este foarte inteligent în privința importului de bunuri. Acesta va pune imaginile în cataloagele dvs. de active pe iOS și în folderul de resurse al proiectului pe Android; acesta va crea chiar și versiuni scalate pentru diferite dispozitive în mod automat.

Notă: Sympli a anunțat că va adăuga în curând o opțiune atât pentru plug-in-urile Android Studio cât și pentru Xcode pentru a exporta active vectoriale (PDF pentru iOS și VectorDrawable) din orice strat vectorial din mockup.

4. Sincronizarea automată a machetelor de proiectare

În mod implicit, Sympli permite sincronizarea automată pentru proiectul dvs. în ambele pluginuri Xcode și Android Studio. Aceasta înseamnă că, chiar dacă lucrați, dacă designerul face unele modificări și le încarcă la Sympli, noul design va fi disponibil imediat în Xcode și Android Studio. 

Când se efectuează modificări la un design, Sympli va descărca automat cea mai recentă versiune a proiectului și vă va notifica despre actualizare. Acest lucru vă asigură că niciodată nu trebuie să verificați manual dacă lucrați cu cele mai recente modele și, de asemenea, elimină necesitatea ca designerul să vă anunțe când a făcut modificări.

5. Versiuni de proiectare

Pe lângă descărcarea automată a celor mai recente copii ale proiectelor pentru proiectul dvs., Sympli facilitează și vizualizarea versiunilor anterioare ale oricărui design. Atât în ​​plug-in-urile IDE, cât și în aplicația web Sympli, puteți să vă uitați foarte ușor la versiunile anterioare ale oricărui design. 

Acest lucru poate fi util în special dacă nu sunteți sigur ce modificări au fost făcute în cea mai recentă versiune a unui design specific. În aplicația web Sympli, puteți să vă mișcați cu ușurință între diferite versiuni ale aceluiași design pentru a vedea ce modificări au fost făcute:

În cele din urmă, această întârziere a versiunilor anterioare poate fi, de asemenea, foarte utilă dacă o revizuire a aplicației dvs. necesită utilizarea unui model mai vechi. Evitând hassle-ul de a încerca să găsiți un fișier vechi în descărcările dvs. într-un e-mail, cu Sympli puteți selecta doar o versiune dintr-o listă drop-down simplă în pluginul IDE:

Sympli Webapp oferă un browser de schimbare în care puteți compara vizual orice două versiuni ale machetei de proiectare și vedeți schimbările una lângă cealaltă. Acest lucru face ca adăugările, ștergerile și alte actualizări să fie vizibile imediat, crescând astfel productivitatea echipelor. Nu numai că dezvoltatorii pot vedea, de asemenea, modificările de pe un nivel de proprietate - de exemplu, dacă o culoare se schimbă ușor sau o graniță devine 1px mai groasă.

Pentru orice machetă încărcată de Sympli de mai multe ori, va apărea un buton "Navigare modificări" într-o bară de sus, care deschide un browser de schimbare. Selectați versiunile de machete pe care doriți să le comparați și faceți clic pe regiunile evidențiate pentru a vedea modificările reale.

6. Rezumatul proiectului

Atât aplicația web Sympli, cât și plug-in-urile IDE vă pot arăta a rezumat pentru orice proiect. Acest ecran de rezumat vă arată toate culorile și fonturile utilizate în întregul proiect. Acest lucru poate fi foarte util dacă trebuie să obțineți detaliile unei anumite culori sau font și nu sunteți în întregime siguri de designul în care este folosită resursa. De asemenea, poate fi folosit ca referință întotdeauna disponibilă atunci când vă dezvoltați aplicația dacă trebuie să utilizați o culoare exactă sau un font undeva unde nu a fost oferit un design. 

Concluzie

După cum puteți vedea, Sympli face mult mai ușor să dezvolte o aplicație de la interfețe create de altcineva. Sympli se ocupă de o mulțime de lucrări manuale implicate în conversia fișierelor PSD sau Sketch într-un Storyboard pentru iOS sau un XML pentru Android. Acest timp salvat din cauza Sympli poate fi folosit mai productiv - de exemplu, vă puteți petrece timpul pe funcționalitate reală, mai degrabă decât copiați cu tărie codurile și imaginile de culoare!

Dacă doriți să aflați mai multe despre Sympli sau doriți să îl încercați singur, atunci vă îndreptați spre site-ul lor și verificați câteva dintre tutorialele video despre cum să instalați și să utilizați pluginurile Xcode și Android Studio.

Ca întotdeauna, vă rugăm să aveți grijă să lăsați comentariile și comentariile dvs. în comentariile de mai jos.

Cod