เคยไหม ? Design บน Figma เสร็จแล้ว แต่พอส่งต่อให้ทีมกลับเจอคำถามกลับมาไม่หยุด จะดีแค่ไหนถ้าเราสามารถจัดแจงไฟล์ของเราให้เป็นระเบียบและเข้าใจง่าย ทั้งสำหรับทีมเราเองและ Stakeholders บทความนี้จะมาแชร์เคล็ดลับการจัดไฟล์ Figma ที่จะช่วยให้การทำงานระหว่างทีมลื่นไหลกว่าเดิม แถมยังช่วยให้ทีมทำงานได้มีประสิทธิภาพมากขึ้น ! 🚀
ลองเปลี่ยนไปมองในมุมที่ไม่ใช่ Designer
แน่นอนว่าถ้า Designer หรือ Dev ซึ่งคุ้นเคยกับการพัฒนา Digital Product อยู่แล้ว ต้องเข้ามาดูไฟล์ของคุณก็อาจจะทำความเข้าใจรายละเอียดในไฟล์ได้ไม่ยาก แต่หากเป็น Stakeholders ฝ่ายอื่นๆ เช่น Business หรือลูกค้าที่อาจจะไม่คุ้นชินกับตัว Figma และการทำความเข้าใจ Flow ต่างๆ เป็นทุนเดิมอยู่แล้วก็อาจจะเกิดความสับสนขึ้น
ดังนั้น ยิ่งถ้าคุณต้องทำงานกับ Stakeholders หลายๆ ฝ่าย คุณต้องคำนึงอยู่เสมอว่าละฝ่ายมีมุมมองและความเข้าใจเกี่ยวกับงาน Design แตกต่างกัน ในฐานะ Designer คุณสามารถช่วยอำนวยความสะดวกให้กับพวกเขาได้ โดยลองมองในมุมที่ว่า หากคุณที่ไม่ใช่ Designer จะต้องเข้ามาดูไฟล์ คุณจะจัดระเบียบ Components, Section, User Flow ตลอดจนการตั้งชื่อและการใช้ Wording ต่างๆ อย่างไร ให้สามารถทำความเข้าใจได้ง่ายและเข้าถึงได้สะดวกมากที่สุด
1. เริ่มจากเรื่องง่ายๆ อย่างการตั้งชื่อ !
- Frame – เรื่องของการตั้งชื่อเป็นเรื่องที่สำคัญสำหรับ Dev เป็นอย่างมาก เนื่องจากเวลา Dev เข้ามาดูไฟล์ของคุณเพื่อนำไปพัฒนาต่อ การที่ต้องเลือกกดดูองค์ประกอบของ Design ที่มี Layer หรือ Frame ซ้อนกันเยอะๆ แล้วต้องมานั่งหาว่า Frame 126 คือส่วนไหนของ Design คงเป็นเรื่องน่าปวดหัวอยู่พอสมควร ดังนั้น เราจึงควรตั้งชื่อให้กับองค์ประกอบต่างๆ ของ Design เช่น Container, Text หรือ Image ฯลฯ เพื่อให้ทั้งตัวเราเองและ Dev สามารถทำงานได้ง่ายขึ้น โดยไม่ต้องมานั่งหาว่าส่วนที่คุณต้องการจะเลือกดูหรือแก้ไขอยู่ใน Frame ไหน
- State & Variant – ในกรณีที่ Component ของคุณมีหลาย State เช่น Hover, Presss หรือ Disabled ตลอดจนมีหลาย Variant การตั้งชื่อให้กับมัน จะทำให้ Dev เข้าใจได้ง่ายขึ้นว่า องค์ประกอบนั้นๆ อยู้ในสถานะไหนหรือรูปแบบใด และเข้าใจว่ามันคือ Component เดียวกัน
- Name – การเลือกใช้คำที่นำมาตั้งชื่อก็สำคัญเช่นกัน อย่าลืมเลือกคำที่สื่อความหมายแบบ Universal เช่น ในการตั้งชื่อ Component ต่างๆ คุณอาจจะเข้าไปดูใน Library ออนไลน์ต่างๆ เพื่อดูว่า Component แต่ละแบบมีศัพท์เรียกว่าอะไร เพื่อที่ทีม Dev จะได้รู้ว่าจะต้อง Build Component ออกมาประมาณไหน
- Search – เหตุผลที่คุณจะต้องพยายามตั้งชื่อให้ได้มากที่สุด คือ ในกรณีที่ไฟล์ของคุณมีขนาดใหญ่ คุณจะสามารถ Search หาองค์ประกอบต่างๆ ภายใน Design ได้อย่างง่ายดาย อีกทั้งคุณยังสามารถ Seacrh, Replace หรือแก้ไขงานของคุณได้ในไม่กี่คลิก
2. การจัดหมวดหมู่ทุกอย่างให้เป็นสัดเป็นส่วน
- การจัดหมวดหมู่ภายใน Page นั้นๆ – หลักการของจัดหมวดหมู่นั้นไม่ได้มีความซับซ้อน เพียงแค่คุณจัดองค์ประกอบประเภทเดียวกันให้อยู่ใน Section เดียวกัน โดยใช้เครื่องมือ Section พร้อมกับตั้งชื่อและวาง Text Label ไว้ รวมถึงการใช้ Auto Layout จัดระเบียบองค์ประกอบย่อยๆ ใน Section ให้อยู่ในกลุ่มเดียวกัน พร้อม Label ทั้งนี้ เพื่อที่ผู้ที่เข้ามาชมจะ
สามารถสังเกตุเห็นหมวดหมู่ต่างๆ ได้ง่าย
- การจัดหมวดหมู่ของ Page ในไฟล์ – ในบางครั้งการจัดหมวดหมู่ทุกอย่างให้อยู่ใน Page เดียวอาจจะยังไม่เพียงพอ หรือจำนวน Section ในหน้าๆ หนึ่งอาจจะมีเยอะเกินไปจน Scroll ดูลำบาก คุณอาจจะต้องแยกหมวดหมู่ออกมาให้อยู่ในหลายๆ Page ในรูปแบบของการ Group Page ต่างๆ เข้าด้วยกัน ดังตัวอย่างที่เห็นในรูปประกอบด้านล่างนี้
Tip & Tricks
- เมื่อคุณตั้งชื่อ Page เวลาคุณพิมพ์เครื่องหมาย – ติดกันจำนวนมาก Figma จะทำการแปลงหน้านั้นๆ ให้เป็น Divider โดยอัตโนมัติ
- การนำอีโมจิมาใช้ในการตั้งชื่อ Page ต่างๆ สามารถสร้างความ Intuitive และลดความจำเจให้กับไฟล์ของคุณได้
3. การ Note สิ่งที่ทีมของคุณจำเป็นต้องรู้
ในบางครั้งอาจมีรายละเอียดที่คุณไม่สามารถแสดงออกมาได้ด้วยตัว Design เพียงอย่างเดียว ดังนั้น คุณจึงควร Annotate รายละเอียดต่างๆ ให้ทีมคุณรับทราบ เช่น Image Ratio และ Behavior ต่างๆ ของ Design เพื่อที่ทีมคุณจะมีคำถามกลับมาน้อยที่สุด ซึ่งในเรื่องของตัวช่วยในการ Annotate Design คุณอาจจะใช้ Widget เช่น Simple Annotate, Notes หรือ Feature Description ของ Figma เป็นต้น
4. User Flow ที่ไม่โยงเป็นใยแมงมุมและเป็นเส้นตรง
คุณอาจจะเคยเห็นรูปแบบการจัดวาง User Flow ที่เริ่มจาก Screen แรกแล้วมีลูกศรโยงทุกๆ Flow เข้าด้วยกัน ซึ่งการวาง Flow ดังกล่าวจะทำให้เกิดความสับสนและดูรายละเอียดได้ยากว่าแต่ละลูกศรกำลังแสดง Action ของ Flow ไหนอยู่ ดังนั้น การจัดวาง User Flow ที่ดีจึงควรมีลักษณะแยกแต่ละ Flow เช่น Flow 1 : Login และ Flow 2 : Register เป็นต้น อีกทั้ง Flow ควรมีลักษณะเป็นเส้นตรง เพื่อที่ทีมของคุณจะสามารถอ่านและทำความเข้าใจได้ง่ายขึ้น
แม้ว่าการแสดง User Flow แบบเป็นเส้นตรงจะทำให้ทีมคุณทำความเข้าใจได้ง่ายขึ้น แต่อย่างไรก็ตาม Designer อาจจะต้องใช้เวลามากขึ้น ในการ Copy / Paste แต่ละ Screen ซ้ำๆ จนกว่าจะสร้าง Flow แยกครบทุก Flow ดังนั้น เราจึงแนะนำให้คุณสร้างแต่ละ Screen ให้เป็น Component เพื่อที่คุณจะประหยัดเวลามากขึ้น และป้องกันความผิดพลาดที่ Design ที่จะถูกแก้ไขโดยไม่ได้ตั้งใจ
5. Clean สิ่งที่ไม่จำเป็นออกจากไฟล์
ในบางครั้งที่คุณ Copy/Paste Layout คุณอาจจะลืมกำจัด Frame ส่วนเกินออก หากคุณปล่อยทิ้งไว้มันก็จะกลายเป็นองค์ประกอบที่ไม่มีความหมาย และสร้างความสับสนให้กับทีมของคุณว่ามันมีหน้าที่อะไร ? หรือมันยังมีความจำเป็นอยู่มั้ย ? ดังนั้น คุณควรลบ Frame, Image, Component หรือองค์ประกอบใดๆ ก็ตามที่ไม่จำเป็นกับ Design ออก เพื่อสร้างความเป็นระเบียบให้กับงานของคุณมากขึ้น และลดความผิดพลาดเมื่อทีมของคุณจะต้องนำ Design ไปพัฒนาต่อ
นอกเหนือจากการกำจัดส่วนเกินออกจากไฟล์ หากเป็นในกรณีที่คุณมี Design เวอร์ชั่นที่ไม่ใช้แล้ว แต่คุณยังอยากเก็บไว้เป็น Reference คุณสามารถสร้าง Page ในลักษณะที่เป็น Archive เอาไว้เก็บของที่ไม่ใช้แล้วได้ด้วย ทั้งนี้ เผื่อในกรณีที่คุณอาจจะต้องกลับมาใช้ Design เวอร์ชั่นเก่าในอนาคต
6. ปุ่ม Preview ช่วยคุณได้
ในกรณีที่ Stakeholders เข้ามาในไฟล์เพื่อที่จะเล่น Prototype หาก Prototype ของคุณมีหลาย Flow และทีมของคุณอาจจะไม่คุ้นชินกับการใช้งาน Figma สิ่งที่คุณสามารถทำให้ทุกอย่างง่ายขึ้นได้ คือ การสร้างปุ่ม Preview ให้แต่ละ Flow หรือ Interactive Prototype ต่างๆ เพื่อเป็นทางลัดให้ทีมของคุณสามารถเข้ามาเลือกกด Preview ได้สะดวกมากขึ้น
วิธีการสร้างปุ่ม Preview ก็ไม่ได้มีความซับซ้อน เพียงแค่คุณ Design หน้าตาปุ่มออกมาตามชอบ จากนั้นก็ทำการ Hyperlink ลิงก์ Prototype กับ Text ของปุ่ม และนำมันไปวางไว้ใกล้ๆ กับชื่อ User Flow
7. รับ Feedback จากทีมและศึกษาจาก Designer มืออาชีพ !
หากองค์กรของคุณยังไม่มี Template หรือ Structure การจัดไฟล์ที่ชัดเจน คุณอาจจะรู้สึกไม่แน่ใจว่าแนวทางการจัดไฟล์ของคุณมาถูกทางหรือไม่ สิ่งที่คุณทำได้คือการลองรับ Feedback จาก Stakeholders หลายๆ ฝ่ายว่าพวกเขาเจออุปสรรคหรือความสับสนใดๆ ระหว่างเยี่ยมชมไฟล์ของคุณมากน้อยเพียงใด อีกทั้งคุณยังสามารถค้นหา Design File Template จาก Figma Community เพื่อที่คุณจะสามารถศึกษาว่า Designer คนอื่นๆ มีแนวทางการบริหารจัดการ Design ไฟล์อย่างไรบ้าง ซึ่งตัวอย่างไฟล์ที่แนะนำ คือ Template ของคุณ Rachel How โดยสามารถดูตัวอย่างได้ผ่านทาง https://www.figma.com/design/P0QX361UzeBRRwo6yp7Z7p/Figma-File-Template-(Community)?node-id=2-27&t=QFNgloZJVWwzmbpI-1
ทั้งหมดนี้ คือ เคล็ดลับและแนวทางในการจัดไฟล์ที่นำมาแบ่งปันให้กับเพื่อนๆ ที่ยังไม่แน่ใจว่าตัวเองควรจัดไฟล์ Figma ของตัวเองไปในทิศทางไหน ถ้าใครมีเคล็ดลับหรือตัวอย่างการจัดไฟล์ดีๆ ก็สามารถนำมาแบ่งปันกันได้ผ่านช่อง Comment ด้านล่างนี้ค่ะ 🙂
