Sketch a Zeplin: Pomoc designéru a vývojářů při spolupráci

Spolupráce mezi designéry a vývojáři je základem úspěšného webového projektu a to měří úspěch týmu. Zatímco sdílení stejného pracovního místa je neocenitelné, mít online zdroj pravdy pomáhá pří této spolupráci. V tomto článku se podíváme na Zeplin a jak to funguje v kombinaci se Sketchem, pro propojení týmu.

Pár slov o Sketchi

Před šesti měsíci, když jsem měnil práci, mi bylo doporučeno použít Sketch. Skvělá věc na tomto softwaru je, že se specificky zaměřuje na interface a design ikon; z artboardu se specifickou velikost9 pro web, mobil a ikony, k funkcím které pomáhají vylepší designový proces, Sketch je nutnost pro designery.

Dodatečně, učící křivka, pokud jste pokročilí ve Photoshopu nebo Illustratoru je téměř neexistující.

Zde je pár příkladů, které vám dají přehled toho, co můžete dělat se sketchem:

1. Tvorba stránek pro organizaci vašeho obsahu (například: mobilní design, desktop design) a Artboardy uvnitř těchto stránek pro náhled vašeho produktu (například: krok za krokem zákazníkova dobrodružství).
2. Použíjte Inspector pro vyhledání všech detailů o specifickém objektu (velikost, pozice, barva, styl fontu, krytí a další).
3. Použíjte funkci Export pro exportování Artboardů nebo individuálních objektu do specifických formátů (PNG, JPG, PDF, atd).

"Jsem vývojař, ja nikdy nepoužil Sketch!"

V posledních letech se designéři naučili spolupracovat mezi sebou pomocí nástroje jako je InVision, ale této platformě stále chybí funkce která dovolí rychlý design vývojařskému týmu.

Neměli bychom chtít po vývojářích aby uměli ve stejném nástroji jako designéři. Takhle řečeno, neměli bychom chtít aby designéři odešli od toho, co umějí nejlépe: design! Tvorba "dokumentu specifikace" vždy když předají design je daleko od "agile" a také může znamenat mnoho ztraceného času mezi předáním design a předěláním, pokud je to potřeba.

Zeplin

To je místo, kde přichází Zeplin na scénu.

Zeplin je kolaborativní nástroj UI návrháře a front end vývojáře. Jde za workflow designu a pomáhá týmům s předáním designu.

Dovolí designérům nahrát jejich wireframes nebo vizuální design přímo ze Sketche a přidate je do projektových adresářů v Zeplinu. Nejlepší věc? Poznámky jsou automaticky přidány do designu (velikosti, barvy, okraje a dokonce i CSS pro určité elementy) které způsobí, že máte online knihovnu, do které může přispívat celý tým.

"Zeplin funguje skvěle jako jednotný zdroj pravdy, pokud je tak použit.

Také, protože je dostupná jako samostatná aplikace stejně jako webová aplikace, máte k ní přístup v podstatě odkudkoliv. Je jednoduché s ní zkontrolovat design a věci jako je řádkování, velikosti, barvy, atd" - Daniel Setas Pontes, Javascript developer @NOW TV, Sky

Export designu ze Sketche do Zeplinu

Zeplin funguje jako plugin ve Sketchi, takže uploadování designu je práce pro jedno kliknutí.

Zde je návod jak začít projekt:

1. Stáhněte Zeplin (mac only) a nainstalujte. Developeři nebudou potřebovat běžící OS X protože jim stačí přístup přes web, aby měli přístup k obsahu.
2. Vytvořte projekty
3. Vyberte platformu, pro kterou tvoříte.
4. Označte projekt (ujistěte se, že použijete název které je jasné celému týmu).

Ve Sketchi, vyberte individuální objekty a udělejte je exportovatelnými. Toto dovolí vašemu vyvojařskému týmu exportovat každý element z Zeplinu. Takhle to funguje:

1. Next, Vyberte artboard který chcete nahrát do Zeplinu.
2. Jděte do Plugins > Zeplin > Export Selected Artboards.
3. Vyberte projekt do kterého chcete nahrát vaše designy, potom stiskněte Import.

Práce s Zeplinem

Jakmile jste v Zeplinu, můžete se navigovat mezi projekty jednoduše a prozkoumat všechny komponenty v nich. Zjistit jejich specifikaci určitých elementů je také intuitivní; vyberte element který chcete, potom se všechny relevantní informace objeví v pravém sloupci.

Vývojáři: zde to funguje takto, jakmile otevřete webový nástroj a přihlásíte se:

1. Vyberte objekt který chcete prozkoumat.
2. Podívejte se na pravý sloupec pro detailní informace jako jsou fonty, barvy, atd (informace bude zobrazena podle objektu který vyberete).
3. Zkopírujte určené CSS

Pokud design tým povolil exportovatelným elementům při importu designu do Zeplinu, vývojářský tým by měl být schopen exportovat individuální zdroje. Zdroje budou k dispozici pro stažení v SVG formátu a třech různých PNG velikostech.

1. Zde můžete přidat poznámky a komentáře k designu.
2. Zde můžete zkopírovat a sdílet odkaz na projekt, možná dokonce integrovat týmový Slack kanál pro notifikace nebo pozvat členy týmu ke spolupráci!

Proč by měl váš tým udělat tento krok

Práce s Zeplinem má mnoho výhod, zde je pár příkladů:

• Vyhnete se tvorbě dokumentu specifikace; něco co není agilní a težce se udržuje.
• Vytvoří rychlý design s poznámkami a všemi důležitými informacemi pro vývojáře a další designéry.
• Můžete vytvořit exportovatelný design, aby vývojáří rychle získali přístup k jednotlivým zdrojům.
• Vytvořte projektů kolik chcete, potom nahrajte update pouze pár kliknutími.
• Vytvořte stylový návod, který pomůže týmu zůstat konzistentní.
• Využijte Slack integraci, hned informujte váš tým, když je k dispozici update.

Zkuste to!

Práce se Sketchem a Zeplinem je skvělým způsobem spolupráce pro designery a vývojáře. Můj tým miluje práci tímto způsobem a já bych rád slyšel vaše myšlenky na zkušenosti s těmito nástroji!

Užitečné odkazy

• Sketch plugins
• Sketch tutorials on Envato Tuts+
• Sketch website templates on Envato Market
• @zeplin_io on Twitter
  
• zeplin.io