Sketch + Sympli and the extension of Android Studio
ในมุมมองของนักพัฒนา Application การทำให้ Application ทำงานถูกต้องตาม Logic อย่างเดียวคงไม่พออีกต่อไป เนื่องจากประสบการณ์ + การใช้งาน mobile application ของคนทั่วไปมีมากขึ้น ผู้ใช้เลยมองหาประสบการณ์ดีๆ จากการใช้งาน application พอๆ กับการทำงานที่ถูกต้องของ application เช่นกัน
แล้วเราในฐานะนักพัฒนาจะทำยังไงได้หล่ะ?
ในฐานะนักพัฒนาแล้ว เรามีหน้าที่ทำให้ Application ออกมาตรงกับสิ่งที่ designer ออกแบบมาให้มากที่สุด เพราะเขาเป็นผู้เชี่ยวชาญด้านนี้โดยตรง — แต่เมื่อทำงานร่วมกัน ยิ่งมากคน ยิ่งมากความ อันนี้คือเรื่องจริงที่หลีกเลี่ยงไม่ได้ และยิ่งเป็นคนที่ต่างสายงานกันด้วย เชื่อได้เลยว่าหลายๆ คนคงเจอปัญหาเหล่านี้ไม่น้อย
โค้ดสีอะไร, margin เท่าไหร่, ใช้รูปไหน บลาๆๆๆ — บางครั้งมีการแชร์ไฟล์ใน Google drive หรือ dropbox แล้วมีชื่อตามหลังว่า final, final1, finalfinal, finalฟหกด และอีกมากมาย
วันนี้จะมานำเสนอเครื่องมือที่จะช่วยให้ปัญหาเหล่านั้นบรรเทาลง ย้ำว่าบรรเทาลง ไม่ได้หายไป
บทความนี้เหมาะกับใคร?
- designer
- developer
- financial
จะทำตามบทความนี้ต้องใช้อะไรบ้าง
- Sketch
- Android Studio
- Sympli
- Money
งั้นเรามาเริ่มจากฝั่ง Designer กันก่อนเหอะนะ
ทำความรู้จักกับ Sketch
Sketch คือซอฟท์แวร์สำหรับออกแบบกราฟิกตัวหนึ่งที่ UX/UI desginer ส่วนใหญ่เลือกใช้
Feature เด็ด
- มี Template กึ่งสำเร็จรูปสำหรับ Android app, iOS app, Web app เพียง new from template คุณก็จะได้ Component ต่างๆ พร้อมใช้งาน
- เข้าใจ Developer มันสามารถ Export Asset ที่เหมาะสม ได้ทุก platfrom ไม่ว่าจะเป็น Android, iOS หรือเว็บ และมันยัง export โดยแบ่งเป็น folder (xhdpi, xxhdpi etc.) สำหรับ Android; และแบ่งเป็น 1x 2x 3x สำหรับ iOS ได้ภายใน Click เดียว
- Mirror mirror showing in the phone, มันสามาร Mirror cast แบบ realtime ได้ใน Mobile ทันที ทำให้สามารถเห็น look and feel ของ app ได้เลยทันที
- มีพันธมิตรมากมาย เนื่องด้วย Sketch เป็น App ที่โด่งดัง ดังนั้นจึงมา 3rd party เข้ามาทำ Plugin มากมาย, ไม่ว่าจะเป็น Sympli, Zeplin etc. ซึ่งพันธมิตรต่างๆ ก็มีไว้เพื่อเสริมพลังที่แข็งแกร่งให้ทำ Sketch
แต่ว่าปัญหาดังกล่าวข้างต้นยังไม่หมดไป เราจึงต้องการคนช่วย และคนนั้นคือ Sympli
อะไรคือ Sympli
มันคือที่ที่ Designer เอา File.sketch ไปฝากไว้ แล้วให้ Developer เรียกดูจากเว็บได้ นาจา
ทำไมต้อง sympli
มี plugin สำหรับ Sketch เพื่ออัพโหลด Design ขึ้นไปที่ Sympli และมี Plugin สำหรับ Android Studio เพื่อดาวน์โหลด Assets จาก Sympli แถมยัง Auto Sync ตอน Design เปลี่ยนอีก — ซึ่ง Plugin ที่มาคู่กับ Android Studio ถือเป็น Killer Function ของ Sympli เลยก็ว่าได้
Sympli มี Plugin สำหรับ xCode ด้วยนะ
แค่อ่านอย่างเดียวไม่รู้ เรามาลองกันเถอะ
มาใช้ Sympli + Sketch กันเหอะ
1. มาสร้าง Account ของ Sympli กันก่อน
ไปที่ sympli.io แล้วไปที่ try it for free จากนั้นก็ สมัครไปตามเรื่องตามราวนะ
2. สร้างโปรเจค
หลังการสมัครเสร็จสิ้น Verify email เรียบร้อย ให้เข้าไปที่ https://app.sympli.io/ จากนั้นเราจะเจอหน้าโปรเจคว่างๆ ให้กดปุ่ม new project แล้วเลือกรูปแบบโปรเจคที่ต้องการ
หลังจากเราได้โปรเจคแล้วพักเอาไว้ก่อน
3. Sympli Plugin for Sketch
กดที่นี่เพื่อดาวน์โหลด plugin จากนั้นแตกไฟล์ที่ Download มา และ double click file Sympli.sketchplugin – App Sketch จะเปิดขึ้นมา, ลองไปเช็คที่ menu Plugins → Sympli ถ้าเราเจอคำว่า Sympli แปรว่าเราติดตั้ง Plugin Sketch เสร็จแล้วนะ ยินดีด้วย
4. เตรียมความพร้อมก่อน Export
ก่อนจะเอา Design ไปที่ Sympli มีเรื่องที่ต้องคุย กัน 2 เรื่อง
4.1 Make Exportable
ทำให้แน่ใจว่า Asset ที่เราต้องการ พร้อมที่จะ Export — โดยการเลือก Object ที่ต้องการจะ export แล้ว เลือก make exportable ตามภาพข้างข้าง
ข้อควรระวัง
เนื่องจาก Sketch สามารถ Export ได้หลาย Environment ตรวจสอบให้แน่ใจว่า เราเลือก export สำหรับ Android แล้วหรือไม่ตามรูปข้างล่าง
4.2 Naming Convention
อย่าลืมว่า file resource ของ Android มี Naming convention อยู่; คือ เป็นพิมพ์เล็กทั้งหมด ใช้ _ และตัวเลขได้ แต่ห้ามขึ้นต้นด้วยตัวเลข ดังนั้นควรตั้งชื่อ Object ใน Sketch ให้ถูกต้อง ตอน export จะไม่มีปัญหา
เมื่อเราพร้อม export แล้ว ไป step ต่อไปกันเลย
5. Export โลด
ถึงขั้นนี้แล้ว ให้เราเลือก Art board ที่เราสนใจจากนั้นไปที่ plugins → Sympli → Export to Sympli หรือจะใช้คีย์ลัด cmd + Y ก็ได้
แต่ถ้า Sketch กับ Sympli ยังเวอร์จินกันอยู่ เราต้องทำการ เข้าสู่ระบบก่อนนะ
จากนั้นก็เลือกโปรเจคให้ถูกต้องนะ แล้วกด Export Now
รอ!!!
เสร็จแล้ว ลองเข้าไปเช็คที่ https://app.sympli.io/app#!/projects เราจะเห็นว่าโปรเจคเราจะไม่ว่างเปล่า อีกต่อไป
สำหรับ part designer จบลงเพียงเท่านี้ ต่อไป สำหรับ Developer
มาใช้ Sympli + Android Studio กันเหอะ
1. Sympli Plugin for Android Studio
กดที่นี่เพื่อ Download plugin สำหรับ Android Studio
2. ติดตั้ง Plugin
เปิด Android Studio แล้วไปที่ Android Studio → Preference → Plugins แล้วเลือก install plugin from disk…
จากนั้นก็รอๆๆ
3. เสร็จละ Restart Android Studio + Authenticate to Sympli
เมื่อติดตั้ง plugin เสร็จตัว Android studio จะแนะนำให้ Restart เพื่อใช้งาน Sympli – ทันทีที่เราเปิด Android studio ให้สังเกตตรงแถบด้านขวา เราจะเจอกับ icon Sympli — กดที่ icon นั้น แล้ว log in โลด
4. เลือกโปรเจค
หลังจากที่เรา login เรียบร้อยเราจะเจอโปรเจคที่เราเข้าถึงได้ ณ จุดๆ นี้นาคะ เราสามารถเลือก Auto Sync ไว้ได้นาคะ เพื่อป้องกันการเกิดไฟล์ final 1, final final, final จริงๆ แล้วนะ บลาๆๆๆ — เพราะว่าเราจะได้ Sync file ตลอดเลย
5. Import Design
เมื่อเรากดเข้ามาที่ Project เราจะเจอ Screens ต่างๆ ซึ่งในตัวอย่างนี้มีเพื่อ 2 screens
จากนั้นให้ลองเลือก Screen สักหนึ่งอัน เราจะเห็นรายละเอียดต่างๆ มากมาย ทั้ง size, code สี, Asset ฯลฯ
หลังจากนั้นกดปุ่ม Import → Import Assets
เลือก option ที่คุณต้องการ
เราจะได้ Asset พร้อมใช้ทันที
ถึงตรงนี้แล้ว หาก Designer มีการแก้ Logo แล้ว Update มาใหม่ developer สามารถ import logo มาใหม่ได้เลย โดยไม่ต้องกลัวว่าจะกระทบกับโค้ดเลยนะ
ข้อควรระวัง — การแก้ไขรูปต้องทำที่ group เดิม เพื่อให้ export ออกมาได้ชื่อเดิม, file ใหม่จะได้ replace ของเก่า
สำหรับ Developer แล้ว Sympli คงช่วยแก้ปัญหาได้ไม่น้อย แต่ไม่ได้หมายความว่าปัญหามันจะมันไป — เพราะฉนั้น คุยกันเถอะ ร่วมกันแก้ปัญหานะ
มาใช้ Sympli กันเถอะฝ่ายการเงิน
โอ๊ะ มาถึงตรงนี้ Sympli เกี่ยวอะไรกับฝ่ายการเงิน — เกี่ยวแน่นอนครับ เพราะมันต้อง Subscribe เป็นรายเดือนครัช แค่คิดก็แพงแล้ว 5555
แต่เงินที่จ่ายคุ้มค่ากว่า Mandays ที่เสียไปสำหรับ การหา design ไม่เจอ, การ iterrupt designer เพื่อขอ design, การที่ Design ไม่ตรง final แล้วต้องแก้ไปๆ มาๆ
แน่นอน ถ้ามีเรื่องพวกนี้เกิดขึ้น Mandays ก็จะเพิ่มขึ้นด้วย นั้นหมายความว่า งานจะเสร็จช้าลง การได้เงินจากชิ้นงานนั้นก็จะช้าลง และโอกาสการรับงานเพิ่ม ก็น้อยลงด้วย ยอมลงทุนเถอะครับ :D
สรุป
ไม่ว่าการทำงานร่วมกันกับฝ่ายใดๆ ย่อมมีปัญหาเกิดขึ้น — เป็นเรื่องที่ปกติมาก โดยเฉพาะเรื่องของการสื่อสาร เพราะฉนั้นถ้าเรามีเครื่องมือช่วยให้การสื่อสารมีปัญหาน้อยลง ก็ถือว่าคุ้มกับการลงทุน
การส่งงานข้ามแผนก ก็ถือเป็นการสื่อสารเช่นกัน แน่นอนว่าเครื่องมีที่ใช้ช่วยไม่ได้มีแค่ Sympli แลก็อาจจะไม่เหมาะกับทุกสถานการณ์ — ดังนั้นขอให้เลือกวิธีที่เหมาะที่สุด สำหรับช่วงเวลานั้นๆ ดีกว่าครับ
โดยส่วนตัวเคยใช้ Sympli มาก่อน และรู้สึกว่ามันสะดวกกว่าทุกวิธีที่เคยทำมาเลยเอามาแชร์กัน ส่วนใครมีวิธีอื่นๆ ในการจัดการมาแบ่งปันกันบ้างเนอะ — ขอบคุณครับ
ขอบคุณที่อ่านถึงบรรทัดนี้ — รออะไรอยู่หล่ะ
เอ้าปรบมือ!!!!
