มหากาพย์ย้ายงาน Sketch to Figma ต้อง Clean Flow&Artboard มากกว่าเดิม
ในครั้งนี้ผมกำลังจะเล่ามหากาพย์การย้ายไฟล์งานอันสำคัญของออฟฟิศ จากโปรแกรม Sketch ไปสู่ Figma แบบเต็มตัว แบบต้อง Clean Flow&Artboard มากกว่าเดิม ถามว่าทำไมต้องย้าย แน่นอนว่า Tool ต่างๆ มีการพัฒนาตามเทคโนโลยีทุกวัน Designer อย่างเราก็ต้องพัฒนาตัวเองและอัพเดทตามสถาณการณ์ปัจจุบัน และทีมเราก็เห็นสมควรร่วมกันว่าตอนนี้กำลังเหมาะสมแก่การย้ายแล้ว.
จริงๆ แล้ว ทีม Designer เราได้ใช้ Figma มาตั้งแต่ปี 2016 แล้วล่ะครับ แต่ตอนนั้นเราตัดสินใจกันว่าจะย้ายไปทำเฉพาะโปรเจ็กใหม่ เหตุผลเพราะ มัน Collaborative กันได้ตัวไฟล์ก็เบากว่า การ Backup Version Control ก็แจ่มแมว อะไรๆ ก็ดีไปหม๊ดดดดเสียอย่างเดียวคือไม่มีอินเตอร์เน็ต ทำงานไม่ได้เลยจร่ะ ซึ่งปัจจุบันก็ยังเป็นอยู่ แต่ถ้าเราต่ออินเตอร์เน็ตแล้ว ใช้งานได้นะแต่ไม่เซฟนะจร่ะ ระวังกันด้วย..
ส่วนโปรเจ็กเก่าก็ยังต้องคอยปรัปปรุงกันไปผ่าน Tool ตัวเดิม เพราะเรายังไม่อยากให้เกิดปัญหาระหว่างการส่งต่อ หรือเคลื่อนย้ายแพลตฟอร์มทำงาน เดี๋ยวกลัวว่าจะมีเซอร์ไพรส์ (ไม่ค่อยชอบเซอร์ไพรส์สักเท่าไร 🤣) หากใครยังไม่ได้เคยอ่านบทความเกี่ยวกับ Figma เชิญทางนี้ครับ
เข้าเรื่องกันเลยดีกว่า
มาถึงเรื่องตัวงานกัน งานนี้เริ่มทำตั้งแต่ปี 2016 จนถึงปัจจุบัน เล่าคร่าวๆ ว่ามันเป็นโปรแกรมคำนวณเกี่ยวกับอสังหาริมทรัพย์โดยเป็นโปรแกรมใหญ่แล้วแบ่งเป็น Module ย่อยๆ ในตัวอีกหลายโปรแกรม ด้วยเหตุนี้เองจึงทำให้ผมจำเป็นจะต้องแยกไฟล์ Sketch ในการทำงานตอนนั้นเป็นสองไฟล์ใหญ่ๆ บวกกับตอนนั้นใช้ Abstract ในการอัพเดทเพื่อ Backup Version Control ไฟล์ จึงทำให้มีปัญหามากๆ เรื่อง Component ทับซ้อนระหว่างสองไฟล์และเวลาในการ Backup ไฟล์เก็บไว้ มันทั้งใหญ่และเสียเวลาในการอัพมาก เพราะตัว Abstract เองก็ต้องใช้เวลาในการ Compare และ Preview Component ทั้งสองไฟล์นี้ กว่าจะอัพเดทแต่ละครั้งก็ล่อไป 30 นาที ต่อการอัพเดท
รวมทั้งหมดแล้ว 4 Modules 81 Artboards ยังไม่นับ State UI และมหาชิ้นส่วน Lego Component ต่างๆ อีกที่มีอีก… โอเคเรามาเริ่มยกกล่อง Lego เอามาจัดกันใหม่ดีกว่า
(เนื่องจากตัวงานจะเป็นความลับของทางบริษัท ภายในบทความนี้ผมจึงจำเป็นต้องต้องปิดบังเนื้อหาบางส่วนตามความเหมาะสม คิดซะว่าดูงาน Art แล้วกันนะครับ🤣)
ตามที่เล่าไปข้างต้นว่าตัวผมเองได้แบ่งไฟล์งานเป็นสองไฟล์ด้วยขนาดที่ใหญ่ ผมขอเรียกไฟล์เก่าว่า ไฟล์ 2016 ส่วนไฟล์ใหม่ ขอเรียกกว่าไฟล์ ปี 2018 แล้วกันนะครับ เริ่มจากการ Import ไฟล์ 2018 ก่อน ตอนแรกก็ค่อนข้างกังวลว่าตัวโปรแกรมเองจะ Support Component ที่ทำไว้หมดหรือป่าว เพราะว่าก่อนหน้านั้นช่วงปีต้นปี 2017 เคยทดลองโยนไฟล์ Sketch เข้า Figma ไป แต่เกิดการผิดรูปของ Component ที่โยนเข้าไป Text ไม่เจอ Pin Constraints ไม่ตรง ตำแหน่งเบี้ยว Sub component ที่เอาไปเรียกใช้ก็ ผิดประเภท Layer สร้างซ้ำซ้อนกันแล้วซ้อนกันอีก แต่!!…ปรากฏว่าการโยนเข้าไปครั้งนี้ สมบูรณ์ดีมาก Component ที่เรียกใช้ทำงานปกติดี ชื่อก็มาครบ เลเยอร์ก็ไม่มีการซ้อนทับเกิดขึ้น น่ารักมากจริงๆ ไม่ต้องแก้ 🤪 สงสัยเพราะตัวโปรแกรมถูกแก้ไขแล้ว
ต่อไปก็เป็นตัวเก่า ไฟล์ปี 2016 หลังจาก Import เจอปัญหาตามมานิดหน่อยเช่น Font หายทั้งๆ ที่ฟอนต์ก็ใช้ตัวเดิม Constraints ไม่ตรงกับตัว Component ที่เรียกใช้ Bound icon อยู่ผิดที่ผิดทาง ฟีเจอร์ Dynamic Text กับ Object ของ Sketch ก็เอามาใช้ไม่ได้ สรุป…ต้องมานั่งจัดระเบียบใหม่
แต่ก็ยังดีที่ค่อนข้างจะทำ Design system มาดี ทำให้การแก้ไขงานเป็นไปได้อย่างราบรื่น ไม่เจอปัญหาอะไรที่ยุ่งยากในการจัดชิ้นส่วนที่กระจัดกระจายอยู่ในกลับมาเข้าที่เข้าทางเหมือนเดิม
Clean & Flow กว่าเดิม
เมื่อเราทำการ Import ไฟล์เรียบร้อยแล้ว จัดการตัวงานเป็นระเบียบเรียบร้อยแล้ว เราก็มาถึงขั้นตอนการทำให้ Artboard Clean & Flow ที่สุด เพื่อการจัดการ หรืออาจจะเป็นการส่งต่องานให้แก่คนอื่นมาทำงานต่อเราได้อย่างไร้สิ้นปัญหา พร้อมที่จะอัพเดทหน้าตาผู้ใช้งานใน Sprint ต่อไป (เวลาเราลางานไปเที่ยวจะได้มีคนเข้ามาทำงานแทนได้ แหะๆ) อ่านมาถึงตรงนี้หากมีคนสงสัยว่าทำไมต้องทำให้ Artboard มัน Flow หรือ Component เป็นระเบียบด้วย มันจำเป็นขนาดนั้นเลยหรอ คำตอบคือจำเป็นมากครับ
สำหรับการทำงานเป็นทีม จริงๆ การทำงานคนเดียวมันก็จำเป็นแล้วล่ะครับ ไม่จำเป็นจะต้องเป็นทีม โปรแกรมแต่ละโปรแกรมมันอาจจะทำงานคล้ายๆ กันก็จริง แต่มันก็จะมีภาษาระบบของโปรแกรมเฉพาะของมัน เราจึงต้องซ่อมไฟล์เพื่อรองรับการทำงานของโปรแกรมนั้นๆ และรองรับการทำงานของคนในทีมด้วย บ่นมาเยอะแล้วเข้าเรื่องเลย ไหนลองดูหน่อยว่า Userflow ที่ได้ทำไว้ มาครบหรือป่าว
พอดู Link Prototype ที่ทำไว้ก็นิ่งไปสักพัก เพราะว่ามันไม่ติดมาด้วยเลย 😨 เหงื่อซึม ซ้ายมือคือโปรแกรม Sketch ที่ทำ Link Prototype เอาไว้ ส่วนขวามือคือไฟล์ที่จัดเรียบร้อยแล้ว แต่ไม่เป็นไรยังไงตอนแรกก็มีความคิดว่าจะ Clean ไฟล์อยู่แล้ว เลยจะแบ่งประเภท Artboard แล้วจัดทำ Link ใหม่ซะเลย
พอเราเอา Artboard ทั้งหมดมาวิเคราะห์ดูแล้ว มีประมาณ 16 หน้าที่เป็น Over State
ตัวอย่างเช่นการแสดงผลเวลา Loading การแสดงผลเมื่อไม่เจอข้อมูล หรือ การแสดงผลหลังจากอัพโหลดไฟล์เข้าไปแล้ว หากใครยังไม่เข้าใจ หรือนึกภาพไม่ออก สามารถเข้าไปอ่านเกี่ยวกับ State ต่างๆ ที่แอปพลิเคชันควรมี ได้ที่บทความข้างล่างนี้เลยครับ
จาก Flow ทั้งหมดแล้ว ผมคิดว่าสามารถลด Artboard ที่เป็นประเภท State ไปได้อีก เนื่องจากโปรแกรม Figma ในส่วนของ Prototype Interaction มีระบบที่ชื่อว่า Overlay และ Swap สำหรับรับรองการทำ Flow ให้ Clean ขึ้น ลบพื้นที่อันสิ้นเปลืองออก ซึ่งการทำ Prototype ส่วนนี้ยังเป็นจุดบอดของ Sketch อยู่ ผมจะมาอธิบายให้ฟังว่ามันทำงานยังไง
ปกติแล้วเวลาเราทำ Prototype ใน Sketch หากงานของเรานั้นมี State ที่ละเอียดเราจะต้องทำ State นั้นเป็นทั้งหน้าเต็มในขนาดเท่าๆ กัน เพื่อแสดงการทำงานของ Userflow ยกตัวอย่างเช่น ผมทำหน้าส่วนของการ Upload file เอกสาร จะต้องเริ่มที่
Ideal State (พร้อมใช้งาน) > Loading(แสดงการโหลดหลังจากส่งไฟล์) > Upload Done(แสดงรายการไฟล์ตอนโหลดเสร็จแล้ว) > Hover(แสดงการลบไฟล์เมื่อเอา Mouse อยู่ใกล้) แต่หากเราใช้ระบบ Overlay หรือ Swap ของทาง Figma เราจะสามารถลดจำนวนการใช้และขนาด Artboard ลงได้ นั่นแปลว่าจะทำให้ Flow เรากระชับขึ้น ไฟล์งานเราก็จะเล็กและเป็นระเบียบมากขึ้นด้วย
เมื่อเราใช้ Overlay และ Swap ผลที่ได้คือ เราไม่จำเป็นจะต้องทำหน้าเต็มของ State ที่เหลือ เราแค่ทำ Artboard ในส่วน State ที่ต้องการแสดงผลเท่านั้น เมื่อเทียบกันแล้วจะเห็นได้ชัดว่าเราลดขนาดและจำนวน Artboard ลงไปด้วยการใช้วิธีนี้ สบายตาและเข้าใจง่ายขึ้นเยอะเลย ดีใจ😜 หากยังเห็นภาพไม่ชัดว่า มันจะทำให้งานของเรานั้น Clean ขึ้นจริงๆ หรอ เพราะตัวอย่างที่ผมทำให้ดูอาจจะมีจำนวน Artboards ที่น้อยอยู่
ที่นี้ผมจะลองเปรียบเทียบเป็นภาพ Module ใหญ่ๆ ให้เห็นหลังจากที่ได้ทำการ Link Prototype ใหม่ให้ดูครับจะได้เห็นชัดขึ้นผลลัพธ์จากการ Clean มากขึ้น
ตัวอย่างรูปเปรียบเทียบเพื่อให้เห็นภาพชัดขึ้นเมื่อเราใช้งานกับโปรเจ็กจริง รูปข้างบนโปรแกรม 1 Module สังเกตกรอบสีส้มที่ผมวงไว้ คือหน้าที่เป็น State ต่างๆ เช่นการกดแล้วแสดง Dropdown, Popup, Hover, Checking
เมื่อถูก Clean ใหม่ จะสังเกตได้ว่ากรอบสีส้มในรูปที่เป็นการแสดง State ต่างๆ เหลือแค่นิดเดียวตามในกรอบสีส้มที่ผมครอบไว้ จำนวน Artboard ก็น้อยลง ทำให้เราเห็นมุมมอง Overview ในตัวงานชัดเจนมากขึ้น ลองเอาไปใช้ดูนะครับ การทำงานจะแฮปปี้ขึ้น คนมาทำงานต่อเราก็แฮปปี้ด้วยครับ 😂
ปัญหาสุดท้ายคือการเชื่อมต่อระหว่าง Module
อย่างที่เล่าไปข้างต้นว่า ตัวโปรแกรมใหญ่มาก และมีโปรแกรมย่อยแบ่งเป็น Module ข้างในอีก เวลาส่ง Prototype เล่น ผมจะส่งไปแค่ลิงค์เดียวจบเพื่อที่จะได้ทดสอบเสมือนจริงที่สุด เหมือนเข้าใช้งานโปรแกรมจริง ซึ่งนักออกแบบหลายๆ คนก็น่าจะทราบในข้อนี้ดีว่าตัวโปรแกรม Sketch เองได้พัฒนา Feature Prototype มาดีมากในการเชื่อมต่อระหว่าง Module
จากรูปตัวอย่างจะเห็นได้ว่า Sketch สามารถ Jump Prototype Link ข้าม Page ได้ และเราสามารถเลือกได้อีกว่า จะให้เริ่มหน้าไหนใน Page นั้นๆ โดยการกด (W) ลากไปวางใส่เครื่องหมาย Open new tab ที่ผมวางกรอบสีส้มไว้ในรูป Icon นี้จะแสดงอยู่มุมขวาบนของ Artboard เราเสมอ เมื่อเลือกใช้งาน Prototype Tool เมื่อเราลากไปวางก็จะแสดง UI รายชื่อ Artboard ในเพจนั้น และสามารถเลือกได้ว่าจะให้กระโดดไปหน้าไหน แต่!!… ตัว Figma ที่เราทำการย้ายยานแม่มาดันไม่มี Feature การกระโดดข้ามเพจให้เหมือน Sketch นะสิ…เวรกรรม😓
แต่ก็ไม่ใช่ว่าจะทำไม่ได้เลย มันมีวิธีอยู่………. วิธีก็คล้ายๆ Sketch ครับให้เราเข้าไปในหมวด Prototype แล้วลากจุดไปปล่อยบริเวณใต้ปุ่ม Back มันก็จะเป็นการใช้ URL ในการเปิด Link แทน
ที่ติดใจก็คือทำไมต้องทำคีย์ลัดให้มันลึกลับเบอร์นั้นด้วยไม่เข้าใจ 😆 จะลากไปวางที่อื่นก็ไม่ได้ด้วยนะ ต้องไปวางใต้ปุ่ม Back เท่านั้นด้วยนะไม่งั้นจะไม่ขึ้น (ถ้าใครสงสัยว่า เอ่าาาา แล้วผมรู้ได้ไง…. ผมไม่บอกหรอก เขิล😳)
แต่จะใช้วิธีปกติก็ได้ครับ เมนูจะอยู่มุมขวาบนของ Action ตอนเราเลือกอยู่ในหมวด Prototype
เราก็เลือก Action เป็น Open URL แล้วให้เราทำการไปก็อบลิงค์ของ Page แรกของ Module นั้นมาแปะไว้ เราก็จะสามารถ Jump ข้าม Module ระหว่าง Prototype ได้แล้วครับ แต่ถ้าเทียบแล้วความ Smooth เมื่อใช้งานจริงมันก็ไม่เท่า Sketch หรอกนะ เพราะเมื่อเรากดข้าม Module มันก็จะเปิด Tab ใหม่ให้กับเรา แต่คิดว่า Figma คงมีการพัฒนาให้ดีขึ้นในการอัพเดทครั้งต่อไป (อย่าลืม!! ตอนก็อบ Link มาวางต้องเลือกเป็น Enable link access ด้วยนะครับ ไม่งั้นจะเปิดไม่ได้เด้ออออออออ)
บรรทัดท้ายสุด
หลังจากการย้ายยานแม่ในครั้งนี้ก็ผ่านไปได้ด้วยดี ตัวงานก็ Clean ขึ้น Flow เข้าใจง่ายกว่าเดิม State ก็ทำได้ละเอียดมากขึ้น ผมหวังว่าการที่ผมมาเล่าประสบการณ์เกี่ยวกับการย้ายไฟล์อันสำคัญ ให้ Safety และต้อง Clean Flow กว่าเดิมในครั้งนี้จะให้ การทำงานแบบเป็นทีม หรือนักออกแบบที่บินเดี่ยวได้วิธีคิดและกระบวนการทำงานที่ดียิ่งขึ้นไปเรื่อยๆ ครับ อย่าลืมว่าโปรแกรมหรือเทคโนโลยีอื่นมีการอัพเดทในทุกๆ เดือนหรือสามเดือนเห็นจะได้ เราจะอัพเดทงาน และพัฒนากระบวนการอยู่ตลอด บันทึกเกี่ยวกับโปรแกรมและกระบวนการทำงานในวันนี้ 06/01/2019 อาจจะใช้ไม่ได้แล้วในอนาคต
สุดท้ายแล้วม้าที่เร็วที่สุดในโลกก็ยังแพ้ลาอยู่ดีครับ เพราะ…ลาไปก่อน แล้วเจอกันใหม่บทความหน้า
สวัสดีปีใหม่ครับทุกค๊นนนนนนนนน 🔫 คิ๊ก ดิ คั่ก คั่ก แบง แบง ตูมตูม 💣
