Zeplin Sketch Plugin – Podul fluxului de lucru între proiectare și inginerie

Zeplin este un instrument de colaborare puternic care face o punte între designeri și dezvoltatori prin crearea unui spațiu conectat pentru echipele de produse.

De ce Zeplin?

O piesă crucială a oricărui puzzle de dezvoltare a unui produs este locul în care designul se întâlnește cu dezvoltarea. Când un design este gata să treacă în faza de dezvoltare („handoff”), inginerii au nevoie de o modalitate de a-l înțelege și de a-l traduce în cod.

Zeplin facilitează transferul prin preluarea desenelor din Sketch, Adobe XD, Figma și Photoshop și exportându-le într-un format care poate genera cu ușurință fragmente de cod, ghiduri de stil, specificații și elemente.

Spune-ți adio zilelor de „redlining”. Zeplin se concentrează exclusiv pe îmbunătățirea colaborării dintre designerii de produse și echipele de dezvoltare și este folosit de echipele de producție de la Airbnb, Dropbox, Pinterest, Microsoft și multe altele.

Cu Zeplin nu este nevoie să scrieți manual dimensiunile sau marginile, să tastați copia, să exportați pictogramele. Este pur și simplu minunat și economisește mult timp pentru a vă concentra pe explorările de design. – Alex Potrivaev, Designer de produs @Intercom

Într-unul dintre articolele noastre anterioare, designerul Toptal Micah Bowers a vorbit despre importanța de a avea un sistem de limbaj de design standardizat pentru a comunica eficient între diferitele funcții ale echipelor de produse care lucrează pe produse digitale.

Prin versiunea elementelor de proiectare, crearea bibliotecilor de componente și generarea de ghiduri de stil de viață, un proiect portat în Zeplin poate servi drept „sursă unică de adevăr” pentru echipele de produse.

În principiu, considerăm că Zeplin este sursa noastră de adevăr pentru colaborarea cu Engineering. Dacă nu este în Zeplin, nu este oficial. – Jason Stoff, designer senior, produse digitale @Starbucks

Limitări Zeplin

Deși Zeplin are multe funcții utile, nu este perfect. Zeplin oferă un plan gratuit, dar în cadrul acestui plan, este limitat la un singur proiect. Când proiectați atât pentru iOS, cât și pentru Android, vor fi necesare două proiecte separate. În acel moment, ar fi nevoie de un plan plătit.

Odată ce fluxul de lucru cu Zeplin și Sketch (sau alte aplicații menționate mai sus) este înțeles, fluxul de lucru devine ușor. Cu toate acestea, Zeplin are o curbă de învățare care necesită ceva timp și atenție. Pentru a vedea o prezentare generală și pentru a afla mai multe despre cum să o utilizați, vedeți videoclipul demonstrativ Zeplin de mai jos:

Lucrul cu Sketch și Zeplin: pași și sfaturi

1. Începeți cu Zeplin.

• Creează un cont Zeplin dacă nu ai deja unul. Vă puteți înscrie gratuit: https://app.zeplin.io/register
• Descărcați aplicația desktop Zeplin pentru Mac sau Windows.
• Descărcați pluginul Zeplin pentru Sketch.

2. Pregătiți fișierul Sketch.

• Acum că avem Sketch și Zeplin gata de funcționare, vom configura fișierul nostru Sketch pentru un export fără întreruperi în Zeplin.
• În Sketch, organizați-vă materialele și straturile folosind convenții de denumire consecvente. Dacă colaborați cu alți designeri, stabiliți convenții care funcționează pentru toți membrii echipei dvs. În funcție de tipul de proiect acesta este (de exemplu, iOS, Android sau web), Zeplin va ajusta automat convenția de denumire a activelor, făcând exportul lor într-un singur pas.
• Creați simboluri pentru elemente și active comune în Sketch. Acest lucru vă va permite să configurați componente în Zeplin.
• Salvați culorile în paleta și fonturile „Culori ale documentului” ca „Stiluri de text” în fișierul Schiță. Acestea vor apărea în ghidul de stil generat de Zeplin.

3. Faceți ca activele să fie exportabile în Sketch.

• Acesta este un pas foarte important. Odată ce activele dvs. sunt grupate în simboluri, deschideți pagina Simboluri din fișierul Sketch.
• Faceți clic pe un grup dintr-un simbol, cum ar fi „ic-meniu” (pictograma folderului)
• Cu grupul evidențiat, localizați acțiunea „Faceți exportabil” în partea dreaptă jos a „Inspectorului” în Sketch și faceți clic pe această opțiune. O pictogramă felie ar trebui să apară acum lângă numele grupului dvs.
• Acest pas va permite inginerilor să exporte active direct de la Zeplin.

4. Creați un nou proiect în Zeplin.

• Selectați tipul de proiect pe care îl construiți. Rețineți că ar trebui să aveți proiecte separate pentru iOS și Android, chiar dacă modelele sunt identice. Acest lucru se datorează faptului că Zeplin va genera cod diferit în funcție de tipul proiectului.
• Selectați rezoluția proiectului care se potrivește cu tablourile de desen Sketch (de exemplu, 1x, 320px).

5. Exportați planurile de desen Sketch în Zeplin.

