Figma Variables Setup

ขั้นตอน Import

1. ติดตั้งปลั๊กอิน Tokens Studio for Figma (ฟรี) จาก Figma Community
2. เปิดปลั๊กอิน → แท็บ Settings → Sync → เลือก URL/JSON เป็นแหล่งข้อมูล
3. ชี้ไปที่ไฟล์ tokens/bgrimm.tokens.json (หรือ import ไฟล์ตรงผ่าน Import หากไม่ได้ตั้ง URL sync)
4. เลือก Apply to document — ปลั๊กอินจะสร้าง Figma Variables ตามโครงสร้าง 3 ชั้นในไฟล์ (global / alias / component) โดยอัตโนมัติ
5. เปิด Figma native Variables panel (Local variables) ตรวจว่า collection ชื่อ bgrimm ถูกสร้างขึ้น พร้อม mode เดียว (ยังไม่มี dark-mode variable set แยก — ดูหมายเหตุด้านล่าง)

การตั้งชื่อ Figma Variable

Variable ใน Figma ต้องตรงกับ path ใน bgrimm.tokens.json เป๊ะ โดยใช้ / แทน . ตามข้อจำกัดการตั้งชื่อของ Figma:

Token path ใน JSON	ชื่อ Figma Variable
global.color.orange.500	global/color/orange/500
alias.color.primary	alias/color/primary
component.button.bg-primary	component/button/bg-primary

การใช้ / ใน Figma จะสร้างกลุ่ม (group) ในพาเนล Variables ให้อัตโนมัติ ตรงกับโครงสร้าง global/alias/component ที่อธิบายไว้ใน Token Architecture

Alias ต้องผูกเป็น Figma Alias จริง ไม่ใช่ copy ค่า

เมื่อสร้าง alias token (เช่น alias/color/primary) ต้องตั้งค่าเป็น Figma variable alias ที่ชี้กลับไปยัง global/color/orange/500 ไม่ใช่ copy ค่า #FF6727 มาใส่ตรงๆ — ถ้า copy ค่า เวลาแก้สีที่ global variable จะไม่กระทบ alias และ token จะไม่ sync กันอีกต่อไป

Dark Mode

เว็บไซต์นี้มี dark-mode palette จริงอยู่แล้วใน custom.css (เช่น primary กลายเป็น #FF9956 แทน #FF6727) แต่ยังไม่ได้ผูกเข้า bgrimm.tokens.json เป็น mode ที่สอง — เป็นงานที่ค้างอยู่ ก่อนเพิ่ม ให้ประสานกับ Panupong (Contact & Changelog) เพื่อกำหนดโครงสร้าง mode ให้ตรงกันทั้ง Figma และโค้ด