Advertisement
  1. Web Design
  2. Sketch
Webdesign

Sketch at Zeplin: Tulungan ang mga Designers at mga Developer na mag-kolaborate

Length:LongLanguages:

Tagalog (Wikang Tagalog) translation by Anna Nelson (you can also view the original English article)

Ang kolaborasyon sa pagitan ng designers at mga developer ay mahalaga sa tagumpay ng isang web project, at ito ay sumusukat sa tagumpay ng isang pangkat. kung kaya't ang pagbabahagi sa iisang lugar ng pagtatrabahuhan ay napakahalaga, ang pagkakaroon ng pinagmumulan ng katotohanan sa online na nakatutulong sa kolaborasyon ay sobrang nakakatulong.  Sa artikulong ito ating titignan ang Zeplin at kung paano ito gumagana sa kumbinasyon ng Sketch upang mapagsama-sama ang pangkat.

Isang maigsing panimula sa Sketch

Halos anim na buwan na ang nakalipas, nang akoý lumipat ng trabaho, Akoý nahikayat na subukan ang Sketch. Ang maganda tungkol sa software na ito ay partikular na nakatuon sa interface at disenyo ng icon; mula sa artboards na may partikular na sukat para sa web, mobile, at icons, hanggang sa mga tampok na nakakatulong sa pagpapaganda ng proseso ng pag-disenyo, Nararapat na magkaroon ng Sketch ang mga disenyo.

Bukod pa rito, ang antas ng pagkakatuto kung ikaw ay isang intermediate Photoshop o Illustrator user ay halos wala.

Narito ang ilang mga halimbawa na magbibigay ng pananaw sa maari mong maggawa sa sketch:

  1. Maglikha ng pahina upang maayos ang mga nilalaman (halimbawa: mobile designs, desktop designs) at Artboards sa loob ng mga pahinang ito upang igaya ang iyong produkto (halimbawa: lumikha ng  sunod-sunod na hakbang ng paglalakbay ng parokyano).
  2. Gamitin ang Inspector upang hanapin ang lahat ng detalye tungkol sa partikular na bagay (sukat, pagpoposisyon, kulay, istilo ng letra, opacity at marami pang iba).
  3. Gamitin ang Export feature upang i-export ang Artboards o mga inbibidwal na bagay sa partikular na file formats (PNG, JPG, PDF, and at iba pa).

“Akoý isang dev, Hindi ako kailanman gumamit ng Sketch!”

Sa mga nakaraang taon ang mga designers ay natutong makipag-kolaborate sa isa’t-isa gamit ang tools gaya ng InVision, Ngunit ang platform na ito ay kulang pa rin sa features kung saan ay pinahihintulutan nito ang quick design at ipasa sa development team.

Hindi natin dapat hingin sa mga developers na maging eksperto sa parehas na tools designers na gamitin upang i-angkop sa produkto.  Building a “specifications document” every time they hand over a design is far from being “agile”, and can mean a lot of wasted time between handing over designs and having to iterate if need be.

Ang Zeplin 

Sa nasabing ito dito na pumapasok sa eksena ang Zeplin.

Ang Zeplin ay isang collaboration tool para sa UI designers at front end developers.  Itoý lumalagpas pa sa design workflow at itoý tumutulong sa design hand-off.

Hinahayaan nito ang mga designers na mag-upload ng kanilang wireframes o visual designs diretso magmula sa Sketch at idagdag ang mga ito sa project folders sa Zeplin. Ang maganda dito ay?  Annotations ay awtomatikong madadagdag sa mga disenyo (sukat, kulay, mardyin at kahit mungkahi ng CSS para sa mga may tiyak na elemento) kung saan ay mag-iiwan ito ng online repository na ang buong pangkat ay maaring makapag-ambag din.

“Ang Zeplin ay gumagana ng mahusay bilang isang pinagmumulan ng katotohanan, kapag ginamit nang ganun.

At saka, dahil sa itoý  mayroon bilang isang standalone app pati na rin bilang isang web app, maaari mo nang mabuksan ito saanman. Nagiging madali upang suriin ang mga disenyo at mga bagay gaya nang pagitan, sukat, kulay, at iba pa.” – Javascript developer @NOW TV, Sky

Pag-export ng disenyo mula sa Sketch patungo sa Zeplin

