By Figma คือเครื่องมือออกแบบที่ขึ้นแท่นอันดับ 1 ในปี 2022 โดยสามารถใช้ออกแบบได้ตั้งแต่เว็บไซต์, แอปพลิเคชัน สำหรับเหล่า UX/UI Designer ทั่วโลก หรือใช้สำหรับการแบบโลโก้, artwork ต่างๆ ของสายงาน Graphic Design รวมไปถึงคนทั่วไปที่ใช้ในการออกแบบ Presentation ในรูปแบบที่มีลูกเล่นมากกว่าที่เราเคยเห็นในอดีต
Table of Contents
การทำงานร่วมกันบน Figma
Figma ให้ความสำคัญในเรื่องของการทำงานร่วมกันภายในทีม ทำให้ทีม UX/UI Design ทำงานกันได้ง่ายขึ้น ร่วมไปถึงส่งเสริมการทำระหว่างทีมที่ช่วยให้ Designer ส่งต่องานกับ Developer ได้ง่ายมากยิ่งขึ้น โดยสิ่งแรกที่เห็นได้ชัดคือตัวโปรแกรม Figma ที่ใช้งานในรูปแบบ browser-based ที่ทุกคนสามารถทำงานพร้อมกันได้ทุกที่ ทุกเวลา และยังมี Features อีกมากมายที่ช่วยให้การส่งต่องานระหว่างทีมทำได้ง่ายขึ้นกว่าเครื่องมือการออกแบบอื่นๆ
การจัดอันดับ Design Tools ในปี 2022
ก่อนที่เราจะไปดูกันว่า Figma มีฟีเจอร์เด่นๆ อะไรบ้าง เรามาดูความร้อนแรงของ Figma จากการจัดอันดับในปี 2022 ของ uxtool.co กันก่อน โดยในปีนี้ Figma ได้ครองใจเหล่านักออกแบบและได้ขึ้นแท่น UI design tool อันดับ 1 แบบทิ้งห่างโปรแกรมอื่นแบบไม่เห็นฝุ่น
ถ้าหากเราย้อนไปดูการจัดอันดับในปี 2019 ของ uxtool.co Figma ยังไม่ได้เป็นที่นิยมมากเท่าปัจจุบัน
โดย Figma ไม่ได้ขึ้นแท่นแค่เรื่องของจำนวนผู้ใช้งานเท่านั้น แต่ยังขึ้นแท่นอันดับ 1 ในด้านการทำ UI Design, Prototyping, ด้านการทำ Design systems และยังเป็นที่นิยมติด 3 อันดับแรกในการใช้ทำ Digital Whiteboarding อีกด้วย
และเรียกได้ว่ามาแรงแบบหยุดไม่อยู่จริงๆ มาแรงจนทำให้ล่าสุด Adobe บริษัทด้านการออกแบบยักษ์ใหญ่ที่ทุกคนน่าจะรู้จักกันเป็นอย่างดี ได้ออกมาเปิดเผยว่าเข้าซื้อกิจการ Figma โดยมูลค่าดีลสูงถึง 7.4 แสนล้านบาท
Figma ทำอะไรได้บ้าง?
Figma helps teams create, test, and ship better designs from start to finish.
Figma.com
Figma ออกแบบมาเพื่อช่วยงาน Design ตั้งแต่ก่อนเริ่มต้นลงมือออกแบบรวมถึงขั้นตอนทดสอบ พูดง่ายๆ ก็คือใช้งานได้ตั้งแต่วาด wireframe ไปจน prototype และ test กับ user ได้เลย
โดยแบ่ง Feature การทำงานเป็น 4 ด้านดังนี้
1. Collaboration Features
The all-in-one design tool built for collaboration
แน่นอนว่าสิ่งที่ทำให้ Figma เหนือกว่า UI Design Tools อื่นๆ คือความสามารถในการใช้งานพร้อมกันได้แบบ real-time บนเว็บ โดยไม่ต้องติดตั้งโปรแกรมในเครื่อง และไม่ต้องกด save เลยแม้แต่ครั้งเดียว
Update อยู่ตลอดเวลา พร้อมใช้งานทุก Feature ใหม่ๆ ปัญหาของโปรแกรมอื่นคือเวลามี Feature ใหม่ๆ ออกมา ต้องมานั่งอัปเดต patch ก่อน ถึงจะเริ่มใช้งานได้ แต่ Figma ไม่ต้องเลยจ้า! แถมยังช่วยให้หมดปัญหาเวอร์ชันไฟล์ไม่ตรงกันในบางโปรแกรม เพราะการที่เวอร์ชันของโปรแกรมไม่ตรงกัน อาจทำให้เวอร์ชันไฟล์ไม่ตรงกันไปด้วย จนไม่สามารถเปิดได้
Edit together in real-time ทำงานพร้อมกันได้แบบไม่ delay พร้อม Version Control สามารถดูได้ว่าใครแก้ไขอะไร ตอนไหนบ้าง และสามารถย้อนกลับไปช่วงเวลานั้นๆ ได้อีกด้วย นอกจากนี้ยังส่งต่อไฟล์ให้กันง่ายๆ เพียงแค่ส่ง link ก็สามารถทำงานร่วมกันได้ทันที เพมาะกับ remote team (การทำงานคนละที่ ไม่ต้องเข้าออฟฟิศร่วมกัน) หรือการทำงานในยุค new normal แบบนี้สุดๆ ใครที่สนใจอยากรู้เพิ่มเติมเกี่ยวกับ ประสบการณ์การทำงานแบบ remote team สามารถอ่านได้ที่นี่เลย
Better Feedback หมดปัญหาส่งไฟล์ไปมา – หมดยุคการตั้งชื่อไฟล์ Final_Final_Jing_Jing_V18 อีกต่อไป เพราะสามารถปักหมุด comment ได้แบบ real-time ไม่ต้องส่งไฟล์กันไปมา อยากคอมเมนต์ตรงไหนหรือแจ้งเตือนเพื่อนในทีมคนไหน ก็จิ้มบน frame ต่างๆ หรือพื้นที่ที่ต้องการได้เลย
Figma really brings together different parts of the team—designers, project managers, product managers, engineers, and others. The amount and quality of feedback is 10X better than before.
2. Design Features
Design, prototype, and gather feedback all in one place with Figma
ขึ้นชื่อว่าเป็น Design Tools แน่นอนว่าต้องมีฟีเจอร์ด้านงานออกแบบไว้อยู่แล้ว ซึ่งบอกเลยว่าจัดไว้ให้พร้อมสรรพ ตั้งแต่เริ่มต้นออกแบบจนถึงส่งงานต่อให้ Developer
Typo ก็ได้ สร้าง Shape ก็ง่ายดี – สร้าง Shape ได้หลากหลายด้วย Pen tool ที่คุ้นเคยกันดีอยู่แล้ว เพิ่มความสะดวกสบายด้วย Arc tool ช่วยในการสร้างโค้งเว้าต่างๆ ได้ง่ายมากขึ้น แค่คลิกๆ ลากๆ สุดท้ายทำงานกับ text หรือ typo ต่างๆ ได้ง่ายด้วย OpenType สำหรับ edit text แบบครบครัน
Auto Layout พระเอกในยุค Responsive Design – Auto-layout ฟีเจอร์เด็ดที่ตอบโจทย์ UI Designer อย่างมาก เพราะสามารถ resize สิ่งต่างๆ ได้อัตโนมัติเมื่อความยาว text เปลี่ยนแปลง และยังง่ายในการเคลื่อนย้าย Component ต่างๆ
Plugin เสริม เติมความสบาย – มี Plugin ช่วยงานออกแบบมากมายให้เลือกใช้ ตัวอย่างเช่น Unsplash, Flow diagrams, Charts, Icons, Google sheet sync เป็นต้น หรือถ้าต้องการทำ plugin สำหรับองค์กรของคุณเอง ก็สามารถสร้างและแบ่งปันกันได้
Style systems เพิ่มความ Consistent ให้งาน Design – สามารถสร้าง Style System เพื่อความถูกต้องของ CI องค์กร ป้องกันความผิดเพี้ยน ไม่ว่าจะเป็น Color, Text หรือ Effect ต่างๆ (Shadow, Stoke)
ส่งงานต่อให้ Developer ง่ายๆ ไม่ปวดหัว – เมื่อสร้างสรรค์งาน Design เรียบร้อยแล้ว ก็สามารถ Handoff Project ส่งต่อให้ Developer ล้วงแคะแกะเกา inspect code ได้ทั้ง CSS, iOS และ Android เพื่อต่อยอดสร้างแอปต่อไปได้
I want my team to spend time thinking about high level UX problems, rather than mindlessly repeating busy work. Figma helps them do that.
3. Prototyping Features
Free Prototyping Tool to Create Clickable Prototypes
คงคอนเซปต์ ครบ จบ ในโปรแกรมเดียว เมื่อเริ่มออกแบบได้แล้ว ต้องไปให้สุดถึงขั้นตอน Prototype
Prototype ได้ เหมือนเป็นแอปจริง – บอกเลยว่า Prototype ใน Figma ทำได้ครบและง่ายมาก เพียงลากวางก็เชื่อมแต่ละ page หากันได้ไม่ยาก และสามารถทำ Interaction ได้ ซึ่งจะช่วยทำให้เกิด animation เล็กๆ น้อยๆ เมื่อ click หรือ hover ได้
Advanced transitions with Smart Animate – สามารถเพิ่ม transitions ในขั้นตอนต่างๆ ได้ง่ายมาก ง่ายจน Developer ต้องโมโห เพราะหลายๆ อย่างไม่ได้เขียน Code มาง่ายๆ เหมือนที่ Designer ออกแบบมานะ (Developer ในทีมแอบกระซิบมา)
Embed Prototype – สามารถนำหน้าที่เรา Prototype ไป embed บนเว็บเพื่อความสมจริงมากยิ่งขึ้นเมื่อต้องการ test กับ user
4. Design systems features
Design, manage and deploy your design systems with Figma
นี่มันยุคของ Design Systems โดยแท้! เพราะทุกโปรแกรมหันมาให้ความสำคัญกับการออกแบบ Design Systems กันหมดแล้ว Figma ก็เช่นกัน
รวมครบใน tab เดียว – เมื่อเราสร้าง Design Systems ของเราแล้ว Figma จะรวมไว้ใน “Assets” tab ทางซ้ายมือของโปรแกรม ที่สะดวกในการใช้งานมาก อยากจะใช้ icons, backgrounds, images, avatars, fonts, buttons หรือ component ไหนที่สร้างไว้ ก็แค่ลากมาใส่ใน frame
แก้ทีเดียว แก้ครบหมดทุกหน้า – งาน design ไม่มีวันสิ้นสุด งานแก้ต้องมา งานรื้อต้องมี เมื่อเราสร้าง component ไว้แล้ว อยากจะแก้ไขก็ทำได้ไม่ยาก เพียงเปลี่ยนที่เดียว ที่อื่นที่ใช้ instance อันนั้นก็จะเปลี่ยนตามทั้งหมด
With design increasing in importance at Rakuten, Figma gives us the tools to create an expansive design system and distribute it to our design teams all around the world.
เรียกได้ว่า Feature ครบสำหรับงาน UX/UI Design จริงๆ ทำได้ตั้งแต่ก่อนเริ่มต้นออกแบบไปจนถึงทำ prototype เลย ที่สำคัญคือฟรี! ไม่ต้องจ่ายสักบาทก็สามารถทำงานทั้งหมดนี้ได้ แต่จะมีจำกัดจำนวน editors เล็กน้อย ซึ่งเหมาะมากสำหรับทีมที่กำลังมองหาเครื่องมือใหม่ๆ ใช้งานกันฟรีๆ ไปก่อน ถ้าถูกใจหรือมีทีมขนาดใหญ่ ค่อยตัดสินใจเปลี่ยน Plan เป็นแบบอื่นก็ยังทัน แถมราคาก็ไม่ได้แรงจนน่ากลัว (Figma Pricing)
หรือถ้าใครยังลังเล ระหว่าง Figma vs Adobe XD vs Sketch สามารถเข้าไปอ่านต่อได้ที่ เทียบให้ดูชัดๆ! Figma สุดยอดเครื่องมือฟรี ดีกว่าโปรแกรมอื่นยังไง?
และแน่นอนถ้าอยากเรียนรู้วิธีใช้ Figma แบบเข้าใจง่าย และใช้ประโยชน์ของเครื่องมือนี้ได้เต็มที่ มาเจอกันได้ในคอร์สออนไลน์ UI Design with Figma สอนแบบเข้าใจง่าย ปรับใช้ได้ทันที ดูรายละเอียดเพิ่มเติมได้ที่นี่
