เครื่องมือที่ UX/UI Designer ไม่ควรพลาด Sketch, Figma, Adobe XD

ในปีที่ผ่านมา (2020) สกิลในสายงานออกแบบ UX/UI เป็นที่ต้องการสูงมาก เป็นทักษะที่ไม่ว่าคุณจะอยู่ในตำแหน่งไหนของทีม ก็ได้ใช้สกิลเหล่านี้แน่นอน และยิ่งสำหรับ UX/UI Designer ที่ต้องใช้แบบเต็ม ๆ ไม่ควรพลาดเครื่องมือในการช่วยวาง Wireframe ออกแบบ UX/UI เพื่อทำให้การทำงานของคุณทำได้รวดเร็วและเต็มประสิทธิภาพ จำลองให้เห็นภาพจริงกว่าเดิม

ก่อนจะเข้าเรื่องเครื่องมือเราจะมาอธิบายกันก่อนว่าทำไม เครื่องมือสำหรับออกแบบ UX/UI โดยเฉพาะถึงสำคัญ ในเมื่อเราจะวาดบน Photoshop – tool สามัญประจำบ้านก็ได้ 

คำเตือน: บทความนี้ยาว สำหรับผู้ที่เข้าใจเรื่องนี้อยู่แล้วสามารถข้ามไปได้ส่วนอื่น ๆ ได้เลยโดยคลิกที่หัวข้อด้านบน

รู้จักกับ Wireframe แบบเร็ว ๆ 

Wireframe คือ โครงร่างของเว็บไซต์/แอปพลิเคชันในหน้าต่าง ๆ ที่จะทำให้เห็นภาพรวมว่าหน้าตาองค์ประกอบวางตรงไหน รวม ๆ แล้ว User Interface จะเป็นยังไง กดแล้วจะพาไปที่หน้าไหนบ้าง

แต่เดิมนั้นก็มีตั้งแต่วาดมือลงกระดาษบ้าง วาดในโปรแกรม เช่น Adobe Photoshop บ้าง โดยจะเป็นการวางโครงแบบเร็ว ๆ ส่วนที่เป็นภาพก็เป็นกรอบสี่เหลี่ยม อาจจะกากบาทตรงกลางไว้ให้รู้ว่านี่เป็นกล่องรูป ขีดเป็นเส้น ๆ แทนที่สำหรับเขียนข้อความ

แต่แน่นอนว่าเวลาเราทำเว็บหรือแอปใด ๆ มันไม่ได้มีแค่หน้าเดียว ตัวอย่าง เว็บที่มีการสมัคร ก็ต้องมีแล้วอย่างน้อย สามหน้า หน้าแรกสำหรับโฮมเพจ landing page หน้าสองสำหรับกรอกข้อมูล หน้าที่สามสำหรับแสดงผลยืนยันการสมัคร ลองนึกภาพถึงเว็บที่โครงสร้างใหญ่ ๆ แล้วต้องมาตีกรอบสี่เหลี่ยมโครงหน้าเว็บทีละอันดูสิ แค่คิดก็ท้อแล้ว

เพราะแบบนี้ถึงต้องมี UX/UI Design Tool

UX/UI design tool พวกนี้ที่มีคุณสมบัติพิเศษมากกว่า อัตโนมัติมากกว่า อย่างการสร้าง Component ที่เป็นเหมือนแม่แบบ สร้างทำตัวก๊อปปี้ได้ เมื่อเราปรับแม่แบบ ตัวก๊อปปี้ก็จะเปลี่ยนหน้าตาไปด้วย ไม่ต้องแก้หลาย ๆ ครั้ง การสร้างกรอบที่แค่เลือกว่าจะเอาหน้าจอของอะไร desktop ไซส์ไหน โทรศัพท์รุ่นไหน ก็สร้างขึ้นมาให้ได้ทันที สร้างกล่องขึ้นมาแล้วก็เพิ่มหรือเปลี่ยนภาพเข้าไปได้ง่าย ๆ ทำให้การ mock up สมจริง 

ภายในซอฟต์แวร์จะมี plug-in มากมายที่ทำให้คุณทำงานด้านนี้ได้รวดเร็วกว่าเป็นไหน ๆ เช่น plug-in สำหรับ mock up text คลิกแล้วขึ้น Lorem ipsum มาให้ตามขนาดของกล่องข้อความที่เราวางไว้ หรือ Plug-in สำหรับ mock up User เช่น ชื่อ รูป ของ user มาให้ใช้เพียงกดคลิกเดียว ซึ่งมันดีมาก ๆ เลยไม่ต้องมาคิดเองทีละชื่อหรือใส่เหมือน ๆ กันไปหมด เป็นต้น

นอกจากด้านการออกแบบแล้ว ฟีเจอร์พิเศษที่ซอฟต์แวร์เหล่านี้มี แต่การวาดมือหรือทำบน Photoshop แทนกันไม่ได้เลยคือฟีเจอร์ของการทำ Prototype ที่เป็นการสร้าง Trigger และ Action ให้กับ element ต่าง ๆ เช่นการคลิกปุ่มนี้แล้วพาไปอีกหน้าหนึ่ง สไลด์เพื่อเปลี่ยนภาพ เหมือน Carousel Ad เป็นการจำลอง User Experience ขึ้นมานั่นเอง

ถ้าคุณเป็น Designer ที่ทำ UX/UI หรือต้องการที่จะเรียน ฝึกฝนทำด้านนี้เพิ่มเติม เราจะไปทำความรู้จักกับ Sketch, Figma และ Adobe XD ไปพร้อม ๆ กันเลยยย

ทำความรู้จักกับ Sketch, Figma และ Adobe XD

หลาย ๆ คนน่าจะคุ้นหูกับสามชื่อนี้กันมาบ้าง แต่ถ้าไม่รู้ว่าที่มาที่ไปเป็นอย่างไร คุณจะได้ใกล้ชิดกับทั้งสามซอฟต์แวร์มากขึ้นในบทความนี้

Sketch

