จากแฟนตัวยง Sketch สู่ Figma
ใช้ Sketch มาตั้งแต่ออกมาแรก ๆ ชวนทุกคนที่รู้จักให้ลองใช้มาตลอด 2–3 ปีที่ผ่านมา แล้วทำไมถึงย้ายมาใช้ Figma แทน
ขอเกริ่นเบื้องต้น บทความนี้อิงจากการใช้งาน Sketch ในเวอร์ชั่นเมื่อปลายปี 2018 หลังจากนั้นก็เริ่มย้ายมาใช้ Figma แทน อาจจะมีบางฟีเจอร์ใหม่ของ Sketch ที่รองรับแล้วหรือยังไม่เคยลองใช้งาน
จุดเริ่มต้น Sketch
ทำไมถึงมาใช้ Sketch
ก่อนหน้านี้ใช้ Photoshop มาก่อนและพอต้องทำ UI เยอะ ๆ เข้า พอเห็น Sketch ออกมาและมีความรู้สึกเหมือน Photoshop + Illustrator ผสมกัน และมี Symbol ให้ใช้งาน ก็เลยรู้สึกชอบมากๆ และใช้งานตั้งแต่นั้นเป็นต้นมา ถ้าดูจากบทความเก่าที่เคยเขียนจะมีพูดถึงเรื่องการทำ Symbol, การใช้งาน JSON, การใช้งาน React-Skectapp
ใช้ Sketch ทำอะไรบ้าง
ใช้ทำงานออกแบบแทบทั้งหมด ออกแบบ Graphic, UI, วาดไอคอน, ทำ Diagram, Document ต่างๆ ยกเว้นงานบางอย่างที่ทำไม่ได้ เช่นรีทัชรูปก็จะใช้ Photoshop ช่วยทำงาน
Workflow เดิมเป็นยังไง
ก็จะเริ่มต้นออกแบบบน Sketch และอัปโหลดขึ้น Invision เพื่อ Review + Comment กัน แก้ไขและพอจบแล้วก็จะเอาขึ้น Zeplin เพื่อส่งต่อให้ Developer ทำงานต่อ (ตอนนั้น Invision ก็มีตัว Inspec ให้ใช้พักนึงแล้ว แต่ส่วนตัวก็ยังชอบการใช้งานผ่าน zeplin อยู่)
ผู้ช่วยสำคัญคือ Plugin Craft จาก Invision
ที่คอยช่วยเรื่องการทำ Prototype การ Sync Artboard ขึ้นไป เพื่อให้คนอื่น ๆ ในทีมช่วย Review และปรับแก้ไข และ Sync ขึ้นไปเรื่อย ๆ
จุดเริ่มต้น Figma
เคยลองใช้ Figma ช่วงแรก ๆ ที่ออกมา
หลังจากที่ Figma เปิดตัว ถ้าจำไม่ผิดตอนนั้นจะอยู่บน Browser อย่างเดียว รู้สึกไม่ค่อยประทับใจ เพราะเหมือน Performance จะยังไม่ดี ก็ลองเล่นลองใช้งานอยู่แปปนึงแล้วก็กลับไปใช้ Sketch เหมือนเดิม
กลับมาใช้อีกครั้งเพราะอยากแก้ Workflow ใหม่
ตอนนั้นเป็นช่วงนี้รู้สึกว่าอยาก Setup ตัว Design System ใหม่ ที่อยากเน้นเรื่องการ Collaboration ทั้งในแง่ของ Designer ด้วยกันเอง และการทำงานร่วมกับทีมอื่นๆ เลยปรึกษากันในทีม ตอนแรกก็ลังเลว่าจะใช้ Sketch เหมือนเดิม เพราะเห็นมี Features ใหม่ๆ ที่น่าจะช่วยได้ มี Sketch for Teams ออกมาแต่เท่าที่ดูแล้วยังเป็น Beta อยู่ และระหว่างนี้ก็ลองใช้งาน Figma สลับกับ Sketch ไปด้วย ดูว่าในแง่เครื่องมือ แตกต่างกันขนาดไหน และ Workflow การทำงานจะเป็นยังไงบ้าง
สุดท้ายพี่ Hunt ก็บอกว่า “สิ่งที่สำคัญสุดคือการ Collaboration งั้นเราไป Figma กันเถอะ!”
ช่วงปรับตัวเข้าหา Figma
ด้านเครื่องมือในการทำงาน
จากที่ลองใช้ก็พบว่า Figma ค่อนข้างที่จะทำงานได้เหมือนกับ Sketch (ในเครื่องมือที่ใช้กับงานที่ทำอยู่ประจำ) ที่รู้สึกว่ายังไม่ค่อยทำได้ดีน่าจะเป็นเรื่องการทำงานกับ Vector ส่วนตัวแล้วแล้วรู้สึกว่า Sketch ทำได้เนียนกว่า
เปลี่ยนจาก Symbols เป็น Components
ส่วนตัวเป็นคนที่ค่อนข้างชอบการทำงานด้วย Symbol หรือ Components มากๆ ตรงนี้จะมีรายละเอียดบางอย่างที่แตกต่างกัน เช่นการ Override ถ้าเป็น Symbol ของ Sketch กดเลือกทีเดียว จะสามารถ Override Layer อื่นๆ ใน Symbol นั้นได้ด้วย ตรงนี้รู้สึกว่า Sketch จะสะดวกกว่า
ส่วนบน Figma เราต้องเลือก Components นั้นแล้ว ต่อด้วยการเลือก Layer ข้างในก่อน ถึงจะแก้ไขได้ แต่ตัว Figma สามารถแก้ไข Layer ให้แตกต่างจาก Master Component ได้ ซึ่งตรงนี้ก็แล้วแต่เราว่าจะมองเป็นข้อดีหรือข้อเสีย
ที่แตกต่างอีกเล็กน้อยคือ ตอนที่เราสร้าง Symbol หรือ Components ถ้าเป็น Sketch จะมีหน้า Symbols Page มาให้ ส่วน Figma ตัว Master Components ก็จะเป็นตัวที่เราสร้างนั่นแหละ แปลว่าถ้าเผลอลบไปนี่จบเลย อันนี้ได้คำแนะนำจาก JibJib Saranya ว่าให้แยกหน้าออกมาไว้เก็บ Components ต่างหาก .. ตอนนี้ก็ใช้วิธีนี้อยู่
การทำงานกับฟอนต์
บน Figma เองจะทำงานได้จาก Font จาก 2 ส่วนด้วยกัน คือฟอนต์บนเครื่องเรา และฟอนต์จากทาง Google Font หมายความว่าถ้างานออกแบบเราต้องการใช้ฟอนต์บน Google Font ก็ไม่จำเป็นต้องไปดาวน์โหลดมาลงเครื่อง ก็สามารถเลือกใช้ได้เลย
ที่ไม่ค่อยคุ้น ก็น่าจะเป็นการพิมพ์ข้อความภาษาไทยแล้วถ้าเกิดฟอนต์ที่เราเลือกอยู่ไม่ได้ Support ภาษาไทย ก็จะแสดงฟอนต์ไทยที่เป็น Default ของ Figma ให้แทน
และเวอร์ชั่นล่าสุด ฟอนต์ Thonburi ที่เคยมีปัญหาการแสดงผลบน Figma ตอนนี้สามารถแสดงผลได้ถูกต้องแล้ว
แนวคิดเรื่อง Text Style
ค่อนข้างชอบการจัดการของ Figma มากกว่า Sketch เพราะรู้สึกตรงกับการนำไปใช้งานจริงๆ เพราะมีสิ่งที่จัดเก็บแตกต่างกัน ตัว Sketch เอง จะจัดเก็บมากกว่า Figma โดยจะเก็บพวก Color, Horizontal Alignment และ Vertical Alignment เข้าไปใน Text Style หนึ่งอันด้วย
สมมุติเราต้องการ Text Style ชุดเดียว (Font เดียวกัน ขนาดเท่ากัน) ที่นำไปใช้ 3 จุด ซึ่งมีการใช้สี 3 และมี Alignment ที่แตกต่างกันของแต่ละจุดที่นำไปใช้
ถ้าเป็นบน Sketch เราต้องสร้าง Text Style หน้าตาประมาณนี้ (จะเพิ่มไปเรื่อยๆ)
- title1-red-left
- title1-green-left
- title1-black-left
- title1-black-right
แต่ถ้าเป็นบน Figma เราก็จะสร้าง title1 แค่อันเดียว ที่เหลือเราก็สามารถเปลี่ยนสี หรือ Alignment อิสระต่อกันได้
และถ้านึกถึงตอนที่มีการอัปเดต เกิดเราอยากเปลี่ยน Font Size ของ title1 ขึ้นมา คิดว่าบน Sketch ก็น่าจะเหนื่อยกว่า Figma แน่นอน
การทำ Prototype
บน Figma เองก็สามารถทำ Prototype ได้ด้วยเหมือนกัน เท่าที่ลองทำดูก็สามารถทำได้เยอะพอสมควรเลยทีเดียว
แต่ถ้าต้องการทำ Prototype ที่ต้องทำ Animation ด้วย ส่วนตัวก็จะ Import ไปทำงานต่อบน ProtoPie แทน แต่ก็จะทำเฉพาะ Scene ที่ต้องการลงรายละเอียดจริงๆ
Collaboration ลื่น ไม่สะดุด
การทำงานร่วมกันระหว่าง Designer Team
จากเดิมที่ต้องทำงานผ่าน Sketch การส่งต่องานหรือการอัปเดต Design System จะไม่ค่อยสะดวกมากนัก ตรงนี้ Figma ช่วยเข้ามาแก้ปัญหาตรงส่วนนี้ได้ค่อนข้างดี โดยใช้งาน Figma Organization เพื่อทำงานร่วมกับ Designer คนอื่นๆ
ของที่ต้องใช้ร่วมกัน เช่น สี, Text Style หรือ Components ตรงนี้ตัว Figma เองก็สามารถสร้าง Library ให้ใช้งานร่วมกันกับคนอื่นได้ โดยสามารถ Public ออกไป เพื่อให้ Project อื่น ๆ ใช้งานได้ หรือ Project ไหนที่ใช้งานอยู่ ก็จะมีแจ้งว่ามีการอัปเดต
การทำงานร่วมกันกับทีมอื่น
ส่วนที่ชอบมาก ๆ ของ Figma คือการแชร์ลิ้งค์แล้วแล้วเห็นทั้ง Page ที่เราทำงานเลย คือจะเห็น Artboard แบบเรียง ๆ กันเยอะ ๆ ทีเดียวเลย ไม่ได้ต้องดูทีละ Artboard ทำให้เวลาสื่อสารหรือการพูดถึง Flow จะเห็นภาพรวมเดียวกันทั้งหมด
ระหว่างคุย ถ้ามีปัญหาตรงไหน ที่เป็นประเด็น หรือต้องคุยกันเพิ่ม จะเขียน Note ไว้แถวๆ Artboard นั้นเลย หรือว่าจะใช้การ Comment ของ Figma เองก็ได้
บทสรุป Workflow ใหม่
ขั้นตอนการทำงาน
การทำงานตั้งแต่กระบวนการออกแบบ ทดลองไอเดียต่างๆ การ Communicate ระหว่างทีมต่างๆ เกี่ยวกับงานออกแบบทั้งหมดจะอยู่บน Figma ทั้งหมดเลย ไม่ได้ Switch ไปที่อื่น นอกจาก Scene ไหนที่ต้องการ Prototype ที่มี Animation ตรงนั้นก็จะแยกส่วนไปทำที่ ProtoPie แทน
การส่งต่อให้ Developer เพื่อพัฒนา
ตรงนี้จากที่ลองดูแล้วตัว Figma ที่เป็น Link แชร์ให้คนอื่น ถ้าคน ๆ นั้น Login แล้ว จะสามารถเห็น Layer , ดูขนาด และ Spacing ต่างๆ ได้ รวมถึงการ Copy ตัว Text ของงานได้ทั้งหมดเลย ซึ่งจริงๆแล้ว ก็เพียงพอต่อการทำงานแล้ว
แต่ส่วนตัวยังชอบ Zeplin อยู่ เพราะชอบการแบ่ง Styleguide ของ Zeplin การที่มี Extensions เสริมเพื่อช่วยในการทำงาน การดาวน์โหลด Assets ต่างๆ ยังรู้สึกว่าง่ายต่อการไปพัฒนามากกว่าการดูบน Figma ตรงๆ
สิ่งที่คิดและปัญหาที่พบ
- การทำงานกับไฟล์ SVG รู้สึกว่ายังทำงานได้ไม่ดีเท่า Sketch เช่น ไฟล์ SVG เดียวกันเปิดใน Sketch แสดงผลปกติ เปิดใน Figma แล้วแสดงผลผิด (แต่ถ้าเปิดผ่าน Sketch และ Copy มาที่ Figma จะทำงานได้)
- การทำงานกับรูป Bitmap ขนาดใหญ่มาก ๆ จะมีปัญหา เพราะจะถูก Resize ถ้าขนาดใหญ่เกินที่ Figma รองรับ https://help.figma.com/article/318-working-with-images#faq