Ang Zeplin ay gumagana bilang isang plugin sa loob ng sketch, kung kaya’t ang pag-upload ng disenyo ay isang pindot lamang.

Narito kung paano simulan ang proyekto:

Pagsimula sa proyektong Zeplin
  1. Mag-download ng Zeplin (mac lamang) at i-install. Ang mga Developers ay di na kailangan patakbuhin ang OS X dahil ang kailangan lang nila mabuksan ay ang web-based tool upang makuhang matignan ang nilalaman.
  2. Paglikha ng proyekto.
  3. Piliin ang platform na iyong na-disenyuhan.
  4. Pangalanan ang proyekto (siguraduhin na piliin ang pangalan na pamilyar sa buong pangkat).
Export from Sketch
Pag-export mula sa Sketch

Sa loob ng Sketch, Piliin ang indibidwal na bagay at gawin itong exportable. Ito ay magpapahintulot sa iyong dev team na mag-export ng bawat elemento mamaya mula sa Zeplin. Narito kung paano ito gumagana:

  1. Sunod, piliin ang artboards na nais mong i-upload sa Zeplin.
  2. Pumunta sa Plugins  >  Zeplin  >  Export Selected Artboards.
  3. Piliin ang proyekto kung saan ay nais mong i-upload ang iyong disenyo, pagkatapos ay pindutin ang Import.

Pagtatrabaho sa pamamagitan ng Zeplin

Pagka nasa Zeplin na, maari mo nang i-navigate sa pagitan ng iba’t-ibang proyekto at madali nang tuklasin ang lahat ng mga bagay bagay na nakapaloob rito. Ang pagtuklas tungkol sa mga detalye ng ilang tiyak na elemento ay isang sapantaha; piliin ang elemento na iyong gusto, pagkatapos ay ang mga may kaugnayan na impormasyon ay makikita sa kanang kamay na bahaging gilid na hanay.

Developers: narito kung paano ito gumagana, pag-nabuksan mo na ang web-based tool at nag-signed in:

  1. Piliin ang bagay na nais mong suriin.
  2. Tumingin sa kanang kamay na bahaging gilid ng hanay para sa mga detalyadong impormasyon gaya ng estilo ng letra, kulay, at kung ano-ano pa (ang mga impormasyon ay ilaladlad ayon sa mga bagay na iyong pinili).
  3. Kopyahin ang mga iminungkahing CSS.

Kung ang mga design team ay pinayagan para sa exportable elements kung mag-import ng disenyo sa Zeplin, ang development team ay dapat na magawang mag-export ng indibidwal na assets. Ang mga Assets ay magkakaroon para ma-download sa SVG format at tatlong magkakaibang PNG sizes.

  1. Dito ay maari kang magdagag ng talaan at mga komento sa mga disenyo.
  2. Dito ay maari kang mag-kopya at ibahagi ang project link, at sa malamang ay ipagsama ito sa Slack channel ng pangkat upang makakuha ng mga abiso o imbitahin ang ibang miyembro ng pangkat upang makipagtulungan!

Bakit kailangan ang pangkat mo ang gumawa ng hakbang

Ang pagtatrabaho sa pamamagitan ng Zeplin ay maraming pakinabang, narito ang ilang mga halimbawa:

  • Maiiwasan mo nang gumawa ng ng specs document; isang bagay na hindi maliksi o madaling i-update.
  • Lumikha ng agarang annotated designs na naglalaman ng lahat ng kaugnayang impormasyon para sa developers at ibang designers.
  • Maari kang mag-likha ng exportable designs, para ang mga developers ay mabilis na makaka-access sa indibidwal na assets.
  • Maglikha ng kahit gaano karaming proyekto na gusto mo. Pagkatapos ay i-upload at mai-update sa pamamagitan ng ilang pindot lamang.
  • Maglikha ng style guides na makakatulong sa mga design team upang mapanatiling naaalinsunod.
  • Samantalahin ang Slack integration, agarang nag-aabiso sa iyong pangkat tuwing mayroon update.

Subukan mo!

Ang pagtatrabaho sa pamamagitan ng Sketch at Zeplin ay isang magandang paraan para sa mga designers upang makipag-tulungan nang magkakasundo sa mga developers. Ang aking pangkat ay gustong magkakatrabaho ng ganito – Nais kong marinig ang iyong mga saloobin at mga karanasan sa mga tools na ito!

Useful Links

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.