ใน 3 บริษัทนี้ Sketch เกิดขึ้นมาเป็นตัวแรก โดยเริ่มก่อต้ังบริษัทเมื่อปี 2008 โดยในตอนนั้น มีคนที่อยู่สายงาน UX/UI เพียงไม่กี่ร้อยคนเท่านั้น ก่อนที่จะปล่อยซอฟต์แวร์ Sketch ให้คนเริ่มใช้กันในปี 2010 ปัจจุบันมีผู้ใช้งานกว่าล้านคน รวมไปถึงบริษัทชื่อดังมากมาย อย่าง Nintendo, Stripe, Porsch, Google, Facebook และ XBox

การสร้าง UI Design Tool นี้เริ่มจากไอเดียที่อยากให้ดีไซน์เนอร์ในบริษัทตัวเองมีเครื่องที่ดีขึ้นใช้งาน
จุดเด่นของ Sketch คือการเอาไฟล์ของตัวเองไปเปิดในโปรแกรมดีไซน์อย่าง Ps, Ai และโปรแกรมอื่น ๆ ได้ ทำให้ต่อยอดจากงานเดิมได้ดี 

ตอนนี้มีการลงทุนในระดับ Series A มูลค่าการลงทุนรวม 40 ล้านเหรียญ

‍Figma 

Figma คือ UX/UI Design tool ที่มีการทำงานแบบ Web-based หรือทุกอย่างอยู่บนเว็บเป็นหลัก ไอเดียเรื่อง Web-based นี้ถูกระดมความคิดมาตั้งแต่ปี 2011 ก่อนที่จะก่อตั้งบริษัทขึ้นใน 2012 และมี Figma ออกมาให้ทุกคนได้ใช้จริง ๆ จัง ๆ กันตอน 2016 

ตัวอย่างบริษัทที่ใช้ Figma เช่น airbnb, Condé Nast, Github, Uber, ZOOM, Square

ฟังเหมือน Figma จะด้อยกว่าในเรื่องของ Community ทั้ง Adobe ที่มีเครือข่ายดีไซน์ใหญ่มาก ทั้ง Sketch ที่ก่อตั้งมาก่อนใคร แต่ในปี 2019 Figma ก็ไม่ทำให้ผิดหวัง สร้าง Community ที่ให้คนแชร์ไฟล์งาน แชร์ Plug-in แชร์ prototype ต่าง ๆ แล้วนำไปประยุกต์ใช้กับงานของตัวเองได้ มีการลงทุนอยู่ในระดับ series D รวม 132.9m$ ตอนนี้ Figma มีมูลค่ารวมมากกว่า 2 พันล้านดอลลาร์

XD

XD คือ โปรแกรมน้องใหม่ แต่บริษัทไม่ใหม่ – UX/UI design จาก Adobe บริษัทระดับโลกที่ให้บริการซอฟต์แวร์ด้านกราฟิกหลายชนิด เช่น Photoshop, Illustrator, Premier Pro, Lightroom 

Adobe ประกาศตัวว่ากำลังพัฒนา UX/UI design tool ใน Adobe Max Conference ปี 2015 ภายใต้ชื่อ Project Comet ชื่อเต็มของ XD ที่ปล่อยมาในตัว beta คือ Adobe Experience Design CC ก่อนจะปล่อยตัวเต็มออกมาเมื่อปี 2016 ในชื่อ Adobe XD เปิดให้เริ่มต้นใช้งานได้ฟรี พร้อมกับระบบ creative cloud ที่เชื่อมทุกโปรแกรมของ Adobe เอาไว้ ทำให้การส่งงานเชื่อมงานต่าง ๆ ทำได้ง่ายมาก 

แม้จะปล่อยออกมาช้าที่สุดใน 3 ตัว (ห่างกับ Figma นิดหน่อย) แต่ชื่อเสียงเรียงนามของบริษัทนี้ก็ดึงดูดให้คนมาใช้จำนวนไม่น้อย ทั้ง Microsoft, New York Post, Polaris, DICE, UCF และ Poshmark

โดยพื้นฐานการใช้งาน การทำงาน หรือฟีเจอร์ในซอฟต์แวร์จะไม่ต่างกันมาก ในบทความนี้เราจะพาคุณไปดูส่วนแตกต่างที่น่าสนใจของทั้ง 3 ตัว เพื่อประกอบการตัดสินในการเลือกใช้งานของคุณ

ซอฟต์แวร์ตัวไหนดีที่สุด?

1. เครื่องมือที่ช่วยให้ง่ายต่อการออกแบบ

เครื่องมือดีไซน์หลักไม่ต่างกัน แต่ถ้าพูดถึงจุดเล็กจุดน้อย…

XD ค่อนข้างได้เปรียบเรื่องการเข้าถึงเครื่องมือสร้างรูปทรง (Shape) ได้ไว จากการสอบถามดีไซน์เนอร์หลาย ๆ คน บอกว่าเรื่องนี้มีผลอยู่เหมือนกัน อาจจะไม่ได้เด่นชัด แต่ทำให้ Flow การทำงานช้าลง ถ้าหากต้องคลิกเข้าหลาย ๆ ครั้ง 

และฟีเจอร์ repeat grid ที่ลดภาระการก๊อปมาจัดวางอีกรอบได้เยอะเลย (เดี๋ยวเราจะไปพูดถึงแบบเต็ม ๆ กันด้านล่าง)

แต่ถ้าพูดแบบส่วนตัวที่เทใจจริง ๆ ถ้าปกติเราใช้คีย์ลัดก็แทบไม่มีผล ตระกูล Adobe คีย์ลัดของเครื่องมือส่วนใหญ่ (แทบจะทั้งหมด) จะเหมือนกันกับ Figma ส่วน Sketch มีคีย์ลัดที่แทบจะฉีกออกไป ทำให้ต้องจำคีย์ลัดเพิ่ม อย่างบางทำอาร์ตใน Ai แล้วลากมานี่ต่อ คีย์ลัดที่แตกต่างออกไปก็ขัดใจเหมือนกัน เหมือนเวลาที่คุณกดคีย์ลัดเครื่องมือในซอฟต์แวร์ตัวหนึ่งมาตลอด ต้องคุ้นชินกับมันแน่นอน การทำงานต่อเนื่องกันหลาย ๆ ซอฟต์แวร์ ไม่มากก็น้อยที่จะต้องเผลอกดใช้คีย์ลัดเดิม ๆ แล้วก็พบว่านั่นไม่ใช่คำสั่งในซอฟต์แวร์ตัวนี้ คงจะต้องใช้ระยะเวลาสักพักหนึ่งเพื่อทำความคุ้นชินในการใช้คีย์ลัด

