ในฐานะ Senior Architect ที่ต้องทำงานกับทั้งงานออกแบบ (Design) และระบบฐานข้อมูล (Database) การจัดการ Object จำนวนมากใน Figma ให้มี Property ที่สอดคล้องกันจึงเป็นทักษะสำคัญ หัวข้อนี้จะไม่ได้สอนแค่การคลิกเมาส์ แต่จะพาคุณไปเข้าใจหลักการคิดเชิงระบบ (Systematic Thinking) ในการเลือกและแก้ไข Object หลายตัวพร้อมกัน โดยเปรียบเทียบการทำงานใน Figma กับหลักการของภาษา PostgreSQL เพื่อให้คุณสามารถจัดการงานออกแบบได้อย่างมีประสิทธิภาพสูงสุด
💡 หลักการเลือก Object หลายตัวใน Figma (The Selection Logic)
การเลือก Object หลายตัวใน Figma ไม่ได้เป็นเพียงการคลิก แต่คือการกำหนด ‘ชุดข้อมูล’ (Set of Data) ที่คุณต้องการแก้ไข ซึ่งหลักการนี้คล้ายกับการระบุเงื่อนไขในคำสั่ง SQL เพื่อดึงข้อมูลที่ต้องการออกมา
1. การเลือกแบบกระจายตัว (Dispersed Selection: PostgreSQL IN Clause)
เมื่อ Object ที่คุณต้องการแก้ไขไม่ได้อยู่เรียงกันเป็นระเบียบ เช่น การเลือกไอคอน 5 ตัวที่วางกระจัดกระจายบน Canvas คุณควรใช้หลักการเลือกแบบ ‘ระบุรายการ’ (IN Clause) ซึ่งก็คือการเลือกทีละตัวโดยใช้ Shift ค้างไว้
การจำลองใน PostgreSQL: แทนที่จะเลือก Object ด้วยการลากเมาส์ คุณจะกำหนด ID ของ Object ที่ต้องการแก้ไขโดยตรง:
SQL
-- เลือก Object ที่มี ID เป็น 101, 105, และ 210<br>SELECT * FROM components WHERE id IN (101, 105, 210);
การใช้งานใน Figma: คลิก Object ตัวแรก > กด Shift ค้าง > คลิก Object ตัวถัดไป (เป็นการสะสมการเลือก Object ที่ไม่ต่อเนื่องกัน)
2. การเลือกแบบช่วงต่อเนื่อง (Sequential Selection: PostgreSQL BETWEEN Clause)
หาก Object ของคุณถูกจัดเรียงอย่างเป็นระเบียบ (เช่น ปุ่มหลายปุ่มที่เรียงกันเป็นแถว) คุณสามารถใช้หลักการเลือกแบบ ‘ช่วง’ (Range) ซึ่งเทียบได้กับ BETWEEN ใน PostgreSQL
SQL
-- เลือก Object ทั้งหมดที่มี ID ตั้งแต่ 300 ถึง 350<br>SELECT * FROM elements WHERE id BETWEEN 300 AND 350;
การใช้งานใน Figma: คลิก Object ตัวแรก > กด Shift ค้าง > คลิก Object ตัวสุดท้าย Figma จะเลือก Object ทั้งหมดที่อยู่ระหว่างสองจุดนั้นให้ทันที
🛠️ การเปลี่ยน Property ทั้งกลุ่ม (Bulk Property Modification)
เมื่อคุณเลือก Object หลายตัวได้สำเร็จแล้ว (ไม่ว่าจะด้วยวิธีใด) การเปลี่ยน Property เช่น สี (Fill Color), ขนาด (Width), หรือการเพิ่ม Layer Constraint จะถูกดำเนินการพร้อมกันทั้งหมด นี่คือการทำงานของคำสั่ง UPDATE ในฐานข้อมูล
SQL
-- สมมติว่าคุณเลือก Object ที่มี ID 101, 105, 210 และต้องการเปลี่ยนสีพื้นหลังเป็นสีน้ำเงิน<br>UPDATE components<br>SET fill_color = '#007bff' <br>WHERE id IN (101, 105, 210);
ข้อควรระวัง: ก่อนการ UPDATE หรือการเปลี่ยน Property ใด ๆ ควรตรวจสอบ Object ที่เลือกทั้งหมดก่อนเสมอ เพื่อป้องกันการแก้ไขข้อมูลผิดพลาด (Data Integrity)
✅ บทสรุป: การคิดแบบ System Architect
การเลือก Object ใน Figma ที่มีประสิทธิภาพจึงไม่ใช่แค่การใช้คีย์ลัด แต่คือการคิดอย่างเป็นระบบ (System Thinking) ว่าคุณต้องการ ‘ชุดข้อมูล’ ใด (Set of IDs) และคุณต้องการ ‘ดำเนินการ’ (Action) อะไรกับชุดข้อมูลนั้น การเข้าใจหลักการ IN และ BETWEEN จะช่วยให้คุณทำงานกับ Object จำนวนมากได้อย่างรวดเร็ว แม่นยำ และเป็นมืออาชีพ เหมือนกับการเขียน Query ที่มีประสิทธิภาพใน PostgreSQL นั่นเอง