Figma Slots ฟีเจอร์ใหม่ที่ทำให้ Design System…
ปกติ design system มีไว้เพื่อควบคุมความสม่ำเสมอของแบรนด์ แต่พอใช้ไปนานๆ มันมักเกิดปัญหาเดิมๆ คือ designer อยากปรับอะไรนิดหน่อยแล้วระบบไม่ยอม สุดท้ายก็ detach component ทำของใหม่ variant เพิ่ม library บวมขึ้นเรื่อยๆ จากเครื่องมือสร้างความเป็นระเบียบ กลายเป็นระบบที่ทุกคนพยายามหลบมันแทน
Figma เลยออกแนวคิดที่เรียกว่า slots มาช่วยแก้ปัญหานี้ มันคือช่องที่กำหนดไว้ใน component ว่าบริเวณนี้สามารถใส่อะไรเข้าไปได้ เช่น icon ปุ่ม เมนู หรือ content ต่างๆ โครงสร้างหลักยังอยู่เหมือนเดิม แต่เนื้อหาข้างในเปลี่ยนได้ ทำให้ component มีความ flexible แบบเดียวกับที่ developer ทำใน code
ข้อดีคือหลายทีมใน workflow ได้ประโยชน์พร้อมกัน คนดูแล design system จะมี variant น้อยลง ดูแลง่ายขึ้น นักออกแบบมีอิสระในการปรับงานโดยไม่ต้องทำลายระบบ ส่วน developer ก็ได้โครงสร้างที่ predictable มากขึ้น เพราะมัน map กับโค้ดจริงได้ตรงกว่าเดิม
คำแนะนำแรกจากทีม Figma คืออย่าเริ่มใช้ slots กับทุกอย่าง ให้เริ่มจาก component ที่ทีมชอบ detach มากที่สุดก่อน เช่น dialog menu modal card หรือ panel เพราะพวกนี้มักมี content เปลี่ยนบ่อย แต่โครงสร้างเหมือนเดิม การใส่ slots จะลด variant และการแตก component ได้เยอะมาก
อีกเทคนิคหนึ่งคือการใช้ default content กับ empty slot ให้ตั้งใจ ถ้า slot มีของ default อยู่ designer จะเข้าใจบริบททันที แต่ถ้าเป็น slot ว่างก็เหมือนบอกว่า “ตรงนี้ต้องใส่อะไรบางอย่าง” ซึ่งช่วยทำให้ workflow ชัดเจนขึ้น
Figma ยังมีแนวคิด preferred instances ด้วย คือกำหนดไว้เลยว่า slot นี้ควรใส่อะไรได้บ้าง เช่น modal นี้ควรใช้ปุ่มจากชุดไหน ไอคอนแบบไหน มันไม่ถึงกับล็อก แต่เป็นเหมือน guardrail ทำให้ทีมยังคง consistency โดยไม่ต้องบังคับแข็งๆ
สิ่งที่ผมชอบคือ Figma พยายามทำให้ design structure เหมือน production structure มากขึ้น ปกติ dev จะทำ component ที่มี container แล้ว inject content เข้าไปในตำแหน่งต่างๆ slots คือการเอาแนวคิดนี้มาใช้ในฝั่ง design ทำให้การ handoff ระหว่าง designer กับ developer ง่ายขึ้นมาก
อีกมุมที่น่าสนใจคือ Figma บอกชัดว่าโครงสร้างแบบนี้ AI และ automation จะเข้าใจได้ง่ายกว่า เพราะ component มี structure ชัดเจนว่าอะไรอยู่ตรงไหน แทนที่จะเป็น layout ที่แตกหรือ detach เต็มไปหมด
พูดง่ายๆ slots คือการทำให้ design system ไม่ต้องเลือกระหว่าง “ควบคุม” กับ “อิสระ” อีกต่อไป แต่ทำให้ทั้งสองอย่างอยู่ด้วยกันได้ ซึ่งผมว่ามันเป็นทิศทางสำคัญมากของเครื่องมือ design ในยุคที่ workflow เริ่มมี AI เข้ามาเกี่ยวข้องมากขึ้นเรื่อยๆ
อยากใช้ AI กับงานจริงเป็นระบบ?
เรียน Claude Method — วิธีคิดและลงมือใช้ Claude/AI กับงานจริง ตั้งแต่วันแรก
📍 โพสต้นฉบับบน Facebook: AI กับ Peesamac