การใช้งาน Layer ใน Figma เปรียบเสมือนการจัดวางแผ่นใสซ้อนกันครับ ยิ่ง Layer อยู่ด้านบนสุดในรายชื่อ (Panel ซ้ายมือ) วัตถุนั้นก็จะปรากฏอยู่ด้านหน้าสุดบนหน้าจอ การจัดการ Layer ที่ดีจะช่วยให้งานออกแบบของคุณเป็นระเบียบและแก้ไขได้รวดเร็วขึ้น
การจัดการพื้นฐาน (Basics)
ใน Panel ด้านซ้ายมือ คุณสามารถจัดการ Layer ได้ดังนี้
- การเปลี่ยนชื่อ: ดับเบิลคลิกที่ชื่อ Layer หรือกด
Ctrl + R(Windows) /Cmd + R(Mac) เพื่อตั้งชื่อให้สื่อความหมาย - การจัดลำดับ (Order): ลาก Layer ขึ้น-ลงเพื่อเปลี่ยนลำดับการซ้อนทับ
- Bring to Front:
](ส่งไปหน้าสุด) - Send to Back:
[(ส่งไปหลังสุด)
- Bring to Front:
- การซ่อน/ล็อก: * คลิกรูป ดวงตา เพื่อซ่อน Layer
- คลิกรูป แม่กุญแจ เพื่อล็อกไม่ให้ขยับเขยื้อน
การรวมกลุ่ม (Grouping & Framing)
นี่คือหัวใจสำคัญของการทำ UI Design ใน Figma
| ฟีเจอร์ | คำสั่งลัด | การใช้งาน |
| Group Selection | Ctrl + G | ใช้รวมวัตถุเข้าด้วยกันเพื่อความสะดวกในการย้าย ขอบเขตจะเปลี่ยนตามวัตถุข้างในเสมอ |
| Frame Selection | Ctrl + Alt + G | แนะนำให้ใช้มากกว่า Group เพราะสามารถกำหนดขนาดตายตัว ใส่สีพื้นหลัง และใช้ฟีเจอร์ Auto Layout ได้ |
| Ungroup | Ctrl + Shift + G | ยกเลิกการรวมกลุ่ม |
การใช้ Auto Layout
Auto Layout คือพลังที่แท้จริงของ Layer ใน Figma ช่วยให้ Layer จัดเรียงตัวเองได้อัตโนมัติ (เหมือนเขียน Code CSS Flexbox)
- วิธีใช้: เลือก Layer ที่ต้องการแล้วกด
Shift + A - ประโยชน์: เมื่อคุณพิมพ์ข้อความยาวขึ้น หรือลบปุ่มออก Layer อื่นๆ จะขยับที่ให้อัตโนมัติ ไม่ต้องคอยลากจัดใหม่เอง
Layer Hierarchy (ลำดับชั้น)
โครงสร้าง Layer ที่ดีควรไล่เรียงจากใหญ่ไปเล็ก
- Page: หน้ากระดาษรวม (เช่น Design, Prototype, Archive)
- Section: ใช้แบ่งโซนงานในหน้าเดียว (เช่น Landing Page, Dashboard)
- Frame (Artboard): ขนาดหน้าจอ เช่น iPhone 15, Desktop
- Component / Instance: ชิ้นส่วนที่ใช้ซ้ำ เช่น Button, Navbar
- Shapes / Text: ระดับล่างสุดที่เป็นตัวเนื้องาน
เคล็ดลับ
- ใช้ Search & Filter: ด้านบนของ Layer Panel จะมีรูปแว่นขยาย คุณสามารถกรองหาเฉพาะ Layer ที่เป็น Text, Image หรือ Component ได้
- Select Deeply: กด
Ctrl(หรือCmd) ค้างไว้แล้วคลิกที่วัตถุ เพื่อเจาะจงเลือก Layer ตัวในสุดที่ซ้อนอยู่ในหลายๆ Group/Frame
อ่านเพิ่มเติม