Figma เป็นหนึ่งในเครื่องมือสามัญสำหรับนักออกแบบ User Interface (UI) ในปัจจุบัน ซึ่งเครื่องมือนี้มีความสามารถเยอะมาก ทว่าไม่ใช่นักออกแบบทุกคนที่จะสามารถใช้งานเครื่องมือเหล่านี้ให้เต็มประสิทธิภาพได้ หากไม่ได้เข้าใจหลักการที่ถูกต้อง

วันนี้เรามี กฎ 10 ข้อสำหรับนักออกแบบ UI ที่จะทำให้การทำงานมีประสิทธิภาพมากขึ้น อ้างอิงจากนักออกแบบ UI มืออาชีพ มาดูกันว่ามีอะไรบ้าง

1. ถ้า Element นั้นต้องใช้มากกว่า 1 ครั้ง จงสร้างเป็น “Component”
ในโปรแกรม Figma เราจะเรียก Element ที่สามารถนำไปใช้ในงานออกแบบว่า “Component” เพื่อให้งานออกแบบในโปรเจคมีความสอดคล้องไปในทิศทางเดียวกัน ไม่ว่าจะเป็น ปุ่ม ไอคอน หรือเลย์เอ้าท์ นอกจากนี้การใช้ Component ยังทำให้มองเห็นได้ทันทีว่างานออกแบบในภาพรวมจะเป็นอย่างไร โดยการปรับแก้จากที่เดียว

2. เรา (แทบจะ) ไม่ควรใช้ “Group”
ในขณะที่การทำงานบน Illustrator การสร้าง Group เป็นเรื่องปกติมาก แต่บน Figma กลับกลายเป็นเครื่องมือที่แทบจะไม่ต้องใช้ เพราะเขาใช้สิ่งที่เรียกว่า “Frame” กันแทน สาเหตุเป็นเพราะการปรับขนาดของ Group ทำให้ทุกอย่างปรับตามเท่า ๆ กัน ในขณะที่ Frame สามารถปรับขนาดแต่ละชิ้นให้ต่างกัน หรือมีข้อจำกัดต่อกันได้

3. “Auto Layout” คือเพื่อนที่ดีที่สุด
Auto Layout เป็นหนึ่งในฟีเจอร์สุดเจ๋งของ Figma ที่ทำให้งานออกแบบมีความยืดหยุ่น และมีรองรับการเติบโตของโปรเจคในอนาคต Auto Layout ช่วยให้นักออกแบบปรับระยะห่างได้อย่างอย่างรวดเร็ว หรือเพิ่มและลบเนื้อหาโดยไม่ต้องค่อย ๆ เลื่อนแต่ละ Pixel เพื่อจัดองค์ประกอบใหม่

4. ทำให้ทุกอย่างสอดคล้องไปในทิศทางเดียวกัน ข้อความ การเว้นพื้นที่ และสี
หนึ่งในปัญหาของนักออกแบบ คือ การขาดความสอดคล้อง และการจัดระเบียบองค์ประกอบต่าง ๆ การเว้นพื้นที่แบบสุ่ม ๆ ใช้ eye dropper ในการดูดค่าสีบ่อย ๆ หรือคัดลอกและวางองค์ประกอบจากหน้าหนึ่งไปยังอีกหน้าหนึ่ง ซึ่งเป็นสิ่งที่นักแบบ UI มืออาชีพแนะนำให้หลีกเลี่ยง

ลองหันมาใช้ระบบ “Grid Spacing” เพื่อให้การเว้นพื้นที่ดูเป็นระเบียบ กำหนดและสร้าง Color Styles และ Text Styles ไว้สำหรับใช้กับทั้งงานออกแบบ เพื่อให้งานไปในทิศทางเดียวกันและมีความเป็นระบบที่ดี

5. จัดการไฟล์ให้มีระเบียบเสมอ
ข้อนี้เป็นเรื่องง่าย ๆ ที่หลายคนมองข้ามไป การทำไฟล์ให้เรียบร้อย เป็นระเบียบจะทำให้ค้นหาเจอง่าย อ่านเข้าใจง่าย เผื่อให้ลูกค้า ทีมงาน หรือนักออกแบบคนอื่นๆ เข้ามาดู หลักการรักษาระเบียบไฟล์

6. สร้าง “Archive” ไว้เก็บงานออกแบบเก่า
ถึงแม้จะเป็นงานออกแบบที่ไม่ใช้แล้ว หรือไม่ได้รับการ Approve ก็ไม่ควรจะลบทิ้ง เพราะหลายครั้งนักออกแบบก็จำเป็นต้องอ้างอิงงานออกแบบเวอร์ชันเก่า หรือนำมาต่อยอด ปรับปรุง กระทั่งบางครั้งทีมงานอาจจะเปลี่ยนใจชอบงานเวอร์ชันเก่าก็เป็นได้ ดังนั้นแทนที่จะลบ จึงควรสร้างหน้าไว้สำหรับรองรับงานเก่า หรืองานที่ไม่ใช่แล้วจะดีกว่า