แต่สิ่งที่รู้สึกว่ามันว้าวและเห็นผลชัดกว่าคือ การจัด layout ของ Figma และ Sketch การที่เราสามารถโยกย้ายตำแหน่งของสิ่งต่าง ๆ อิสระ ทำให้การทำงานไวขึ้นมาก ๆ รวมถึงกรุ๊ปเฟรมและจัด Auto layout ด้วย 

ส่วนตัวคิดว่าการจัดวาง Layout อย่างรวดเร็วเป็นเรื่องที่มีผลมากกว่ากว่าการก๊อปปี้วางแล้วก็มีเครื่องมือที่ช่วยจัด Gutter (ช่องว่างระหว่างวัตถุ) ให้มันเท่ากันอยู่แล้วด้วย 

ส่วน XD รู้สึกจะทำไม่ได้ ต้องต่อ plug-in ที่ชื่อ Smart layout เข้ามา แต่การปรับย้ายไม่ง่ายเท่าอีกสองตัว

มีคลิป Tutorial หนึ่งของ figma ที่สอนการใช้ Auto layout และใช้ Plug-in ของ Google Sheets ร่วม ทำให้การสับเปลี่ยนข้อมูล ย้ายตำแหน่งต่าง ๆ ทำได้เร็วมาก สามารถดูเพิ่มเติมได้ที่นี่

สิ่งที่ XD ได้เปรียบ เอามาทดแทนการจัด layout คือ การทำ repeat grid ที่ XD และ Sketch ทำได้ แต่ XD จะค่อนข้างเหนือชั้นกว่า Sketch จะเป็นการคลุมแล้วขยายจำนวนวัตถุชิ้นสุดท้าย แต่ XD คือจะขยายมาให้ทั้งก้อนเลย เหมือนการทำ Duplicate วางนี่แหละ แต่ง่ายกว่ามาก และที่สำคัญคือ XD สามารถที่จะลากรูปมาแล้วใส่เข้าไปให้มันรันเองในครั้งเดียวด้วย repeat grid 

โดยรวม ค่อนข้างชอบการจัด layout ของ Figma กับการเข้าถึงเครื่องคีย์ลัดที่คล้าย ๆ กับฝั่ง Adobe ไม่ต้องจำเพิ่ม แต่ figma ยังต้องพัฒนาเรื่องการตัดคำเพิ่มขึ้นอีกเพราะการตัดคำในภาษาไทยยังสู้ Sketch กับ XD ไม่ได้ 

หลายคนอาจสงสัยว่าทำไมทั้งที่ Sketch ก็จัด layout ได้ Repeat grid ก็ได้ ตัดคำก็ดี ถึงไม่เลือกตัวนี้มาเป็นที่หนึ่ง หลัก ๆ เพราะเรื่องคีย์ลัดเลย เช่น 

คีย์ลัดใน Sketch VS. โปรแกรมอื่น ๆ (รวมถึงใน Photoshop และ Illustrator)

• P Pencil – Pen
• V Vector หรือ pen – Cursor หรือเมาส์
• ส่วน Cursor ใน Sketch จะเป็นการกดซ้ำที่คีย์ลัดนั้นเพื่อออกจากเครื่องมือ

เวลาใช้งานจริง ๆ คีย์ลัดบนคีย์บอร์ดทำให้ทำงานได้เร็วกว่ามาก ถ้าตัด Figma ออกไปแล้วต้องเลือก Sketch กับ XD (โดยส่วนตัวก็ยังอยาก)เลือก XD มากกว่า รู้สึกว่าฟีเจอร์ Repeat grid ของ XD ทรงพลังกว่าด้วย การใส่รูปในคราวเดียวย่นระยะเวลาไปได้มาก ๆ

2. การทำงานร่วมกัน

ถ้าเฉพาะการทำงานดีไซน์ร่วมกันจริง ๆ เรียงลำดับในใจ คือ XD > Figma > Sketch

Figma เคยเป็นตัวหนึ่งที่โดดเด่นเรื่อง Collaborative working หรือการทำงานร่วมกันที่สุด สามารถทำงานร่วมกันได้แบบ Real-time ก่อนที่ XD จะปล่อย Coediting มาในปลายปี 2019 ที่ช่วยให้ผู้ใช้ทำงานแบบ Real-time ได้เหมือนกัน

ทำได้เหมือนกันแล้วทำไมถึงให้ XD ชนะ? นั่นเพราะว่า XD เมื่อพฤษภาคมปีที่แล้ว (2020) เขาปล่อยตัว Coediting แบบ Offline มา และนี่จี้ Figma สุด ๆ เพราะ Figma เป็น Web-based ที่การใช้งานแบบ Offline นั้นยังไม่สะดวกมากนัก ต้องดาวน์โหลดไฟล์มาก่อน ถึงจะสามารถทำงานได้ และไม่สามารถเปิดไฟล์ใหม่ได้ในระหว่างที่ออฟไลน์ด้วย ส่วน Sketch นั้นรู้สึกว่าจะทำ Real-time ด้วยตัวเองไม่ได้ แต่มี plug-in ที่เป็นการแยกไฟล์กันทำแล้วรวมไฟล์

**ปัจจุบัน Sketch สามารถใช้ฟีเจอร์ Real-time Collaboration ได้แล้ว [10/6/64]

แต่ถ้าเป็นระบบการทำงานที่ทุกคนทุกตำแหน่งทำงานได้ในที่เดียว เราอยากยก Figma ขึ้นมาอีกครั้งหนึ่ง เพราะบน Figma คุณจะใช้ OS อะไรก็ได้ จะใช้ Windows, MacOS แม้กระทั่ง Linux เรียกได้ว่ากว้างกว่า XD ที่ใช้ได้บน Windows และ MacOS และ Sketch ที่รันบน Mac เท่านั้น ทุกคนจึงไม่ถูกจำกัดด้วยอุปกรณ์ พร้อมด้วยฟีเจอร์คอมเมนต์บนหน้าดีไซน์เลย ทำให้สามารถสื่อสารกันได้ง่าย พรูฟงานกันแบบเรียลไทม์มากกว่าอีกสองตัว