• Din Sketch, evidențiați toate planurile de artă pe care doriți să le exportați în Zeplin.
• Accesați Plugins > Zeplin > Export Selected... sau apăsați ⌃⌘E pe tastatură.
• Apoi, vom exporta simboluri din Sketch. Deschideți pagina Simboluri în Sketch și evidențiați toate planurile de desen. Exportați în Zeplin.

6. Organizați proiectul în Zeplin.

• Acum că tablourile dvs. de artă Sketch sunt în Zeplin, să organizăm lucrările de artă în secțiuni.
• Din vizualizarea Tablou de bord a proiectului dvs., selectați ecrane similare pentru a le grupa în categorii. Odată evidențiat, faceți clic dreapta și selectați „Secțiune nouă din selecție”. Repetați acest lucru până când fișierul Zeplin este organizat corect.

7. Utilizați componente în Zeplin.

Poate una dintre cele mai utile caracteristici ale lui Zeplin este capacitatea de a organiza activele în biblioteci de componente. Acest lucru este important atunci când design-urile unui proiect sunt dezvoltate pentru mai multe platforme de către diferiți membri ai echipei. Unificarea designului este esențială, așa cum subliniază designerul Airbnb Karri Saarinen în Construirea unui limbaj vizual:

Un sistem de proiectare unificat este esențial pentru a construi mai bine și mai rapid; mai bine pentru că o experiență coerentă este mai ușor de înțeles de către utilizatorii noștri și mai rapid pentru că ne oferă un limbaj comun cu care să lucrăm.

• Selectați fila „Ghid de stil” din partea centrală sus a lui Zeplin (lângă „Tabloul de bord”).
• Odată ajuns în fila „Ghid de stil”, selectați fila secundară, „Componente”. Aici veți vedea toate simbolurile dvs. exportate din Sketch.
• Organizați-le în secțiuni precum „Icoane”, „Imagini”, „Elemente comune” etc. Puteți afla mai multe despre fila Componente a ghidului de stil al proiectului în Zeplin aici.

8. Exportați ghiduri de stil de la Zeplin.

• Din vizualizarea tabloului de bord a proiectului dvs. Zeplin, găsiți butonul „Partajare” din colțul din dreapta sus al aplicației.
• Selectați „Partajare”, apoi găsiți „Scena” în partea de jos a meniului. Selectați „Activați” și apoi „Deschideți”. Acest lucru va genera un ghid de stil dinamic pentru proiectul dvs. Distribuiți adresa URL echipei dvs.

9. Adnotă-ți desenele în Zeplin.

• Adăugarea de note la design este ușor cu Zeplin. Din vizualizarea detaliată a unui ecran, selectați pictograma adăugare notă și fixați nota pe o componentă.
• Puteți adăuga o notă ținând apăsat Cmd ( Ctrl pentru utilizatorii Windows și Linux) și făcând clic oriunde pe ecran.
• Puteți chiar să menționați alți colegi de echipă cu „@” și vor primi o notificare.

10. Colaborați, partajați și utilizați controlul versiunilor.

• Acum că fișierul dvs. Zeplin este gata pentru a fi distribuit echipei dvs., invitați utilizatori prin adresa lor de e-mail sau trimiteți-le adresa URL a proiectului.
• Continuați să vă actualizați fișierul Zeplin exportând panouri de artă din Sketch.
• Zeplin va controla automat versiunea fișierelor dvs. și puteți continua să colaborați cu membrii echipei folosind această „sursă a adevărului” dinamică.

Concluzie

Crearea unui flux de lucru dinamic, organizat și colaborativ între echipele de proiectare și dezvoltare este esențială pentru construirea de produse digitale excelente. Având o punte de flux de lucru precum Zeplin, proiectanții sunt împuterniciți să adnoteze ecranele și ușurează faza adesea temută de transfer cu specificații complete și precise.

Flexibilitatea de a actualiza activele în mod dinamic dintr-o singură sursă centrală, cum ar fi un simbol în Sketch exportat către o componentă în Zeplin, creează o flexibilitate extraordinară. Inginerii pot exporta cu ușurință activele în codul nativ, economisind timp și oboseală.

În timp ce UX atent și design-urile frumoase din punct de vedere estetic sunt rădăcina unui produs de succes, procesul de a aduce acel design în mâinile utilizatorilor este esențial.

Designerii care doresc să fie eficienți și să se bazeze pe o singură „sursă de adevăr” ar trebui să ia în considerare fluxul de lucru Sketch to Zeplin prezentat mai sus. Puterea din spatele relației software robuste dintre aceste două instrumente de proiectare îi va ajuta pe designeri și echipele de dezvoltare să ajungă la linia de sosire cu mai multă ușurință și satisfacție.

• • •

Citiri suplimentare pe Blogul Toptal Design:

• Adobe XD vs. Sketch – Ce instrument UX este potrivit pentru tine?
• Cum să construiți un cadru de design eficient (Include un cadru gratuit de interfață de utilizare pentru schiță)
• Lucruri pe care este posibil să nu le știi despre tipografie în schiță
• Familiarizarea cu Sketch Plugin Development
• Crearea de ilustrații atrăgătoare cu Sketch și Looper în cel mai scurt timp