จาก Sketch สู่ Figma — เพราะอะไร ทีม Designer ถึงเลือกที่จะเปลี่ยน

บอกเล่าประสบการณ์การย้ายเครื่องมือออกแบบของทีม Designer จากทีม Beacon Interface

ก่อนจะรู้เหตุผลว่าทำไมทีม Designer ถึงเปลี่ยนจาก Sketch ไป Figma ขอแนะนำตัวเองกันนิดนึง ชื่อแหม่มนะคะ เป็น UX/UI Designer ในทีม Beacon Interface ซึ่งทีมของเรา ถือได้ว่าเป็นทีมนักออกแบบของบริษัท KBTG ค่ะ โดยจะแบ่งหน้าที่การทำงานด้วยกันหลายส่วน ดังนี้

1. User Research: Discovery Research
2. Design: CI/Visual Design, UX Design และ UI Design
3. Technical Design

ขอเล่าคร่าวๆ ถึงเครื่องมือออกแบบของทีมเราสักนิดค่ะ ก่อนหน้านี้ที่เราเลือกใช้จะมี Sketch (ในการออกแบบงาน UI ทั้งหมด) ➡️ Abstract (สำหรับเป็น Version Control) ➡️ Overflow (สำหรับการทำ Workflow เพื่อสื่อสารกับทาง Digital Business และ Developer) ➡️ Zeplin (ส่งต่องานให้กับ Developer)

จากประสบการณ์ส่วนตัวคิดว่า 4 เครื่องมือที่กล่าวมามีทั้งข้อดีและข้อเสีย ดังนี้

ข้อดี

1. Sketch เป็นโปรแกรมที่ค่อนข้างเสถียรและมีระบบจัดการ Library ที่ดี
2. สามารถไล่ย้อนดู Version การออกแบบได้บน Abstract
3. Overflow สามารถสร้าง Workflow และปรับเปลี่ยน Screen หรือ Flow ต่างๆ ได้ง่ายมาก เพราะเส้นจะติดกับ Screen ที่เราลากไว้แล้วตลอด
4. Upload ส่งต่องานทั้งรูป เนื้อหา และ Elements ต่างๆ บน Screen ผ่าน Zeplin ให้ Developer ได้เลย

ข้อเสีย

1. ทำงานหลายคนในไฟล์เดียวยาก เมื่อทำงานใน Sketch ไฟล์เดียวกัน จะไม่สามารถทำตรงจุดเดียวกันได้ เพราะเวลา Upload ขึ้น Abstract จะเกิด Conflict
2. การใช้งานของ Abstract ค่อนข้างซับซ้อน เหล่า Designer ที่ไม่เก่งเรื่องทางเทคนิคจะสับสนง่ายมาก เช่น จะทำงานใหม่ต้องแตก Branch, ทำเสร็จแล้วต้อง Merge Branch เป็นต้น
3. ตัว Abstract เวลา Merge แต่ละครั้งใช้เวลาค่อนข้างนาน (เพราะไฟล์ใหญ่มาก) บางครั้งนานเป็นครึ่งชม. และสุดท้ายก็ต้องมี 1 คนที่รับหน้าที่ Merge ขึ้น Master File อีกที

จุดเปลี่ยน

หลังจากเกริ่นนำไปพอสมควร ก็ถึงเวลาเข้าสู่เหตุผลที่ทำไมทีมเราถึงเปลี่ยนจาก Sketch ไป Figma กันค่ะ ย้อนกลับไปประมานเกือบ 2 ปีที่แล้ว ทีมได้รับมอบหมายให้ทำฟีเจอร์ตัวใหม่ของ K PLUS คือ ‘โอนเงินเป็นกลุ่ม’ และ ‘จัดการเช็ค’ ที่ออกมาให้ทุกคนได้ใช้กันแล้วตอนนี้