การใช้งานบน Web-based ของ Figma ทำให้หมดปัญหาเรื่องการอัปเดตเวอร์ชัน ถ้าเครื่องเวอร์ชันไม่เท่ากัน จะทำให้ไม่สามารถเปิดไฟล์นั้นได้อย่างสมบูรณ์ อีกทั้งยังมีปัญหาที่หากต้องรับงานมาแก้แบบด่วนจี๋แต่ต้องอัปเดตเวอร์ชันพอดี นั่นต้องใช้เวลาสักเล็กน้อยและทำให้งานของคุณสะดุดได้ (ในกรณี XD ถ้าเปิด Creative Cloud ตลอดและตั้งให้อัปเดตแบบอัตโนมัติจะช่วยลดปัญหานี้ได้ในระดับหนึ่ง)

XD กับ Sketch มีฟีเจอร์ให้คอมเมนต์ได้เหมือนกัน แต่จะเป็นจะการแชร์ลิงก์ออกไปต้องอัปเดตลิงก์ตลอด หรือ อัปไฟล์ขึ้น Cloud ไปคอมเมนต์กันใน Cloud ไม่ใช่การออนไลน์เข้ามาในหน้าไฟล์ การเชื่อมต่อระหว่างการทำงานจะไม่ราบรื่นเท่า Figma นอกจากนี้ยังมีเรื่องของ Developer handoff อีก ซึ่งเราจะไปพูดถึงในส่วนถัดไป

4. การสร้าง Prototype

การสร้าง Prototype ทั่วไปสำหรับ XD และ Figma ทำได้ดีพอ ๆ กัน ส่วน sketch ที่เพิ่งเพิ่มฟีเจอร์นี้เข้ามาก็คาดหวังว่าจะพัฒนาและตามมาเร็ว ๆ นี้ 

ฟีเจอร์ Prototype ของ Sketch จะไม่มีการแยกหน้าออกไป แต่จะใช้การเปิดปิดเส้นเชื่อมต่าง ๆ รวมไปถึง Animation ที่มีน้อยกว่ามาก ๆ ถ้าต้องการภาพที่ Advance ขึ้น จะทำไม่ได้เท่า Smart Animate, Auto Animate ของ Figma และ XD

ชอบ XD อย่างหนึ่งคือสามารถใช้คีย์ลัด Option + 2 เพื่อสวิตช์โหมดจาก Design ไป Prototype ได้เลย ไม่ต้องลากเมาส์ไปคลิก

Figma มีข้อได้เปรียบกว่า XD เล็กน้อยที่ Trigger ให้เลือกเยอะกว่า การแตะค้างไว้ การเอาเมาส์ออกอะไรแบบนี้ เราจึงสามารถทำอะไรกับ Element ก้อนหนึ่งได้มากมาย 

อีกส่วนที่อยากขอเปรียบเทียบที่การแสดง Prototype ขอแบ่งเป็นการแสดงบน desktop และบน มือถือ แท็บเล็ต

การแสดงผลบน Desktop ชอบของ Figma ที่มันสามารถตั้งให้เห็นได้ว่าแสดงบน smart phone รุ่นอะไร ขึ้นให้เป็นภาพบนจอเลย ส่วน XD จะให้ภาพเป็นจอยาว ๆ ลงมา ถึงสามารถอัดหน้าจอตอนคลิกปุ่มต่าง ๆ ได้ แต่นั่นอาจไม่ให้ประสบการณ์เหมือนกับลองด้วยตัวเอง เลยรู้สึก Figma ให้ประสบการณ์ที่ดีมากกว่า แต่ถ้าเป็นรูปแบบของเว็บไซต์ก็จะรู้สึกไม่ต่างกันเท่าไร จะมีก็แต่ Sketch ที่อยากให้ปรับปรุงเพิ่มเรื่อง Action ที่มากกว่าเดิม

ถ้าเป็นเรื่องการเชื่อมต่อกับ Smart phone เพื่อ Preview Prototype – XD ยังขาดเรื่องการเชื่อมแบบ Wifi บางคนตอนนี้ใช้ทุกอย่างเป็น Wireless การต่อแบบสายจึงเป็นอะไรที่วุ่นวายมากขึ้นในปัจจุบัน

สำหรับการต่อครั้งแรกรู้สึกว่า Sketch ทำได้ดีที่สุด ทันทีที่เปิดแอปบนโทรศัพท์ เราสามารถคลิกยืนยันที่ปุ่ม Notification ด้านขวาบนของโปรแกรมเพื่อยืนยันการเชื่อมต่อแล้วดู Prototype ได้เลย ส่วน Figma จะต้องกรอกไอดีอะไรให้เรียบร้อยก่อน ทั้งสองอย่างจริง ๆ มีข้อดีที่ต่างกัน Sketch เชื่อมต่อไวแต่ต้องใช้ wifi อันเดียวกัน Figma เชื่อมต่อครั้งแรกมากขั้นตอนกว่าหน่อย ต้องมีไอดี (ครั้งต่อไปไวพอกัน) แตใช้คนละ Wifi ได้ อยู่คนละที่ก็ดูได้ ส่วนความเสถียรของทั้ง 3 ซอฟต์แวร์ ทำได้ดีไม่ต่างกันเลย ทั้งยังเห็นการแก้ไขแบบ real-time แต่ต้องให้คะแนนพิเศษสำหรับ XD และ Sketch ที่มีการเชื่อมต่อกับ USB ให้ ในกรณีที่ Wifi ตายสนิทจริง ๆ ก็ยังดูได้

