Figma: การใช้งาน Layer

phunsanit

4 ปี ago

การใช้งาน Layer ใน Figma เปรียบเสมือนการจัดวางแผ่นใสซ้อนกันครับ ยิ่ง Layer อยู่ด้านบนสุดในรายชื่อ (Panel ซ้ายมือ) วัตถุนั้นก็จะปรากฏอยู่ด้านหน้าสุดบนหน้าจอ การจัดการ Layer ที่ดีจะช่วยให้งานออกแบบของคุณเป็นระเบียบและแก้ไขได้รวดเร็วขึ้น

การจัดการพื้นฐาน (Basics)

ใน Panel ด้านซ้ายมือ คุณสามารถจัดการ Layer ได้ดังนี้

การเปลี่ยนชื่อ: ดับเบิลคลิกที่ชื่อ Layer หรือกด Ctrl + R (Windows) / Cmd + R (Mac) เพื่อตั้งชื่อให้สื่อความหมาย
การจัดลำดับ (Order): ลาก Layer ขึ้น-ลงเพื่อเปลี่ยนลำดับการซ้อนทับ
- Bring to Front: ] (ส่งไปหน้าสุด)
- Send to Back: [ (ส่งไปหลังสุด)
การซ่อน/ล็อก: * คลิกรูป ดวงตา เพื่อซ่อน 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

อ่านเพิ่มเติม