Design System?

เรามาเกริ่นกันด้วย Design System คืออะไร ก่อนที่เราจะไปแนะนำให้ทุกคนรู้จักถึง Design Token

Design System คือ Framework หรือกลไกที่มีการจัดเก็บข้อมูลและมีแนวทางในการออกแบบเพื่อให้มีการสร้าง Experience กับผู้ใช้ที่สอดคล้องและมีความเป็นอันหนึ่งอันเดียวกันอย่างสม่ำเสมอทั้งในผลิตภัณฑ์หรือแอปพลิเคชันที่มีความต่างกันได้ หรือภาษาอังกฤษเรียกว่า Consistency

Design System ประกอบด้วยองค์ประกอบต่าง ๆ เช่น Document Component ของ UI ที่สามารถนำไปใช้ใหม่ได้ Typography, Icon, Spacing รูปแบบการแสดงผลและองค์ประกอบอื่น ๆ รวมถึงเป็นแหล่งรวมที่เดียวสำหรับการตัดสินใจที่เกี่ยวกับระบบการออกแบบ และยังช่วยให้การทำงานร่วมกันระหว่าง Designer และ Developer ทำงานได้ง่ายอย่างมีประสิทธิภาพ

Design Token?

Design Token คือ ตัวแปรที่ใช้แทนคุณสมบัติหรือคุณลักษณะของการออกแบบพวก Color, Typography, Spacing เป็นตัวแทนที่แยกออกมาจากองค์ประกอบอื่น ๆ ในการออกแบบ เพื่อให้ Designer และ Developer สามารถใช้ค่าเดียวกันได้ทั่วโปรแกรมหรือแพลตฟอร์มต่าง ๆ

Design Token จะถูกเก็บรวบรวมในตำแหน่งส่วนกลาง เช่นไฟล์ Design Token หรือ Design System และสามารถเข้าถึงและนำไปใช้ซ้ำได้ โดยการใช้ Design Token ทำให้ทีมงานสามารถรักษาความสม่ำเสมอ (Consistency) และดำเนินการเปลี่ยนแปลงการออกแบบได้อย่างง่ายดาย โดยการปรับปรุงค่าของ Design Token แล้วนั้นจะมีผลไปทั้งหมดขององค์ประกอบที่ใช้ Design Token นั้น ๆ ปรับตามค่าใหม่ให้อัตโนมัติ

เช่น เมื่อมี Design Token ที่แทนสีหลักเช่น "primary-blue" แล้วนำไปใช้กับ Component และหน้าจอต่าง ๆ ที่ใช้งานอยู่ ถ้า Designer ตัดสินใจเปลี่ยนสี primary blue แล้วอัปเดตค่าของ Design Token นี้ Component ที่ใช้ Design Token นั้นก็จะแสดงสีใหม่โดยอัตโนมัติ

Why design token?

1. ความสอดคล้องและความสม่ำเสมอ : ด้วย Design Token ที่ใช้เป็นตัวแทนของคุณสมบัติการออกแบบ เช่น Color, Typography, Spacing เราสามารถใช้ค่าเดียวกันได้ทั่ว Platform ต่าง ๆ ซึ่งทำให้มีความสอดคล้องและสม่ำเสมอในการแสดงผลขององค์ประกอบที่ใช้ Design Token เหมือนกัน
   
   

2. การเปลี่ยนแปลงและการอัปเดตที่ง่าย : หากเราต้องการเปลี่ยนค่าของ Design Token เช่น เปลี่ยน Main color หรือแก้ไข Typography เราสามารถอัปเดตค่าของ Design Token นั้น ๆ ได้เพียงแค่ครั้งเดียว แล้วทุกองค์ประกอบที่ใช้ Design Token นั้น ๆ จะแสดงผลตามค่าใหม่ทันที นี้ช่วยลดเวลาและความยุ่งยากในการทำการเปลี่ยนแปลงแบบใหญ่ในการออกแบบ
   
   

4. ความยืดหยุ่นในการปรับแต่งและทดสอบ : การใช้ Design Token ทำให้ง่ายต่อการปรับแต่งและทดสอบต้นแบบที่กว้างขึ้น หากต้องการทดสอบ Color หรือ Typography ที่แตกต่างกัน เราสามารถเปลี่ยนค่าของ Design Token ในการทดสอบได้อย่างรวดเร็ว โดยไม่ต้องแก้ไขโค้ดหรือสร้างองค์ประกอบใหม่ขึ้นมา
   
   

5. การสร้างประสบการณ์ผู้ใช้ที่คงที่ : การใช้ Design Token ช่วยให้สร้างประสบการณ์ผู้ใช้ที่คงที่ และสอดคล้องกับแบรนด์ของเรา โดยทำให้องค์ประกอบที่แสดงผลในแอปพลิเคชันหรือผลิตภัณฑ์ต่าง ๆ มีลักษณะที่เหมือนกันและสอดคล้องกับค่าที่เรากำหนดไว้ใน Design Token
   
   

