Design Token คืออะไร สำคัญต่อ Designer / Developer อย่างไร
การพัฒนาซอฟต์แวร์ในปัจจุบันที่ต้องการหน้าจอสวย ง่ายต่อการใช้งาน แน่นอนว่าเบื้องหลังนั้น Designer และ Developer ต้องทำงานร่วมกันอย่างหนักเพื่อให้ได้หน้าจอที่ออกมาตามความต้องการของทุกฝ่าย ก่อนอื่นขอพูดถึงเครื่องมือและวิธีการที่จะ mention ถึงในลำดับถัดไป
Designing Tools
Figma คงเป็นตัวเลือก top rank ในปัจจุบัน นอกจาก Designer จะใช้ออกแบบได้อย่างมีประสิทธิภาพ ยังสามารถแบ่งปันให้ Developer เข้ามาเลือก inspect เพื่อตรวจสอบ UI ที่จะนำไปพัฒนาได้อย่างละเอียด
Design Standard / Design Guidelines
เพื่อให้ง่ายต่อการทำงาน Standard ที่มีร่วมกันจึงสิ่งสำคัญทั้งภายในและภายนอกทีม เช่น theme ของแอป ขนาด ระยะห่างขององค์ประกอบต่างๆ ไม่ว่าจะออกมาในรูปแบบ color pallete, components ก็ถือว่าเป็นมาตรฐานร่วมกัน แต่การทำ Standard บน Figma ก็มีข้อจำกัดด้วยตัวของมันเอง การอ้างอิงไปยัง base component ก็ทำได้แหละ แต่หลายๆครั้งมันยังไม่ได้ประกอบเป็น component เลย การสื่อสารระหว่าง Developer และ Designer เลยเกิดข้อผิดพลาดค่อนข้างบ่อย
Token
token เป็น concept หนึ่ง ที่มาช่วยกำหนดให้ Designer ต้องตั้งชื่อองค์ประกอบต่างๆ ด้วย ถึงแม้ว่าการ reference จะยังอยู่เหมือนเดิม แต่การสร้าง token จะช่วยให้ออกแบบให้มี level หรือการจัดกลุ่มของ token ได้ยืดหยุ่นมากยิ่งขึ้น เช่น core หรือ theme หรือจะเพิ่มความซับซ้อนเพื่อระบุกลุ่มลงไปอีกก็ได้ ขึ้นอยู่กับว่าจะออกแบบยังไง โดยชื่อขององค์ประกอบต่างๆ ที่ว่านี้ก็คือ "Token" หรือ "Design Token" นี่แหละ
ดูเหมือนเป็นแค่การตั้งชื่อเฉยๆ ซึ่งก็ใช่ครับ แต่สิ่งนี้มันคือแนวคิด ทำให้ไม่ได้ยึดโยงกับเครื่องมือ ทำให้ได้รับความนิยมมาก และมี Figma plugin https://tokens.studio/ ช่วยให้จัดการ Design Token และสามารถ export ออกเป็นรูปแบบของ JSON File (tokens.json) ได้เลย
JSON File (tokens.json) จะเป็นตัวแปรสำคัญของงานนี้ เพื่อเป็นทางผ่านให้ Developer ทำงานต่อ ด้วยเครื่องมือ Style Dictionary ที่จะช่วยแปลงให้เป็น source code ภาษาโปรแกรม
Style Dictionary ในระดับเริ่มต้นก็สามารถแปลงเป็น source code ได้เลย เช่น CSS, SCSS, Android XML, iOS Swift classes เป็นต้น แต่ก็ต้องยอมรับว่ามันยังทำออกมาไม่ถูกใจนัก ซึ่งเค้าก็เปิดช่องให้เราสามารถเขียน extension ด้วย NodeJS ได้ด้วยตัวเองด้วยนะ
สำหรับผมที่เป็น Kotlin Developer และ Swift Developer รู้สึกว่า ไหนๆ ก็เอามาใช้แล้วอยากให้จบแบบพร้อมใช้เลย และอยากได้ความ dev friendly มากขึ้นด้วย เช่น
- อยากแปลงสีแบบสามารถดูสีบน Editor ได้ด้วย (ไม่ใช่แค่ code ตัวหนังสือเฉยๆ)
- อยากให้แปลงหน่วยให้ตรงกับที่ใช้จริง เช่น dp, sp, pt
- Pattern จาก designer มีความหลากหลาย อยากแปลงเป็นรูปแบบเดียวกัน เช่น HEX RGB, RGBA floating point, RGBA decimal