แต่คะแนนรวม ๆ ทั้งการสร้างและการ preview ยังให้ Figma นำอยู่ ติดเงื่อนไขเดียวเหมือนเดิมคือเรื่องอินเทอร์เน็ต ถ้าใครสนใจหันมาใช้ Figma ต้องคำนึงถึง หากชอบออกไปทำงานข้างนอกแล้วสัญญาณไม่อำนวยนักต้องทำใจก่อนเลยว่าจะใช้ไม่ได้เต็มประสิทธิภาพเท่า XD หรือ Sketch

4. ระบบ Library และ การสร้าง Design System

ขึ้นชื่อว่าลูกหลาน Adobe – Adobe XD มีระบบ Library ที่เชื่อมต่อกันด้วย Creative Cloud ข้อดีคือถ้า Active ตัว Creative Cloud อยู่ตลอด จะง่ายต่อการส่งต่อชิ้นงานมาก จากตระกูล Adobe ตัวหนึ่งแล้วส่งต่อกันได้เลย Ai ไป Ps ไป Xd 

ส่วนที่ชอบมาก ๆ คือ XD วาง Interface ออกมาได้สวยงาม ในทั้ง 3 ตัวชอบ Interface ของ XD มากที่สุด เพราะเข้าถึงเครื่องมือแต่ละส่วนได้ดีและรวดเร็ว การวาง Library ที่เราสามารถเพิ่ม Style เข้าไปได้ในคลิกเดียว ดึงมาใช้ได้ทันที ข้ามไฟล์อื่น ๆ ได้ 

การสร้าง Component จะเป็นลักษณะสร้างขึ้นมาหนึ่งชิ้นเป็นแม่แบบ ใช้แม่แบบเดิมเปลี่ยนสไตล์สีรูปร่างต่าง ๆ แล้วเซฟเข้าไป เวลาใช้เราก็สามารถ duplicate ตัวเดิมออกมา แล้วเลือกแบบเอา

ส่วน Figma จะเป็นระบบ Cloud ส่วนตัวเลย อาจจะไม่ได้เชื่อมต่อกับโปรแกรมอื่นได้ราบรื่นเท่า XD แต่ระบบ Cloud ที่ไม่ได้ซับซ้อนเท่าทำให้การทำงานบน Cloud ของ Figma ให้ความรู้สึกที่ดีกว่า ไม่ค่อยมีปัญหาเวลาอัปเดตงาน แก้งาน (XD จะมีหมุน ๆ บ้าง ต้องรีเฟรชแอปใหม่) ที่สำคัญคือระบบ Cloud นี้ไม่จำกัดพื้นที่ ใส่กันเต็มที่ได้เลย

ระบบ Library ในตัวเริ่มต้นตัวฟรีของ Figma จะทำได้แค่แชร์ Style อย่างสีหรือฟอนต์ขนาด แต่การดึง Asset Component ข้ามไฟล์ หรือ การมี Interface ที่ดึงมาใช้ได้อย่างรวดเร็วแบบนี้ Figma ในตัวที่เสียเงินก็ทำได้เหมือนกัน ข้อได้เปรียบเต็ม ๆ คือ XD ทำได้ฟรีตั้งแต่เริ่มต้นและการคลิกเพิ่ม Asset ที่ไวกว่า แต่ระบบ Cloud ใน Starter plan ของ XD จะเก็บได้แค่ 2 Gb เท่านั้น 

ส่วนที่ชอบของ Figma คือ Swap instance มันคือการคลิกเพื่อเลือกสับเปลี่ยน Component ชิ้นเดิมที่มีอยู่กับชิ้นอื่น 

แนะนำคลิป ทำ Design System ด้วย Figma  จากช่องของ CharliMarieTV ภายในคลิปอธิบายเกี่ยวกับการทำ Design System ที่ละเอียดและเข้าใจง่าย สามารถปรับใช้กับซอฟต์แวร์อื่นได้

Sketch มีฟีเจอร์ Symbol Swap Component ได้ แทนที่ชิ้นงาน (Override) ได้เหมือนกับ Swap instance ของ Figma 

สิ่งที่ชอบคือ เมื่อเรา Create Component หรือที่เรียกใน Sketch ว่า “Symbol” ขึ้นมา Component ที่ชิ้นนี้จะเข้าไปอยู่ในหน้า Symbol ทันที ทำให้ง่ายต่อการแก้ไขต้นแบบ หรือเทียบแบบ การ Create style ทั้ง text และ color ก็ทำได้ง่าย สามารถเพิ่มโดยการกดปุ่ม + ที่ Apperance เพิ่มได้รวดเร็วไม่ต่างกับ XD พร้อมช่องสำหรับแทน Text ได้เลยอัตโนมัติ

ข้อเสียคือการเปลี่ยน Style จะต้องเข้าถึงที่ Apperance เท่านั้น ไม่มีแถบด้านซ้ายให้อย่าง XD หรือ Figma จะรบกวนการใช้งานของเครื่องมืออยู่เล็กน้อย และระบบ Library ที่ Manual มากกว่าอีกสองตัว สามารถเชื่อมต่อกันได้ แต่มีการลิงก์ที่หลายขั้นตอนมากกว่า ต้องไล่เซ็ตเพื่อเชื่อมกับทีม อัปงานขึ้นคลาวด์ เชื่อมไฟล์กับ Library แล้วค่อย Install เข้าไปในงานใหม่อีกที

รวมๆ ถ้าเป็นแบบไม่เสียเงิน คิดว่า XD สามารถเข้าถึงการใช้ Design System และระบบ library ได้ดีกว่า รวมถึงสร้าง Style ได้ในคลิกเดียวด้วย แต่ถ้าเป็นเสียเงินมองว่า Figma น่าสนใจ ถ้าตัดเรื่องความวุ่นวายในขั้นตอนการสร้าง Style ออกไป 

ด้วยการเข้าถึงแบบข้ามไฟล์ได้เหมือนกัน สามารถ Swap object ได้ง่าย แทนที่ได้เลย ไม่ต้องลากมาจัดวางใหม่ รวมถึงทั้งหมดเป็น Web-based ทำให้การเข้าถึงระบบ Cloud สะดวกมากกว่า ทั้งยังให้ความจุแบบ Unlimited ด้วย ส่วน Sketch ระบบการใช้งานภายในดีเหมือนกัน แต่ถ้าต้องทำงานเป็นทีมแล้วเชื่อมต่อ Library กับงานใหม่ ๆ ตลอด Sketch ก็อาจจะไม่ตอบโจทย์ตรงนี้นัก การใช้งานน่าจะแล้วแต่สไตล์ของทีม ความชอบและความถนัด

