ต้องท้าวความก่อน การแนะนำการใช้ Figma ของผมครั้งนี้ มาจากประสบการณ์จริง ใช้ทำโปรเจคจริง เริ่มจากศูนย์ ไม่รู้จัก Figma ตอนเขียนบทความนี้ก็คือเวลาที่ลองใช้โปรแกรมไปได้ประมาณเดือนนึง โดยเรื่องมีอยู่ว่า สักช่วงปลายปี 63 อยู่ดีๆที่ทำงานก็ Assign มาให้ใช้ Figma ออกแบบ UX/UI แบบมึนๆ โดยที่ไม่มีใครสอน ไม่มีเวลาแม้แต่จะศึกษาเอง เจอโปรแกรม เริ่มทำ ลุยเลย ซึ่งก็อะนะครับ ผมก็ไม่ได้แตะพวกโปรแกรมทำ Prototype มานานมากละ งานครั้งนี้ก็เลยถูๆไถๆไป ดังนั้นถ้าโปรแกมอื่นๆพวก Adobe XD และ Sketch ที่ผมเอามาเปรียบเทียบ มีพูดฟีเจอร์ผิด หรือฟีเจอร์ Figma บางส่วนยังไม่ใช่ ก็ต้องขออภัยล่วงหน้านะครับ
“Figma โปรแกรมออกแบบ UX/UI แห่งปี”
Figma ประวัติเป็นยังไงผมก็ไม่รู้นะครับ รู้อย่างเดียวก่อนหน้านี้ที่ผมทำ UX/UI มา ผมไม่รู้จัก แค่รู้สึกเหมือนคุ้นๆอยู่ที่หู ด้วยความสงสัย ผมจึงไปเปิด Google แล้วก็รู้ว่า
“โอ้โห Figma อยู่ในระดับ Top 3 โปรแกรมออกแบบ UX/UI เลยนี่หว่า ไม่รู้ดังที่ไทยเปล่า แต่ดังที่ต่างประเทศแน่นอน (Top 3: Sketch, Adobe XD, Figma)”
อยู่ในระดับ Top 3 อย่างนี้ ต้องมีของชัวๆ แล้วมีของอะไร?
นี่ครับของสุดยอดที่ผมเจอหลังจากลองใช้ Figma ทำโปรเจคไปได้ 1 เดือน โดยที่ไม่มีโปรยบอกมาก่อนว่ามันดียังไง
6 สิ่งสุดยอดเกือบจะลับของ Figma
- ไม่ต้องลงโปรแกรม มีเน็ต ก็ทำงานบนเว็บได้เลย : ใครทำงานบริษัท ลงโปรแกรมไม่ได้ มีคอม หลายเครื่อง Solution นี้เด็ดสุดๆ
- Share Project ทำเป็นทีมได้ แบบฟรีๆ : ก็รู้กันอยู่ว่าตัวทำ Prototype ตัวอื่นอย่าง XD กับ Sketch ต่างก็มี Feature แต่ก็ต้องแลกกับจำนวนเงินที่เพิ่มเข้ามา แต่ของ Figma นี้เริ่มต้นฟรีให้ User รวมกันแชร์ Project แก้กันได้ 2 คน โดยถ้า View Project อย่างเดียว Unlimited นี้ แต่ถ้าอยากให้มีการแก้มากกว่า 2 คน แบบไม่ต้องจ่ายเงินก็ใช้ User ID กลาง ID เดียวเลย แล้วล็อคอินพร้อมกันหลายคน (อันนี้ ไม่แนะนำนะครับ เราควรช่วยกันอุดหนุน ผู้ผลิตเขาจะได้มีทุนพัฒนา Feature ดีๆ)
- มีโหมด Inspect ดู Code สี ดูรายละเอียด CSS ตัว Prototype อย่างกับดูหน้าเว็บ เอาไปใช้ Dev ได้เลย
- Export CSS และ svg ของแต่ละ Element เช่น พวก Icon ที่ใช้ เอาไปใช้ในเว็บได้เลย โอ้ สุดยอดมาก
- มี Plug in ช่วย ใน Community ของ Figma มาช่วยทำงาน สุดยอดไปอีก
- Import ไฟล์จาก Sketch ได้ แล้ว Import ลงมาแทบไม่เพี้ยน!!!
พวกคีย์ลัดอะไร การทำงานแตกต่างหน่อยๆ แต่ก็ไม่ได้ต่างมากจนคนละโลก แต่พวกฟีเจอร์การทำงานเนื่องจากมันเป็น On Cloud เราเลยต้องยอมรับว่ามันอาจจะทำได้ไรน้อยกว่าพวกที่ลงโปรแกรมในเครื่องนิดนึง อย่างที่เห็นก็พวกฟีเจอร์ Responsive ของ Figma นี่สู้ของ Adobe XD ไม่ได้
โอเคร เพื่อนๆคงพอเห็นข้อดีข้อเสียของ Figma คร่าวๆละ งั้นต่อไปเราไปดูที่ตัวโปรแกรมกันเลย
เริ่มจากเข้าเว็บไซต์ตาม URL ด้านล่าง แล้วไปสมัคร และล็อคอินอะไรให้เรียบร้อยครับ
แพคเกจราคาก็ตามที่บอกครับ แบบฟรีแก้กันได้ 2 คน ทำได้ 3 โปรเจค มากกว่านั้นก็มีค่า Subscription รายเดือน ถ้าแบบปกติก็ประมาณ 370 บาท/เดือน และสำหรับองค์กรประมาณ 1,400 บาท/เดือน
Login มาแล้วก็จะเห็นเมนูตามหน้าจอ จะเห็นได้ว่าเราสร้าง Team เพื่อทำ Project ได้ ซึ่งในทีมนี้เราก็สามารถกำหนดสิทธิ์การดูหรือแก้ไขงานได้อย่างสบายใจ โดยถ้าใครพร้อมแล้วก็กดสร้างทีมตรงด้านซ้ายแถบเมนูและสร้าง Project เลยครับ
หลังจากที่เข้ามาก็จะได้หน้าจอที่มี Look&Feel แบบนี้ ตัวแถบเมนูด้านซ้ายเป็นที่จัดการ Project ส่วน Layer เราสามารถแบ่ง Page ย่อยใน Project ได้ กล่าวคือ 1 Project เราอาจทำหลายระบบ เช่น ระบบหน้าบ้าน หลังบ้าน เราก็ทำ UI แยกย่อยกันได้
ด้านล่างถัดลงมาก็จะเป็น Element ย่อย ซึ่งมันก็สามารถทำ Group แบ่ง Frame เหมือนโปรแกรมดีไซน์ทั่วไป
ส่วนแท็ป Asset ตัวนี้ก็จะเป็นเรื่องจัดการ Component ซึ่งเหมาะแก่การใช้ทำเรื่องพวกปุ่ม หรือ Element อะไรที่เราใช้บ่อย ซึ่ง Figma ก็รองรับรับเรื่องพวกนี้ครับ
เมนูสีดำไอคอนด้านบน ก็ไม่มีอะไรครับ ก็ไม่มี Selection Tool, Shape Tool, Frame, Drawing Tool, Text, Hand Tool และ Comment ครับ ส่วนตรงกลางก็พวก Mask,Selection
ส่วนเมนูด้านขวามี 3 แท็ป เริ่มจากส่วน Design ก็จะเป็นส่วนจัดการ Element ปรับ Frame, ปรับสี, ทำ Constraint บลาๆ นอกจากนี้ยังรอบรับ Auto Layout ด้วยนะ
แท็ป Prototype ก็จะเป็นพวกกการทำ Interaction จากหน้าไหนไปหน้าไหน ใส่เอฟเฟคเหมือนเล่นโปรแกรมจริง วิธีทำก็ง่ายๆก็คือการลากลูกศรจาก Element หนึ่งไปสู่ Element อีกหน้าหนึ่ง แล้วก็ไปกดปุ่ม Play ด้านบน ก็เล่น Prototype เราได้เลย
แท็ปสุดท้าย แท็ป Inspect อันนี้ Cool สุด เรียกว่าเป็นฟีเจอร์เด่นของ Figma ที่อันอื่นไม่มีเลย โดยแท็ปนี้จะเป็นการบอกข้อมูล CSS ของแต่ละ Element ซึ่งแจ๋มมากสำหรับการนำไปใช้ต่อของ Dev
ส่วนเมนูใน Hamburger ก็ตามในรูปเลยครับ Auto Save ไม่ต้องห่วงไฟดับ ถ้าเน็ตหลุดก็มีระบบ Offline นำเข้าไฟล์ Sketch ได้ Export Frame ออกเป็น pdf ได้ก็ดี แจ๋มไหมละ
ส่วน Plugin ก็มีมากมาย แถม Figma ยังมี Community รวบรวมพวก UI และไอคอน ไม่ต้องมานั่งวาดเองหนือรวบรวมจากที่อื่น เอามาปุ๊ป Export ออกเป็น svg ไปให้ Dev ต่อ ทำงานเร็วขึ้นไปอีก
และฟีเจอร์อื่นๆอีกมากมายที่ผมยังงมหาไม่เจอหรือผมยังคิดไม่ออก ถ้าไปเปิด Manual อาจจะเจออีกเพียบ เพื่อนๆต้องลองไปเล่นเองดูครับ
สรุปส่งท้าย
รวมๆ ผมให้ 9/10 ตัดคะแนนหน่อยไปในเรื่องฟีเจอร์ Responsive แล้วก็การใช้ปุ่มที่ผมรู้สึกขัดๆ แต่ก็แลกกับมาการที่แชร์โปรเจคกันทำงานร่วมกับทีมก็ถือได้ว่ายอดเยี่ยมมากครับ แต่ถึงอย่างไรก็ตาม สิบปากว่าไม่เท่าตาเห็น เพื่อนๆต้องลองไปเล่นเองดูครับ ไม่ต้องเป็น UX/UI Designer คนทั่วๆไปก็เล่นได้ ไม่แน่นะครับ เพื่อนๆอาจติดใจการใช้โปรแกรมนี้จนเบนสายมาทำด้านนี้เลยก็ได้ XD
