แนวทางการนำ Material You ไปใช้จริงใน Figma

การนำระบบ Material You (Material Design 3) ไปประยุกต์ใช้จริงใน Figma ให้ยืดหยุ่นและรองรับคุณสมบัติ Dynamic Color อย่างแท้จริง ควรใช้ประโยชน์จากฟีเจอร์ Figma Variables & Modes ร่วมกับปลั๊กอินทางการจาก Google อย่าง Material Theme Builder (MTB)

ขั้นตอนและแนวทางปฏิบัติในการเซ็ตอัปตั้งแต่ระดับ Foundation ไปจนถึง Component Handoff มีดังนี้

เครื่องมือและทรัพยากรหลักที่ต้องเตรียม

1. Material Theme Builder (MTB) Plugin
   ปลั๊กอินทางการของ Google ที่ช่วยคำนวณ HCT Color Space และสร้าง Tonal Palettes ($0–100$) พร้อมแปลงเป็น Figma Variables ให้อัตโนมัติ
2. Material 3 Design Kit (Figma Community)
   UI Kit มาตรฐานของ M3 ที่ผูกโทเคนของคอนเทนเนอร์ ปุ่ม และไอคอนต่าง ๆ ไว้เรียบร้อยแล้ว

ขั้นตอนการตั้งค่าแบบ Step-by-Step

ขั้นตอนที่ 1: สกัด Seed Color และสร้าง Palette ด้วย Material Theme Builder

1. เปิดปลั๊กอิน Material Theme Builder ใน Figma
2. ในแถบ Custom Theme:
   • กำหนดสีหลักของแบรนด์ (Primary Seed Color) หรือสกัดสีจากภาพถ่าย/ภาพวอลเปเปอร์
   • กำหนดสี Secondary, Tertiary และ Neutral เพิ่มเติมตามต้องการ
3. คลิก Save / Update: ปลั๊กอินจะคำนวณ HCT Tonal Palette และสร้างเป็น Figma Variables ขึ้นมาในไฟล์ทันที

ขั้นตอนที่ 2: วางโครงสร้าง Variables Collections (สถาปัตยกรรม 3 ระดับ)

เพื่อความง่ายในการดูแลระบบ ควรจัดแบ่ง Collection ของ Variables ออกเป็นชั้นที่ชัดเจน:

• Collection 1: Reference Tokens (Core Tones)
  • เก็บค่าดิบ Tonal Palette ($0, 10, 20, \dots, 90, 95, 100$) ของแต่ละกลุ่มสี เช่น:
    • md/ref/palette/primary/40
    • md/ref/palette/primary/80
    • md/ref/palette/neutral/10
• Collection 2: System / Semantic Tokens (บริบทการใช้งาน)
  • เป็นโทเคนที่ระบุหน้าที่ เช่น md/sys/color/primary, md/sys/color/surface, md/sys/color/on-primary
  • สร้างอย่างน้อย 2 Modes: Light และ Dark
  • ทำ Token Aliasing ชี้ไปยัง Reference Tokens:
    • ในโหมด Light: md/sys/color/primary $\rightarrow$ ผูกกับ primary/40
    • ในโหมด Dark: md/sys/color/primary $\rightarrow$ ผูกกับ primary/80
    • ในโหมด Light: md/sys/color/on-primary $\rightarrow$ ผูกกับ primary/100
    • ในโหมด Dark: md/sys/color/on-primary $\rightarrow$ ผูกกับ primary/20

ขั้นตอนที่ 3: การประยุกต์ใช้กับ Component และ Layout

1. ห้ามใช้สีดิบ (Raw Hex) หรือ Reference Tokens กับ UI เด็ดขาด
   • สไตล์ปุ่ม การ์ด ข้อความ และเส้นขอบ ต้องเชื่อมต่อกับ System Tokens เท่านั้น เช่น
     • พื้นหลังของ Filled Button = md/sys/color/primary
     • ตัวอักษรบนปุ่ม = md/sys/color/on-primary
     • พื้นผิวการ์ด = md/sys/color/surface-container
2. จับคู่สี Surface และ On-Surface ให้ถูกต้อง:
   • ตรวจสอบว่าใช้องค์ประกอบคู่สีที่มีพรีฟิกซ์ on- เสมอ เพื่อการันตี Contrast WCAG 2.1 / 2.2 อัตโนมัติในทุกธีม

การจำลอง Dynamic Color & Switching Mode

1. สลับ Light / Dark Mode ในคลิกเดียว
   • เลือก Frame หน้าจอที่ต้องการทดสอบ
   • ดูที่แถบ Layer ใน Inspector ด้านขวา $\rightarrow$ คลิกไอคอน Change variable mode
   • เลือกระหว่าง Light หรือ Dark ดีไซน์ทั้งหมดจะเปลี่ยนชุดสีทันทีโดยไม่ต้องทำ Screen แยก
2. จำลองผู้ใช้หลายธีม (Multi-Seed Testing)
   • หากต้องการทดสอบว่าแอปดูดีหรือไม่เมื่อผู้ใช้มีสีเครื่องต่างกัน ให้สร้าง Mode เพิ่มใน System Collection เช่น User-Blue, User-Green, User-Pink
   • หรือใช้ฟังก์ชัน Swap Theme ในปลั๊กอิน Material Theme Builder เพื่อสลับชุดสีของทั้งโปรเจกต์ได้แบบ Real-time

ข้อควรระวังและการส่งมอบให้ Developer (Design Handoff)

• ความสอดคล้องของชื่อโทเคน (Token Naming Invariant)
  • ตั้งชื่อ Variable ใน Figma ให้ตรงกับโค้ดฝั่งนักพัฒนา เช่น รูปแบบ kebab-case หรือ camelCase ที่ใช้ใน CSS Variables หรือ Compose ColorScheme (เช่น color-primary หรือ md_theme_light_primary)
• ส่งออก JSON Tokens
  • ใช้ปลั๊กอินจำพวก Tokens Studio for Figma หรือส่งออกผ่าน Material Theme Builder ไปเป็นโค้ด JSON/DSP (Design System Package) เพื่อนำไปคอมไพล์ผ่าน Style Dictionary เข้าสู่ Android (Jetpack Compose), Flutter หรือ Web ได้โดยตรง
• หลีกเลี่ยงการสร้าง Custom Color สุ่มสี่สุ่มห้า
  • ทุกสีควรคำนึงถึง Harmonic Color System หากต้องการสีใหม่ ควรเพิ่มเป็น Custom Color with Harmonization ผ่านปลั๊กอิน MTB เพื่อให้อัลกอริทึมปรับ Hue ให้กลมกลืนกับ Seed Color หลัก