5. Developer Handoff การแชร์ Inspect

ทำเว็บฯ ทำแอปนั้นเป็นสิ่งที่มาคู่กับการเขียนโค้ด การร่างแบบเว็บฯออกมาให้เห็นภาพ เท่านั้นไม่เพียงพอให้ทุกสัดส่วนออกมาเป๊ะทุก Pixel การส่งต่อ Inspect จึงเป็นส่วนสำคัญมาก

(ถ้าใครอยากทำเว็บแต่ไม่อยากเขียนโค้ดคลิกอ่านบทความนี้ได้เลย: สร้างเว็บไซต์ด้วย Webflow หรือ Wordpress อันไหนเหมาะกับคุณ)

Inspect คืออะไร?

หากอธิบายด้วยภาษาง่าย ๆ Inspect คือการดูโค้ดของวัตถุแต่ละชิ้นเพื่อเอาไปเขียนสำหรับสร้างเว็บฯ สร้างแอปพลิเคชันขึ้นมา การวางวัตถุชิ้นหนึ่ง คุณอาจจะเห็นว่าวัตถุชิ้นนั้นอยู่ตรงไหน แต่คุณจะไม่รู้ว่าขนาดที่แน่ชัดของวัตถุชิ้นนั้นคือเท่าไร (กรณีที่มีการย่อขยาย) วางห่างจากขอบเท่าไร ใช้ฟอนต์อะไร Style อะไร ส่วนนี้จะทำให้หน้าตาเว็บไซต์หรือแอปพลิเคชันตรงกับที่ออกแบบมากที่สุด

เมื่อก่อน Sketch จะไม่สามารถแชร์ Inspect ไปข้างนอกได้เลย ทำให้การใช้งานบน Sketch จะต้องซื้อเก้าอี้หนึ่งไว้สำหรับให้ Developer เข้ามาเอา Inspect หรือ ใช้ซอฟต์แวร์ตัวอื่นช่วยในการดู Inspect เช่น Zeplin ใน 3 ตัวนี้ ถ้าเป็น Combination ระหว่าง Sketch และ Zeplin ราคารวม ๆ เมื่อจ่าย Sketch กับ Zeplin คู่กันแล้วแพงกว่าสักหน่อย แต่ต้องบอกว่าส่งไม้ต่อให้รายละเอียดได้ดีที่สุด

เรื่องที่น่ายินดีคือ ในตอนนี้ Sketch กำลังพัฒนา Inspector Beta ที่แชร์งานขึ้น Cloud แล้วให้คนสมัครระบบ Cloud ของ Sketch เข้ามาดูได้ ซึ่งสมัครได้ฟรี สามารถ Export Asset ของไฟล์นั้นได้เลย ถึงแม้ว่าจะยังให้รายละเอียดไม่สมบูรณ์เท่าไร ไม่ได้เขียนโค้ดให้ แต่ก็ถือว่าเป็นการเปลี่ยนแปลงที่ดีของ Sketch มาก ๆ

มาถึง XD และ Figma สองตัวที่ค่อนข้างจะ All-in-One 

ในส่วนของรายละเอียด Inspect ทำได้ดีพอ ๆ กัน มีเขียนโค้ดเบื้องต้นให้ แต่จะมีข้อแตกต่างที่แล้วแต่คนชอบอยู่ ระบบของ XD จะเป็นลักษณะของการแชร์ลิงก์ออกไป ใน Starter Plan จะแชร์ได้แค่ลิงก์เดียวเท่านั้น มีรายละเอียดของโค้ดที่มากกว่า ทำให้ทีม Dev ไม่ต้องปวดหัวกับหน้าเลเยอร์ต่าง ๆ มีรายละเอียดของโค้ดที่มากกว่า ส่วน Figma จะเป็นการแชร์ที่เขาเข้ามาในตัวไฟล์งานเลย โดยให้ Access ว่าสามารถ View หรือ Edit รายละเอียดโค้ดที่ให้น้อยกว่า XD แต่ Figma สามารถที่จะเขียนโค้ดของ Android และ iOS มาให้ได้ด้วย 

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

Figma จะเห็น Inspect ที่แก้ไขแบบ Real-time ได้ ส่วน XD ต้องอัปเดตลิงก์เมื่อมีการแก้ไข ทำให้ขั้นตอนจะช้ากว่าเล็กน้อยในการอัปเดต ใช้เวลาเกือบนาทีถ้าไฟล์ขนาดเบา(หวิว) เหมือนจะไม่อะไรเท่าไร แต่สำหรับการทำงานที่ต่อเนื่อง ต้องส่งเดี๋ยวนั้น พรูฟเดี๋ยวนั้น แก้ทันที มองว่าจุดนี้ Real-time ส่งผลอยู่บ้าง แต่ถ้าคุณเป็นบริษัทที่มีขั้นตอน Proving เรียบร้อยก่อน ถึงจะไปขั้น Developer Handoff ได้ จุดนี้ก็จะไม่ส่งผลมากเท่าไร

6. Autosave และ Reversion

เชื่อว่าหลาย ๆ คนต้องเคยเจอปัญหา คอมค้าง คอมดับ ลืมเซฟงานดีไซน์ แล้วต้องมากุมหัวทำใหม่กัน อย่างน้อยก็ต้องสักครั้งในชีวิต แต่ตอนนี้ทั้ง 3 ตัวมี Autosave มาให้กับคุณแล้ว ถ้าเกิดแมวเดินเหยียบปุ่ม power ก็ค่อยสบายใจได้หน่อยล่ะทีนี้ มาดูกันว่าแต่ละตัวมันต่างกันยังไง