7. เรียนรู้การใช้ “Shortcut”
การใช้ Keyboard Shortcuts ให้คล่องเป็นหนึ่งในการลงทุนที่คุ้มค่าที่สุดสำหรับผู้ที่ต้องทำงานกับ Figma การใช้ Shortcut ในช่วงแรกอาจจะต้องใช้เวลาในการเรียนรู้และจดจำบ้าง แต่หากใช้ไปสักพักหนึ่ง การขยับนิ้วกด Shortcut จะกลายเป็นธรรมชาติไปโดยปริยาย

8. อย่าทำ “Prototype” ในพื้นที่ที่ออกแบบ
การทำ Prototype ในพื้นที่ออกแบบจะทำให้ไฟล์งานเละเทะ วุ่นวาย และสับสน เนื่องจากไฟล์สำหรับโชว์ Prototype กับไฟล์สุดท้ายที่ต้องส่งให้ Developer เอาไปทำงานต่อมักจะมีโครงสร้างที่แตกต่างกัน ดังนั้นทางที่ดีควรจะแยกจากกัน

9. ใช้ “Community Files” ให้เป็นประโยชน์
Figma community เป็นชุมชนแบ่งปันความรู้ที่เต็มไปด้วยสาระที่มีประโยชน์มากมาย การทดลองสิ่งใหม่ ๆ แอนิเมชั่น design system และอื่น ๆ อีกมากมาย เหมาะอย่างยิ่งสำหรับเป็นพื้นหาแรงบันดาลใน และอ้างอิงงานออกแบบ เพื่อเพิ่มประสิทธิภาพการทำงาน และตัวคุณเองก็สามารถแบ่งปันงานออกแบบของคุณได้เช่นกัน ลองเข้าไปเยี่ยมชุมชน Figma community ดูกันได้

10. พรีเซนท์งานให้ไหลลื่น
บ่อยครั้งที่นักออกแบบ UI ใช้ Figma ในการพรีเซนท์งานแบบผิดวิธี เราขอแนะนำวิธีการพรีเซนท์งานที่ไหลลื่นด้วยการใช้ Prototype หรือหากยังไม่มี Prototype ก็สามารถใช้วิธีการเลือก Frame หรือ Component ที่ต้องการพรีเซนท์งานออกแบบได้

Source : https://uxdesign.cc/10-commandments-in-figma-113d95144a22

กฎเหล่านี้เป็นเพียงกฎเบื้องต้นที่น่าจะเป็นประโยชน์สำหรับผู้ที่สนใจเริ่มต้นงาน UI Design บน Figma

📢 สำหรับใครที่สนใจในการออกแบบผลิตภัณฑ์ดิจิทัล True Digital Academy ขอแนะนำคอร์ส DIY: User Interface With ‘Figma’ เวิร์กชอป 2 วันเต็ม ๆ เรียนรู้และลงมือออกแบบหน้าตาแอปพลิเคชั่นจริง ๆ และสามารถใช้โปรแกรม Figma ในการออกแบบหน้าตาแอปพลิเคชั่นขั้นพื้นฐาน ให้มีความสวยงาม และสร้างประสบการณ์ที่ดีให้กับผู้ใช้

📌สามารถดูรายละเอียดและสำรองที่นั่งได้ที่:: http://bit.ly/3JyM6T9

————————————————-

สามารถติดตามความรู้และคอร์สเรียนที่น่าสนใจจาก True Digital Academy ได้ทุกช่องทาง
Website – https://bit.ly/3e9QZPw
Facebook – https://bit.ly/391XSkF
LinkedIn – https://bit.ly/3p7x08V
Instagram – https://bit.ly/2LwX5Ra
TiKTok – https://bit.ly/3v8e0wV
YouTube – https://bit.ly/3is5lCx

Home

Blogs

tag

figma

พื้นฐาน UI Design สำหรับมือใหม่: ทำไมเราทุกคนควรเข้าใจการออกแบบ User Interface

Grid System เรื่องสำคัญในงาน UI ที่ Designer ต้องรู้!

10 เทคนิค ใช้ Figma ทำ UI Design ง่ายขึ้น

รู้จัก 'Figma' Tool ออกแบบ Web/App ที่ดีไซน์เนอร์ทั่วโลกเลือกใช้

5 กฎ ออกแบบ App/Web เพื่อมัดใจผู้ใช้งาน