6. การทำงานร่วมกันระหว่างทีมงาน : การใช้ Design Token ใน Design System ช่วยสร้างความร่วมมือระหว่าง Designer และ Developer ทั้งคู่สามารถใช้ Design Token เดียวกันเพื่อสร้างและปรับปรุงส่วนประกอบของผลิตภัณฑ์ได้อย่างรวดเร็วและมีประสิทธิภาพ
   
   

7. การประหยัดเวลาและทรัพยากร : การใช้ Design Token ช่วยลดเวลาและความล่าช้าในการออกแบบ โดยสามารถนำไปใช้ซ้ำได้ทุก Project และลดความซับซ้อนในการสร้าง Component ใหม่ในทุก ๆ ครั้งที่มีการใช้งาน Design Token
   
   

ดังนั้น การใช้ Design Token ช่วยให้การออกแบบเป็นไปอย่างมีประสิทธิภาพและสอดคล้องกับ Brand และลดความซับซ้อนในกระบวนการออกแบบ พัฒนาสินค้าหรือแอปพลิเคชันในระยะยาว รวมถึงเพิ่มประสิทธิภาพในการทำงานระหว่าง Designer และ Developer ให้ทำงานร่วมกันได้ง่ายขึ้นมองเห็นภาพที่ตรงกัน

Image : Design-token-examples

จากรูปเราจะเห็นว่าถ้าเราทำ Design System สีเขียวเราจะกำหนดเป็น Success : #23A06B แล้วเราก็นำค่าสี Success ไปใช้ แต่ถ้าเราทำในรูปแบบของ Design Token มันคือการกำหนดตัวแปรขึ้นมาว่า สี Success นั้นเอาไปใช้กับอะไรได้บ้าง เช่น Button Color เลยกำหนดตัวแปรเป็น color.icon.success เวลา Developer เอา Token นี้ไปใช้ เขาจะรู้ทันทีว่า ปุ่ม Success จะให้สีแบบนี้ อาจจะเขียวก็ได้หรือในอนคตจะเป็นสีอื่นก็ได้ แต่ถ้าอยู่ใน color.icon.success คือ ปุ่มที่แสดงตอน Success นั่นเอง

Light/Dark Mode

Theme คือ ชุดของค่า Token ที่ออกแบบมาเพื่อให้ได้รูปลักษณ์หรือสไตล์ที่แน่นอน Theme เป็นวิธีที่เราเปลี่ยนรูปแบบสีและสไตล์ทุกที่โดยใช้ Token ชุดเดียว

Light mode Dark mode และ High-contrast mode เป็นตัวอย่างของ Theme ที่ไม่ใช้สีก็เป็นไปได้ ออกแบบในมุมมองที่สะดวกสบายลดความยุ่งยากหรือรูปแบบการพิมพ์เอง

Image : Dark-mode-light-mode

เรามีตัวอย่างของ Atlassian ที่เขาทำ Light/Dark Mode ไว้ใช้อย่าง Public ให้พวกเราได้เข้าไปศึกษาเป็นตัวอย่าง Guideline : https://atlassian.design/components/tokens/all-tokens 

How to read design token names

เรียนรู้วิธีการอ่านชื่อ token จะช่วยให้คุณเข้าใจการทำงานของระบบ Token นี้ได้รวดเร็วขึ้น และจะสามารถประยุกต์ใช้กับการเขียน code ของ developer ต่อได้

Image : Token-name-parts

โครงสร้างการออกแบบ token ในรูปเราเรียก token นี้ว่า "color.background.danger.bold.hovered." โดยแบ่งเป็นทั้งหมด 3 ส่วน ตามนี้

1. Color (The Foundation) 2. Bbackground (The Property) และ 3. Danger.bold.hovered (The Modifier)

ชื่อของ Token ควรตั้งให้ครอบคลุมและชัดเจนสามารถแยกแยะไม่สับสนกับ Token ตัวอื่น เพื่อง่ายต่อการใช้งานและการสื่อสารภายในทีม Designer และ Developer

Foundation : ตัวการกำหนด Design พื้นฐาน เช่น Color, Elevation หรือ Text

Property : เป็น UI Element ที่เป็นองค์ประกอบเสริมขึ้นมาใน Layer ที่ 2 จาก Foundation เช่น Border, Background, Shadow, หรือ Property อื่น ๆ

Modifier : ส่วนขยายเพื่อสร้างความชัดเจนในการใช้งานที่แตกต่างจาก Token ส่วนอื่น เช่น Color Role, Emphasis หรือ Interaction State.

Note การตั้งชื่อ Token อาจดูแตกต่างกันในบริบทสภาพแวดล้อมหรือเครื่องมือการทำงานต่างๆ ที่แต่ละทีมในองค์กรใช้ทำงานร่วมกัน

Image : Ads-libraries

Reference :

• What are design tokens? 

• Design tokens component list