Sketch จะมี Autosave สำหรับตัวงานที่เป็​น Local File หรืองานที่เราเซฟบนเครื่อง กันปิดงานแต่มือไวลืมเซฟ คอมดับ น้ำหอม ปลั๊กหลุด งานก็ยังอยู่ เป็นการเซฟเมื่อมีการออกจากไฟล์งาน ชอบการ Reversion มาก (ออกแบบหน้าตาตรงนี้ก็เท่) จะขึ้นมาให้เลือกเวอร์ชันที่เราเคยเซฟไว้ แล้วเราสามารถที่จะก๊อป Object จากเวอร์ชันเก่ามาใส่ในตัวล่าสุดได้ทันที (แต่ต้องติ๊ก Autosave ก่อนนะ)

ส่วน XD และ Figma จะมีการเซฟให้เป็นระยะ ๆ ในแต่ละเวอร์ชั่นไว้ให้ด้วย มีข้อดีที่แตกต่างกัน 

XD เมื่อเราย้อนเวอร์ชั่น มันจะสร้างไฟล์ใหม่ของเวอร์ชั่นนั้นขึ้นมา (Duplicate) ทำให้งานไม่ซ้อน ไม่ทับกัน ไม่หายแน่นอน 

ส่วน Figma เลือกได้ว่าจะเอาเวอร์ชั่นไหน ถ้าย้อนแล้วอันล่าสุดก็จะหายไปเลย หรือจะ Duplicate ออกมา ซึ่งแนะนำให้ Duplicate ดีกว่า กันพลาด Figma มีข้อดีที่สามารถ Comment ใส่รายละเอียดให้แต่ละเวอร์ชันได้ว่า เราทำการเปลี่ยนแปลงอะไรไว้บ้าง ทำให้การดูความเปลี่ยนแปลง หรือหยิบเวอร์ชั่นมาใช้ง่ายกว่าเดิม

ไม่ว่าจะตัวไหนคุณก็หมดห่วงเรื่องงานวาร์ปได้เลย

7. ราคาและความคุ้มค่า

XD และ Figma มีให้ใช้ฟรีที่อุปกรณ์ครบมือ จะมีเพียงเรื่องของการเพิ่มจำนวน Additional editor ในทั้งสองซอฟต์แวร์ และ จำนวนโปรเจ็กต์ที่สามารถสร้างได้ใน Figma แต่ต้องทำความเข้าใจก่อนว่า โปรเจ็กต์นั้นไม่ใช่ไฟล์ ให้มองว่า โปรเจ็กต์คือ โฟลเดอร์ใหญ่ ที่เก็บไฟล์ได้หลายไฟล์ ตัวฟรีก็ยังสร้างงานได้หลายชิ้นอยู่เหมือนกัน แต่ให้ Figma คะแนนนำหน่อย เพราะว่าเค้าให้ Unlimited Cloud Storage ส่วน XD ให้พื้นที่ 2 GB

สำหรับคนที่ใช้โปรดักต์อื่นของ Adobe อยู่แล้วและ Subscribe แบบเหมาทุกซอฟต์แวร์ไว้ – XD น่าจะเป็นตัวที่ถูกที่สุด เพราะไม่ต้องเสียอะไรเพิ่มเลย ได้ทั้งเครื่องมือที่พร้อม Interface ที่สวยงาม Prototyping ที่แข็งแรง Creative Cloud ที่เชื่อมกับโปรแกรมตระกูล Adobe และ Handoff ให้ทีม Dev ก็ทำได้เช่นกัน

Sketch จะเป็นการขายขาด โดยที่อัปเดตเวอร์ชั่นได้ตลอดหนึ่งปีนั้น ถ้าหมดปีก็ยังใช้ได้แต่ว่าจะเป็นเวอร์ชั่นเดิม แต่เทคโนโลยีพัฒนารวดเร็วมากแบบที่ว่า เมื่อก่อน Sketch จะเข้ามาดู Inspect ก็ต้องมี 1 ที่นั่งสำหรับ Dev ทำให้เขาต้องใช้ Zeplin มาช่วย ตัว Sketch เองยังต้องปรับปรุงเรื่อง inspect อยู่ ถ้าทำได้ก็จะแชร์ Inspect View ให้เข้ามาแบบไม่เสียที่ได้แล้ว กว่าจะมาถึงตรงนี้ก็ผ่านการอัปเดตมามากมาย สุดท้ายคุณก็จะต้องเสียเงินเป็นรายปีให้กับเขาเพื่ออัปเดตอยู่ดี (แต่จะไม่ต่อก็ได้ เพราะซื้อครั้งเดียวใช้ได้ตลอดไป เพียงแค่ไม่มีอัปเดต)

ข้อดีของ Sketch เลยคือ ถ้าใช้ยาว ราคาปีต่อไปจะถูกลง ราคาคิดเป็น 1 โปรแกรมพร้อม 1 ที่นั่ง คนอื่น ๆ ที่ตามมาคือซื้อที่นั่งเพิ่ม สำหรับ Personal license ซื้อครั้งเดียว 99 เหรียญ แต่ถ้าต่อ License จะลดเหลือ 79 เหรียญ ถ้าไม่ต่อ License ก็จะไม่ได้รับการอัปเดตและอัปโหลดงานใหม่ ๆ เข้า Cloud ไม่ได้ แต่ยังดาวน์โหลดได้อยู่ ในส่วนการดึง Asset อะไรมาใช้ ให้การทำงานสะดวกขึ้น มันคือการซื้อปีต่อปีเหมือนกันอันอื่น ความเก๋าของ Sketch อีกอย่างคือความเป็น Native Mac App ที่มีความเสถียรและ Plug-in ที่มากกว่าใครเขา อุดฟีเจอร์หลาย ๆ ส่วนที่เขายังทำได้ไม่เต็มที่ (คาดว่าหลังจากที่ปล่อยตัวเต็มของ Inspector ออกมาแล้ว น่าจะมีการเปลี่ยนแปลงราคา)

Figma เทียบในระดับ Professional ที่ราคา 12 เหรียญ แต่จากที่เปรียบเทียบมาทั้งหมด Figma เป็นตัวที่ชนะบ่อยที่สุด ถึงจะมีบางส่วนที่ก็พอจะทดกันได้หรือทำอีกแบบหนึ่งก็ไม่ได้ลำบากก็ตาม ถ้านับแค่ตัวเดียวแล้วลื่นที่สุด คิดว่าคงต้องเป็น Figma 

