How to name Token to dev not damn (in mind)
The ux / ui designer may have encountered it when we designed it in figma with pure color.
"Where should I use this color?"
จากประสบการณ์ตรงในการทำงาน UX/UI Design การตั้งชื่อ Token สีที่ชัดเจนและเป็นระบบนั้น ช่วยลดความสับสนให้กับทีมพัฒนาได้อย่างมาก โดยเฉพาะการแยกชื่อสีออกเป็น 3 รูปแบบหลัก คือ 1. Primitive Token: คือชื่อสีเรียบง่ายตามเฉดสีและระดับความเข้ม เช่น Blue-500, Yellow-100 ซึ่งตรงไปตรงมาแต่ยังขาดบริบทการใช้งาน 2. Semantic Token: ตั้งชื่อตามหน้าที่หรือบริบทของการใช้สีในแอป เช่น color-background-primary, color-text-error ที่บอกว่าใช้สีสำหรับส่วนใดของ UI เช่นพื้นหลังหลักหรือข้อความผิดพลาด ทำให้เวลาต้องเปลี่ยนสี เราเปลี่ยนแค่ค่าสี Token เท่านั้นโดยไม่ต้องแก้โค้ดส่วนอื่นๆ 3. Component Token: เชื่อมโยงกับ component UI โดยตรง เช่น สีปุ่มหลัก button-color-background-primary หรือสีไอคอนในปุ่ม button-color-icon-primary การตั้งชื่อแบบนี้ไม่เพียงแต่ช่วยให้ Dev เข้าใจความหมายของสีแต่ละตัวได้ชัดเจน ยังช่วยให้การทำงานร่วมกับ Figma และการสื่อสารภายในทีมมีประสิทธิภาพมากขึ้น เคล็ดลับเพิ่มเติมคือ การตั้งชื่อ Token ควรสอดคล้องกับข้อตกลงภายในทีม เรียบง่ายและสื่อความหมายตรงกันเพื่อให้ทุกคนในทีมทั้ง Designer และ Developer เข้าใจตรงกันโดยไม่ต้องตีความเพิ่ม นอกจากนี้ การใช้โครงสร้างชื่อแบบ Semantic ยังช่วยในเรื่องการทำ Dark Mode หรือการปรับธีมโดยเปลี่ยนค่าของ Token เหล่านี้เพียงจุดเดียว โดย UI จะเปลี่ยนตามไปด้วยโดยอัตโนมัติ เป็นอีกหนึ่งวิธีที่ช่วยประหยัดเวลาและรักษามาตรฐานการออกแบบให้สม่ำเสมอ ท้ายที่สุด ความยืดหยุ่นในการตั้งชื่อ Token เป็นสิ่งสำคัญ เนื่องจากแต่ละทีมและโปรเจ็กต์อาจมีแนวทางการทำงานที่แตกต่างกัน แนะนำให้หาแนวทางที่ทีมใช้งานได้ง่าย และทุกคนเปิดใจพร้อมที่จะปรับเปลี่ยนเพื่อให้สอดคล้องกับความต้องการของงานจริง ๆ
