Figma กับประสบการณ์การใช้งานที่ผ่านมา
ชื่อ Tool ตัวนี้มันต้องมีผ่านหูกันบ้างล่ะ
ผมได้รู้จัก Figma ครั้งแรกผ่าน Twitter จำไม่ได้แล้วว่า Designer คนไหนที่ผมตามเขาทำการ Retweet (ต้องกราบขอโทษเลยให้เครดิตไม่ได้ เพราะมันนานมากกกก) ครั้งแรกเมื่อเปิดตัวสิ่งที่เป็นจุดเด่นขายของคือการทำงานร่วมกันเป็นทีมแบบ Real-Time ซึ่งผมก็ไม่พลาดที่จะลองเล่น Tool ใหม่ๆ เสมอ ยังจำได้ว่า ลองเล่นด้วยตัวเองก่อน แล้วยังบังคับให้น้องฝึกงานไปฝึก แล้วยังจะให้ทำงานมาส่งอีกด้วย 🤣
ซึ่งไฟล์แรก เริ่มทำเมื่อ 14 ตุลา 2016 แหน่ะ (ไปขุดมาจนได้) ยังจำได้ว่า Option ต่างๆ ก็ยังไม่เท่า Sketch ด้วย ไม่ว่าจะเป็นเรื่องการ Add Effect ได้มากกว่าหนึ่ง ความ Smooth ของสี และเงา และการวาด Vector เกือบทุกอย่าง เป็นรอง Sketch หมดเลย แต่ข้อดีคือมันสามารถ Import File Sketch เข้ามาได้น่ะสิ แต่ ณ ตอนนั้นก็ยังไม่สมบูรณ์เท่าไร ต้องมา ขุด Layer ลึกๆ เพื่อแก้ไขอยู่ เอาจริงๆเวอร์ชั่นปัจจุบันก็ยังไม่ Perfect เท่าไร แต่ถือว่าทำได้ดีกว่าเดิมเยอะเลย
หลังจากนั้นก็เฝ้ารอการอัพเดทจาก Figma อย่างเรื่อยๆ Figma ก็พยายามอัพเดท Tool Basic ให้เทียบเท่ากับ Sketch เพื่อสะดวกแก่ผู้ที่อยากจะลอง Import งานจาก Sketch เข้ามาทำใน Figma หลังจากนั้นก็มีอะไรอัพเดทตามมาอีกมากมายตัวอย่าง เช่น Prototype Transition, App Mirror Screen ที่มีทั้ง iOS/Android ทั้งๆ ที่ Sketch มี App Mirror ให้แค่ iOS (ลำเอียง😕 จัง) หรือ Team Library(อันนี้เสียเงินรายเดือนนะถ้าจะลองใช้) ซึ่งก็ทำออกมาได้ดี แล้วพัฒนาอย่างต่อเนื่อง จนมาถึงเวอร์ชั่นปัจุบัน ซึ่งตัวผมและทีมเองก็ได้ใช้งานจริงจังกันใน Project เรียบร้อยแล้ว ผลปรากฎว่ามันทำงานได้ดี ลดระยะเวลาการทำงาน และทำการส่งต่อได้ดีทีเดียว ต่อจากนี้ผมจะมาขายของ เอ้ย!! อธิบายข้อดีและข้อเสียจากประสบการณ์การทำงานที่ผ่านมาจากการใช้งานเจ้า Figma ครับ
หลักๆ ที่ทำให้ Figma มันแก้ไขปัญหาการทำงานได้ดีขึ้น คือ Sketch หรือโปรแกรมอื่น มักจะต้องพึ่งพาอาศัย Plugin ต่างๆ ในการเข้ามาช่วยทำงาน โดยที่อาจจะต้องคอยอัพเดทและศึกษาตลอด และอาจจะต้องเสียเวลา Export Import ข้ามระบบกันไปๆ มาๆ อยู่บ้าง ทำให้เกิดช่วงเวลาที่เสียไปโดยเปล่าประโยชน์ เช่น
Prototype และการ Share
จากการทำงานเมื่อก่อนที่ต้องผมต้องทำงานแล้วอัพเข้า Plugin share screen จน Plugin นั้นได้ปิดบริการไป จนมาถึงยุคของ Sketch สามารถ Share Screen ได้ ซึ่งก็ใช้เวลานานมากในการที่ต้องอัพโหลดให้คนอื่นมาดู ไม่พอแค่นั้น ถ้าส่งลิงค์แล้วไม่ได้กด Accress เขาก็เปิดไม่ได้อีก (คนใช้งาน Sketch น่าจะเข้าใจดี) หรือการจะทำ Prototype ซักตัวนึงก็ต้องใช้การอัพเดท ไปสู่บริการอื่นๆ ไม่ว่าจะเป็น Invision Marvel และอีกหลายๆ บริการที่ใช้กัน ถึงแม้ว่าทาง Sketch เพิ่งจะมาร้อนตัว ทำ Prototype ได้ในตัวเองแล้ว ในเวอร์ชั่น 42.2 ที่ผ่านมาก็ตาม แต่จากการใช้งานจริง การ Share Artboard และ Prototypeใน Figma ยังสะดวกและรวดเร็วกว่า เพียงแค่กด Share Figma จากนั้นก็โยนลิงค์ส่งให้คนที่เราต้องการ เขาจะเข้ามาแล้วเห็น Artboard เหมือนหน้าจอที่ Designer เห็นเลย ข้อดีนอกจากโหลดแสดงผลไวแล้ว หากตัวงานมีรายละเอียดมากและ Artboard ที่มีจำนวนเยอะ คนที่มองเห็นงานเราเป็นภาพรวมใหญ่ จะมีความเข้าใจมากกว่าเมื่อเขาได้เห็น Screen วางเป็นภาพรวมใหญ่ มากกว่าที่เขาจะมาเห็น เป็น Screen แยกเป็นหน้าๆ
นอกจากเขาจะเห็นภาพรวมงานเหมือนที่ Designer เห็นแล้ว หากเรากำลังทำงานอยู่ ก็จะแสดงแบบ Realtime เขาจะเห็น Mouse เราวิ่งๆ บนจอเลยนะ (ข้อดีหรือไม่ดี อันนี้ไปคิดเอาเอง ฮ่าๆ) และหากเราทำ User Flow ไว้แล้ว คนที่เข้ามาดู สามารถกดปุ่ม Play ขวาบน เพื่อลองเล่น Prototype หรือ Test Userflow ได้เลย ไม่ต้องส่งลิงค์สอง ลิงค์สามที่ทำใหม่สำหรับ Prototype อีกด้วย Link เดียว จบ!! แล้วคำถามยอดฮิตที่คนทำ Prototype จะโดนบ่อยๆ อีกหนึ่งคำถามจะหมดไป คือ
“อันนี้ Link Update Flow ล่าสุดหรือยังครับ ? “
ไม่ต้องถามครับพี่ มันอัพเดท Realtime ครับ พี่เข้าไปเช็คได้เลย ว้าก ฮ่าๆๆๆๆ (หัวเราะแบบผู้ชนะ 🤣)
Figma สามารถทำงานได้ทั้ง Window และ MacOS นาจา
ไม่ว่าจะเป็นบน Browser หรือ โปรแกรมก็ตาม Figma ตอนนี้รองรับการทำงานทุกระบบแล้วนะ
ไม่ว่าจะเป็น MacOS หรือ Windows ก็สามารถใช้ได้ทั้งคู่เลย ไม่มีเลือกฝั่ง ฮ่าๆ รวมทั้งยังมี Mirror App ให้ด้วยนะ ทั้ง iOS และ Android เลย ไม่เหมือน Sketch ที่บอกไว้ข้างต้นว่า ทำให้แต่ iOS ส่วน Android ไม่ทำ App ให้ ลำเอียง ผมเคยส่งเมล์ไปถามแล้ว เขาตอบว่าถ้าคนเรียกร้องเยอะจะทำ 😕 จนถึงทุกวันนี้ยังไม่มี App บน Android เลย
Tip ⚡️ หากจะใช้งานจริงจังแนะนำให้โหลดแบบโปรแกรมมาใช้งานในเครื่องนะ มันจะสามารถใช้ Key Shortcut ได้ดีกว่าบน Browser
งานมันยังเหมือนไม่สุดแฮะ มาช่วยกันทำหน่อยสิ Collaborative Realtime
ไม่ว่าจะเป็นเหตุการณ์ใดก็ตาม จะเป็นการคอมเม้นงานเพื่อปรับให้ดีขึ้นก่อนส่ง
การผิดพลาดจากการทำงาน หรือการส่งต่อไฟล์งานแล้วหาย หรือส่งไม่ครบ ประเด็นสำคัญเลยคือ ทำงานไม่ทันแล้วโฟ้ย!! มาช่วยหน่อยยยย ระบบการทำงานร่วมกันตรงนี้ตอบโจทย์มาก หากทีมเรามีคนเยอะ และมีระบบการจัดการที่ดีแล้ว การทำงานร่วมกันในเวลาเดียวกันได้เป็นอะไรที่มีประสิทธิภาพมาก
แต่ส่วนสำคัญที่ผมชอบที่สุดเลยคือการส่งต่องานให้ Designer อีกคน หมดเวลาแล้วที่เราจะต้องส่งไฟล์งานเป็นก้อนให้อีกคน ไม่ว่าจะผ่านบริการอะไรก็ตามแต่ จะส่งงานให้คนอื่นทำต่อใช่มั้ย โยน Link ให้จบ เขาสามารถเข้ามาแก้ไขงานเราได้ทันที และจะไม่มีการหล่นหายของไฟล์ที่ส่งด้วย ว่าจะลืม หรือขาดอะไรหรือป่าว เพราะ Link ที่ส่งให้มันก็คืองานทั้งหมดที่เราทำ จะไม่มีการมานั่งหาไฟล์ล่าสุดไม่เจอ เพราะ Design Realtime. สุดท้าย หากเราจะระดมความคิด ก็โคตรง่าย จัดไปสิคนละ Artboard ทำข้างกันเลย ทำคนละไอเดียแล้วมาเสนอกัน
Comment งานที่ไหนอะ หาไม่เจอ
พอเราใช้บริการหลายตัว เมื่อคอมเม้นงานไม่ว่าจะด้วยคนในทีมกันเอง หรือลูกค้า ต้องถามเลยทีเดียวว่า คอมเม้นไว้ที่ไหนครับ เดี๋ยวจะตามเข้าไปเช็คคอมเม้นงานแล้วปรับแก้ไขให้ บางทีคอมเม้นตกหล่นหายไปอีก หาไม่เจอ Zeplin เนี่ยตัวดีเลย มันต้องคอมเม้นใส่หน้าแต่ละหน้า Notification ก็มีแจ้ง แต่เราต้องกดเลื่อนดูทุกครั้ง แต่หากเป็น Figma คนที่มี Link สามารถไปคอมเม้นในงานของเราได้เลย เราจะเห็น Overview Artboard ของเราด้วยว่า มีคอมเม้นจุดไหนบ้าง มันทำให้สะดวกมากขึ้น เพราะเราจะไม่พลาดคอมเม้นเลย บวกกับสามารถจบได้ใน Link เดียว ทั้ง View/Edit Comment/Prototype
เดี๋ยวจะมองภาพไม่ออก ตัวอย่างข้างบนผมแสดงให้เห็น หากมีคนคอมเม้น เราจะสามารถเห็นภาพรวมทั้งหมดว่ามีกี่จุด คอมเม้นอะไร ตอบกลับคอมเม้นนั้นได้ และหากแก้ไขเสร็จแล้ว เราสามารถ เก็บคอมเม้นนั้นได้
ระบบ Team Room คล้ายๆ เราสร้างห้อง Slack
หากใครเคยใช้ Slack ก็คงจะคุ้นๆ เพราะทาง Figma ใช้ระบบการแบ่งกลุ่มจัดการ การเข้าถึงไฟล์งาน คล้ายห้องของ Slack โดยแต่ละห้องคือทีมหนึ่งทีม โดยในทีมจะมีรายชื่อใครบ้างเราสามารถจัดการสมาชิกในทีมได้ และมีรายชื่อโปรเจคโดยจะแบ่งเป็นห้องอีกขั้นข้างใน
ภายในห้องนั้น เราสามารถเลือกเก็บงานแบ่ง Project และ กำหนดคนที่ต้องการเข้าถึงไฟล์ นั้นๆได้ด้วย โดยที่เราไม่ต้องมาตั้งค่า Access ของแต่ละคนซ้ำๆ เราทำการตั้งเพียงแค่ครั้งเดียว เมื่อเราสร้างโปรเจคใหม่ คนที่มีสิทธิ์เข้าถึงอยู่แล้วก็จะสามารถใช้กับโปรเจคใหม่ได้เลยไม่ต้องมาตั้งใหม่
แล้วหากสงสัยว่าแล้วถ้าเราส่งงานต่อคนอื่นละ จะต้อง Invite เข้าทีมหรือเปล่า? ไหนบอกว่าส่งง่ายๆ ไง ง่ายสิ ถ้าเรา Share ให้คนอื่น ก็จะเป็นการกำหนด Access แยกออกไปจากรูปแบบทีมครับ เป็นคนละส่วนเลยไม่เกี่ยวกัน เราสามารถดูได้ว่าเราส่งให้ใครไปแล้วบ้างแล้วก็กำหนด Access ตอนส่ง หรือจะมาแก้ภายหลังได้ว่าให้เขาเข้าถึงไฟล์แบบไหนได้บ้าง (คล้ายๆ Share File ของ Google Drive เลย)ตามรูปตัวอย่างข้างล่าง
บรรทัดบนจะบอกว่า ทุกคนในทีม 20scoopsCNX สามารถเข้าถึงไฟล์นี้ได้เลย ไม่ต้องมาตั้งค่าใหม่ ถ้านอกเหนือจากคนในทีม ก็สามารถส่งลิงค์ แยกไปได้ว่าให้เขาเข้ามาทำอะไรได้บ้าง
Design Library ใช้งานง่ายหรือเปล่า?
จากที่ได้ลองเล่นขอบอกเลยว่าใช้งานง่ายมาก หากเป็น Sketch เราจะต้อง Export ไฟล์ Library นั้นออกมา แล้วไปใส่ใน Library อีกคนเพื่อเรียกใช้งาน แต่หากเป็น Figma หากเราเป็นคนในทีมแล้วละก็ Project ไหนก็ตามที่เราได้ทำการ Publish Component เอาไว้ คนในทีมสามารถเข้าไปเลือกใช้ได้เลยจ้า ว่าจะเอาอันไหนไปใช้ และหากมีการอัพเดท Component จากไฟล์หลักแล้ว ก็จะมีปุ่ม Refeash เพื่อเอา Component ล่าสุดมาอัพเดทให้เราทันที สะดวกมากๆ ไม่ต้องโยนไฟล์ไปมาให้กัน
ดูจากตัวอย่างรูปข้างล่างอาจจะเห็นภาพมากขึ้น
ด้านซ้ายคือ Project ที่เรา Publish Component ถ้าเรากดเข้าไปข้างใน ก็จะเป็น Component ที่อยู่ในโปรเจคนั้นๆ ในรูปที่แสดงด้านขวา เราสามารถลากวาง เอาไปใช้ได้เลย
ส่งต่อ Dev อ่ะหรอ ไม่ต้องใช้แล้ว แซบโปง เซ็ปลิน (Zeplin)
ตัว Figma เองนั้นก็มี Feature สำหรับดูขนาดและระยะห่างต่างๆ รวมไปถึงสไตล์ด้วยแต่ก็อาจจะมีความสามารถยังไม่เท่า Zeplin ถ้า ต้องการรายละเอียดมากกว่านี้ เช่นเรื่องการ Set ชุด Text Style หรือ Color ก็ยังต้องใช้ Zeplin ในการอำนวยความสะดวกอยู่ ซึ่งปัจจุบัน Figma เขาก็สามารถ Integration กับ Zeplin และ Avocode ได้แล้วนะ
รวมไปถึงการ Export Asset ต่างๆ ในการใช้งานจริง อาจจะต้องไปสอน Dev ในการใช้งานอยู่บ้าง ว่าถ้าอยากได้ชิ้นส่วนไหนต้องทำยังไง กด Export ที่ไหน แต่ก็คิดว่าไม่น่าจะยากเกินไปสำหรับการใช้งานสำหรับมือใหม่ แต่ในอนาคต ผมคิดว่า Figma จะมีการปรับปรุง ให้ใช้งานง่ายขึ้นอย่างแน่นอน ทำไมนะหรือ?
เดี๋ยวก่อนจบจะทิ้งท้ายบอกไว้ให้
Backup ไฟล์เข้า Git อะหรอ ไม่ทำละจ้า เครื่องโคตรช้า
ถ้าใครประสบปัญหาเรื่องการอัพไฟล์ เข้า Git ไม่ว่าคุณจะใช้งานบริการไหนอยู่ก็ตาม จะต้องโดนเหมือนผมแน่นอน คือมันกินเวลาอัพงานมาก 3–5 นาที สำหรับ Project เล็กๆ แต่ถ้าสำหรับ Project ใหญ่ๆ 15 นาที บวก++++ แน่นอน!! รวมถึงบางครั้งที่เราอัพงานอยู่นั้น โปรแกรม Git นั้น กิน Ram เครื่องซะหมดเลย ไม่เหลือให้ทำอย่างอื่นเลยทีเดียว หากเผลอไปเล่นหรือทำงานตอนอัพละก็ รีสตาร์ทเครื่องใหม่ลูกเดียวจ้า เดี๋ยวจะมีคนบอกว่า เครื่องนายช้าเองหรือป่าว ตอนนี้เครื่องที่งานเป็น iMac (Retina 5K, 27-inch, 2017)/ 3.5 GHz Intel Core i5 / 8 GB 2400 MHz DDR4 คิดดูละกัน ยังทำงานไม่ไหวเลยจ้า
แต่หากเป็นระบบของตัว Figma เองแล้วล่ะก็ จะมีการ Auto Save ให้เราเองอยู่แล้ว หรือ เราจะทำการ Commit Version เองโดยการกด Cmd+Option+S ก็ได้ มันก็จะมีรายละเอียดขึ้นมาให้เราใส่เหมือนเวลาเรา Commit งานลง Git เลย พิมพ์เสร็จ กด Save จบ..ไม่มีการอัพโหลดนาน ทำเครื่องช้า หรือเสียเวลา Export ไปอัพที่โปรแกรมอื่นอีกต่อไป
Tip ⚡️ หากใครกังวลหรือไฟล์หาย หรือกลัวว่าวันนึง เซิร์ฟเวอร์ Figma จะอันตรธานหายไป ก็สามารถเซฟเป็นไฟล์ .Fig ไว้ได้นะครับ แต่จะไม่สามารถเอาไปใช้กับ
โปรแกรมใดๆ อื่นได้เลยนอกจากตัว Figma เอง (นี่แหลาะข้อเสียมัน😐)
งานทำ Motion Interactive ก็เริ่ม Support แล้ว
จากเมื่อก่อนที่เราต้องทำงานผ่าน Sketch แล้ว Export ไป Render ด้วย Lottie ที่ทำงานบน After Effect จากนั้นส่งไฟล์ต่อให้แก่ Dev จนมาถึงปัจจุบันที่มีโปรแกรม Haiku ที่พัฒนามาจาก Base ของ lottie เป็นโปรแกรมที่เราสามารถทำ Interaction โดยที่จะช่วยลดเวลาการทำงานเราลดลงให้สะดวกมากขึ้น ไม่ต้องข้ามทำงานหลายโปรแกรม
หลังจากที่ Figma ประกาศเรื่องการปล่อย API เมื่อ 22 มีนาคม 2561 ที่ผ่านมา ทาง Haiku ก็ประกาศว่าเรา Support Figma แล้วนะ นั่นแปลว่า เราไม่ต้องพึ่ง Sketch แล้วจ้า เราสามารถทำงานบน Figma แล้วสามารถ Export งานเพื่อไปทำ Interaction ได้เลย จากที่ผมลองใช้งานจริงแล้ว ก็ถือว่าทำออกมาได้ค่อนข้างใช้งานง่ายในระดับนึง อาจจะมีปัญหาเรื่องการโหลดช้า และเรื่องการเลือก Asset ที่จะ Export หลายขั้นตอนและใช้เวลามากไปหน่อย แต่ก็นะ เขาเพิ่งเปิดตัวจะเอาอะไร Perfect มันก็ต้องพัฒนาดูกันต่อไปยาวๆ
ข้างบนเป็นไฟล์ตัวอย่างที่ผมได้ลองใช้งานโดยการ Export จาก Figma เอามาทำต่อ หากเรามีการแก้ไขขึ้นมา ก็แค่กด Sync data ใหม่ งานเราก็จะถูกอัพเดททันที
การทำงานด้วย Tool ในอนาคตจะเป็นอย่างไรละ
ในข้างบนที่ผมบอกไว้ว่า “ในอนาคต ผมคิดว่า Figma จะมีการปรับปรุง ให้ใช้งานง่ายขึ้นอย่างแน่นอน ทำไมหน่ะหรือ” ผมไปเจอบทความหนึ่งมาชื่อว่า The Great Design Battle of 2018 — Pick Your Side โดย Alexander Handley เขาพูดถึง Tool ตั้งแต่อดีตจนถึงปัจจุบันว่ามันมีการพัฒนาไปในทางไหนและปัจจุบันเป็นอย่างไร สรุปได้ว่า Tool ในปัจจุบันนั้นจะมีความสามารถในการเริ่มทำงานและจบงานด้วยตัวเองได้โดยไม่พึ่งบริการอื่น แต่แน่นอนว่าในอนาคตนั้น Tool จะมีความสามารถในการเริ่มทำงานและจบงานด้วยตัวเองได้โดยไม่พึ่งหรือสามารถเชื่อมต่อบริการอื่นๆ ได้ทั้งหมด ทั้ง Sketch, Figma และ Invision Studio ที่ลีลาไม่เปิดให้ใช้ซักที Hahaha. เขาก็พยายามทำตัวเองให้เป็นแบบนั้นอยู่ เพื่อกระชับการทำงานให้สะดวกและประหยัดเวลา ไม่ต้องให้คนใช้โดดไปโดดมาหลายบริการ
— — — — -All in One U know !! and Pick Your Side 🤣 — —- — —
แล้วสรุปว่ามันดีหรือป่าว ถึงเวลาที่เราจะต้องปรับเปลี่ยนหรือยัง?
“อีกครั้งแล้วสินะ ที่ฉันต้องโยกย้าย” Polycat — พบกันใหม่. ไม่ได้เกี่ยวอะไรกับเพลง แค่เอาคำพูดมาใช้ ฮ่าๆ หากเราคิดว่าถึงเวลาแห่งยุคการปรับเปลี่ยนเพื่อพัฒนากระบวนการให้ดีขึ้น มันก็ถึงเวลาที่เราจะ Move กันอีกครั้งครับ
สุดท้ายนี้ผมคิดว่า Tool นั้นเป็นเพียงเครื่องมือที่สนับสนุนการทำงานของแต่ละทีม หรือแต่ละเฉพาะบุลคล ซึ่งบางทีมนั้นมีขนาดเล็กใหญ่ หรือทำงานคนเดียว และแต่ละคนหรือทีมก็มีกระบวนการทำงานที่ไม่เหมือนกัน ในแต่ละบริษัท ผมคิดว่าการที่เราเลือก Tool ที่มา Support การทำงานของทีมได้เหมาะสม จะทำให้เราได้ผลลัพธ์ของงานออกมาดีตามที่เราวางไว้ครับ 🤘🏻
สรุป: จะใช้อะไรก็ได้ ที่เหมาะกับเรา ทำงานแล้วได้งาน
สุดท้ายหากใครชอบบทความอย่าลืมกด Clap +50 เพื่อเป็นกำลังใจให้การเขียนบันทึกของผมต่อไปด้วยนะครับ ขอบคุณครับบบบบบ 🙏🏻
ข้อเสียหลักของ Figma อีกข้อ ที่จะไม่พูดถึงไม่ได้เลยคือ มันทำงานแบบ Offline ไม่ได้จ้า!! 😭 หวังว่าอนาคตจะทำได้นะจร่ะ
อ่านบทความอื่นๆ ของผม