ในขาของ design อาจจะไม่มีอะไรแตกต่างกันมากนัก แต่การ Share ให้กับทีมอื่น ส่วนอื่น รู้สึกว่ามันเชื่อมต่อกันได้ดีมาก ๆ ให้ประสบการณ์ที่ดีกว่าในการทำงานและพรูฟงานรวมไปถึงส่งงานต่อให้ Dev ในตัวเดียว 

อยางไรก็ตามราคาทั้งสามตัวก็ไม่ได้แตกต่างกันมากนัก ทั้งนี้ก็ขึ้นอยู่กับความถนัดในการใช้ของแต่ละคนจริง ๆ หรือเงื่อนไขของบริษัทต่าง ๆ 

เทคโนโลยีเป็นเรื่องพัฒนาไวมาก เรื่องแบบนี้ใครช้าก็จะโดนกลืนหายไป อย่างช่วงแรกของ XD ก็ไม่ได้มี Document history ที่ช่วยเซฟเวอร์ชันต่าง ๆ ไว้เหมือนกัน Figma ที่ตอนแรกไม่มี Plug-in เลยก็สร้างจนมี community ขนาดใหญ่ Sketch ก็เริ่มทำฟีเจอร์ Inspector ขึ้นมา ข้อได้เปรียบคือฐานลูกค้าที่มีอยู่เดิมของ Sketch มีเยอะ Plugin ต่าง ๆ มากมายแต่ระบบ ฟีเจอร์บางอย่าง ต้องพัฒนาให้เพียบพร้อมมากขึ้น สิ่งที่น่าสนใจแต่ละซอฟต์แวร์จะเดินเกมยังไงต่อไปเพื่อให้ตัวเขาไม่ล้าหลัง 

ไม่ว่าใครจะพัฒนา ผู้บริโภคคือกลุ่มคนที่ได้ประโยชน์จากการมีเทคโนโลยีที่ยอดเยี่ยมใช้

และทั้งสามตัวนี้จะทำงานให้ชิ้นงานของคุณออกมาได้ไวกว่าการไม่ใช้ UX/UI Design Tool แน่นอน

สำหรับใครที่อยากรู้ว่าเหล่าดีไซน์เนอร์ใช้ซอฟต์แวร์ตัวไหนในการทำงานแต่ละด้านอย่างไรบ้าง สามารถเข้าไปดูผลสำรวจปี 2020 จาก UXTOOLS.co ได้ที่นี่

ต้องการเปลี่ยนซอฟต์แวร์แต่ห่วงงานเก่า?

ทั้ง XD และ Figma สามารถเปิดไฟล์ของ Sketch ได้ แต่ถ้าคุณต้องการเปิดไฟล์ XD ใน Sketch หรือ Figma คุณจะต้อง Export ไฟล์ออกมาเป็นไฟล์ .svg เสียก่อน และนำมาเปิดได้เช่นกัน

หากต้องการจะเปิดไฟล์ Figma ในโปรแกรมอื่น สามารถเลือก Copy as .svg แล้วทำไป paste ในโปรแกรมอื่นได้เลย

สรุป

สำหรับ The Growth Master มองว่า Figma เป็นซอฟต์แวร์ที่ร้อนแรงและน่าใช้มากในปี 2020 ที่ผ่านมา ความครบเครื่องของเขาทำให้ทันทีที่ได้รู้จัก อดไม่ได้จริง ๆ ที่จะหยิบมาแชร์กันแบบนี้ ทั้ง Web-based Software, การทำงานร่วมกันที่ไร้รอยต่อ, ครบเครื่องฟีเจอร์ทั้ง Design, Prototype, Developer Handoff ถึงแม้จะมีบางจุดที่ XD หรือ Sketch โดดเด่นกว่า แต่โดยภาพรวม Figma เป็นซอฟต์แวร์ที่น่าหยิบมาใช้มาก

แต่อย่างไรก็ตาม ใน XD และ Sketch ก็ไม่ได้ด้อยกว่ากันเลย จุดที่ยังเพิ่มเติมได้อีก อาจใช้ Plug-in ทดแทนการทำงานให้ใกล้เคียงกันที่สุดได้ หลังจากที่อ่านบทความนี้ (หรือดูผ่านช่องทาง Youtube) แล้ว เราอยากให้คุณลองใช้ลองสัมผัสด้วยตัวเองเพิ่มเติมว่าแบบเข้ามือของคุณมากที่สุด

และนอกจากซอฟต์แวร์ 3 ตัวนี้ ยังมีซอฟต์แวร์อื่น ๆ ที่น่าสนใจ เป็นทางเลือกในการออกแบบ UX/UI อีก (เช่น Invision,  Framer, …) 

หวังว่าคุณจะได้เจอกับเครื่องมือที่ถูกใจของคุณ

เริ่มต้นใช้งาน Sketch ได้ที่นี่ 

เริ่มต้นใช้งาน Figma ได้ที่นี่

เริ่มต้นใช้งาน Adobe XD ได้ที่นี่

ช่องทางอัปเดตซอฟต์แวร์กับ The Growth Master

ติดตาม Youtube Channel ‘The Growth Master’ และ We Need TOOL Talk ได้ก่อนใคร ไม่พลาดทุกการแชร์ซอฟต์แวร์น่าใช้ที่จะทำให้การทำงานของคุณง่ายขึ้น

และช่องทางอัปเดตข่าวสารการตลาดที่สดใหม่

Facebook : The Growth Master

Facebook Group : TechTribe Thailand

Blockdit : The Growth Master

Line@ : @thegrowthmaster

===================================

สามารถให้กำลังใจพวกเราได้ผ่านการกดไลก์ กดแชร์ และกดติดตาม รวมไปถึงการสมัครใช้งานผ่านลิงก์ด้านบน โดย The Growth Master จะได้รับค่าแนะนำจากซอฟต์แวร์บางตัวเท่านั้นเมื่อมีการกดสมัครใช้งานซอฟต์แวร์นั้น ๆ