หลังจากออกแบบเสร็จสิ้น ทางทีมต้องการทำ Usability Testing เพื่อให้มั่นใจว่าลูกค้าเข้าใจและสามารถใช้งานรูปแบบใหม่นี้ได้จริงๆ และเราต้องการทำ Prototype ให้เหมือนแอปจริงมากที่สุด เพราะต้องการรับรู้ประสบการณ์จากการใช้งานถ้าฟีเจอร์นั้นอยู่บนแอป K PLUS จริงๆ ทั้งนี้ติดตรงที่ว่า Sketch ไม่สามารถทำ Prototype ให้ตรงกับความต้องการของทีมได้ จึงต้องหาเครื่องมือตัวใหม่ที่จะเข้ามาแก้ไขปัญหาในจุดนี้ ตอนแรกเราเริ่มจาก Adobe XD แต่เมื่อลอง Import ไฟล์จาก Sketch เข้าไปแล้วมันพังมาก น่าจะเสียเวลาแก้ไขพอๆ กับทำใหม่ แหม่มจึงลองเสนอ Figma กับทีมดู เพราะเคยใช้ตอนสมัยเรียน ปรากฏว่า Screen ไม่ค่อยพัง และทำ Interaction ของ Prototype ออกมาได้ดีและลื่นมากๆ แถมทำพร้อมกันได้อีกด้วย เลยช่วยกันปั่นตัว Prototype จนสำเร็จได้ภายใน 2 วัน ในวันที่ออกไปทำ Usability Testing ก็ให้ User เล่นผ่านมือถือ แล้วเราคอยควบคุม Screen ผ่านคอมพิวเตอร์ได้เลยค่ะ

ตัวอย่าง Prototype ที่เรานำไปทำ Usability Testing

หลังจากจบโปรเจ็ค คนในทีมก็เริ่มติดใจ มองว่าการช่วยกันทำพร้อมกันส่งผลให้งานเสร็จเร็วขึ้นจริงๆ และเห็นว่าเป็นโปรแกรมที่น่าจะมี Plug-in และ Community ออกมารับรองการใช้งานต่างๆ มากขึ้นในอนาคต จึงติดต่อทาง Figma ปรึกษาถึงแพลนที่เหมาะสมกับการทำงานของทีมเรา และได้ Trial ตัว Organization Plan มาทดลองใช้ฟรี 30 วัน

ทางทีมได้เริ่มจากโปรเจ็ค K PLUS ก่อนเพราะมองว่าเป็นโปรเจ็คหลักและใหญ่ที่สุด ถ้า Figma สามารถทำได้ดี โปรเจ็คอื่นๆ ก็คงสบายมาก และไหนๆ ต้องมีการปรับ แก้ไข Component ต่างๆ อยู่แล้ว ก็ถือเป็นฤกษ์ดีที่จะทำ K+ Design System ใหม่ด้วย ในช่วงแรกมี Designer ช่วยกันทำ Design System และย้ายไฟล์จาก Sketch ประมาณ 3 คน มี พี่นนท์ mp3wizard (Senior Designer) พี่วิน Win Shanokprasith (Advanced Designer) และตัวแหม่มเองค่ะ ในขณะที่คนอื่นทำงานด้วย Sketch คู่ขนานกันไป เมื่อทุกอย่างเริ่มลงตัวและคิดว่าการทำงานด้วย Figma ดีกว่า Sketch จริงๆ ทีมจึงตัดสินใจซื้อ Organization Plan และทยอยย้ายโปรเจ็คอื่นๆ เข้ามาทำงานใน Figma แทนค่ะ

ปัจจุบัน

Project บางส่วนของทีม Beacon Interface

ตอนนี้ทุกโปรเจ็คของเราทำบน Figma โดยสมบูรณ์แล้วค่ะ ทุกคนอาจจะมองว่า Figma เป็นโปรแกรมสำหรับออกแบบ UI อย่างเดียว แต่เชื่อไหมคะว่าทีมเราใช้ทำตั้งแต่ Brainstorm ไอเดีย, จัด Workshop, ทำ Presentation, Design System, UI, Prototype และแสดง Workflow สำหรับคุยกับทีมอื่น เรียกได้ว่าเป็นทุกอย่างให้ทีมแล้ว สุดท้ายนี้ขอสรุปข้อดีและข้อเสียที่เจอหลังจากใช้งาน Figma มาค่ะ

เราใช้ทำตั้งแต่ Brainstorm ไอเดีย, จัด Workshop, ทำ Presentation, Design System, UI, Prototype และแสดง Workflow สำหรับคุยกับทีมอื่น

ข้อดี

1. สิ่งที่แข็งแกร่งมากๆ ของ Figma คือการทำงานร่วมกันพร้อมกันได้ เห็นเลยว่าใครกำลังขยับอะไรอยู่หรือแก้ไขอะไรไปบ้าง
2. ใช้งานง่าย สำหรับคนเคยใช้ Adobe XD หรือ Sketch มาก่อนสามารถเริ่มทำงานเลย เพราะการใช้งานเครื่องมือแต่ละอันไม่ค่อยแตกต่างกัน
3. ทีมอื่นเข้ามารีวิวได้ เพราะแชร์ลิงก์ง่าย และทำงานบนคอมเครื่องไหนก็ได้ รองรับทั้ง Windows และ Mac
4. ทำ Prototype สำหรับนำเสนอทีมอื่น หรือ Usability Testing ง่ายและลื่นไหลมาก
5. มี Version History ในตัว ย้อนหลังได้ 30 วัน
6. Auto Save ตลอด ไม่ว่าจะไฟตก คอมดับ งานก็จะไม่หาย
7. โปรแกรมมีการพัฒนาตลอด ทั้ง Auto Layout, Variants, Design System เป็นต้น ซึ่งเป็นส่วนสำคัญที่ทำให้เราทำงานง่ายและดีขึ้นในทุกๆ วัน

ข้อดีเพิ่มเติมสำหรับ Organization Plan

1. เห็นภาพรวมทั้งหมด ว่ามีกี่ Project ใครทำอยู่บ้าง
2. สามารถสร้าง Design System กลางของ Project เพื่อให้ทุกไฟล์ดึงไปใช้ได้
3. แชร์ฟอนต์ได้ แม้แต่ละเครื่องจะไม่มีฟอนต์นั้นลงอยู่ก็ทำงานได้
4. มี Design System Analytics ให้เราไปดูได้ว่า Component นั้นใช้ที่ไฟล์ไหนบ้าง ทีมไหนเข้ามาใช้บ้าง เป็นต้น

ข้อเสีย

1. ราคาแพง (Organization Plan) ถ้าลองคำนวนราคาต่อคนต่อเดือนแล้ว Figma $45 > Sketch + Abstract $20.75 (ในปัจจุบันทีมเรานำ Figma เข้ามาใช้งานแทนแค่ Sketch และ Abstract)
2. ส่วนตัวคิดว่างานด้าน Visual หรือ Graphic Design บางอย่าง ตัว Adobe Illustration หรือ Adobe Photoshop ยังสามารถทำได้ดีกว่า

บทส่งท้าย

ตอนนี้ทุกคนในทีมมีความสุขกับการใช้งาน Figma กันมากค่ะ บางครั้งทีมเรามีการจัด Workshop เล็กๆ ไว้สอนการใช้งานพื้นฐานให้กับทีมอื่น และอัพเดตพวกฟีเจอร์ใหม่ๆ ให้คนภายในทีมกันด้วยค่ะ

แล้วทีมของคุณเป็นยังไงบ้างคะ…? มาแชร์ให้ฟังกันได้นะคะ

สำหรับชาวเทคคนไหนที่สนใจเรื่องราวดีๆ แบบนี้ หรืออยากเรียนรู้เกี่ยวกับ Product ใหม่ๆ ของ KBTG สามารถติดตามรายละเอียดกันได้ที่เว็บไซต์ www.kbtg.tech