Design Tokens EP.1 ทำไปทำไม ทำไปเพื่ออะไร
ถ้าใครได้ตามอีเวนต์อย่าง Config หรือ Schema ในช่วงปี-สองปีที่ผ่านมานี้ จะได้ยินคำว่า Design Tokens กันบ่อยมากขึ้น เคยสงสัยมั้ยว่า Design Tokens คืออะไร ทำอะไรได้ ทำไมถึงได้สำคัญ เกี่ยวกับโค้ดรึป่าว แล้วเราจะใช้มันทำอะไรได้บ้าง
ในบทความนี้จะมาเล่าเรื่อง Design Tokens แบบง่าย ๆ ให้เข้าใจคอนเซปต์ และการนำไปใช้กับ Product และจะช่วยพัฒนาพร้อม Scale ได้อย่างไร
ก่อนอื่น…มาทำความรู้จัก Design Tokens กันก่อน
Design Tokens คืออะไร ?
Design Tokens คือ “Single source of truth” ที่ใช้เก็บตัวแปรทุกอย่างในการออกแบบสำหรับใช้แจกจ่ายข้ามไปมาระหว่าง Design Tools และ Coding
พูดง่าย ๆ ก็เหมือน “ชื่อเล่น” ของตัวแปร ที่ใช้ในงานออกแบบนั่นแหละ ไม่ว่าจะเป็น สี (Color), ระยะห่าง (Padding), ขนาด (Size), ช่องว่าง (Spacing), แบบอักษร (Typography) บลา ๆ ๆ เพื่อใช้ในการสื่อสารไม่ว่าจะเป็นภายในทีม หรือระหว่างทีม ให้เป็นภาษาเดียวกันมากขึ้น
ปกติแล้วจะเก็บเป็นรูปแบบของไฟล์ json
ยกตัวอย่างเช่น
สถานการณ์ที่จะเจอบ่อย ๆ ตอน Designer ส่งงาน แต่ไม่มี
Developer: สีน้ำเงินที่ใช้อันนี้คือสีอะไรน่ะ
Designer: อ่า…สี #0075FF มั้งนะDeveloper: เอาให้แน่นะ ใส่ไปแล้วขอให้แก้ทีหลังมันจะยากนะ
Designer: …
สรุป รอบหน้าเปลี่ยนโค้ดสีอีก…
แล้วทำไมเราถึงไม่ตั้งชื่อเล่นให้โค้ดสี #0075FF เนี่ย แทนที่จะบอกเป็นค่า Hex ก็ใช้ชื่อว่า “brand.kpblue-500” แทน เพื่อให้เข้าใจตรงกันว่า
brand.kpblue-500 = #0075FF
รอบหน้าถ้า Developer ถามอีก ก็ตอบเป็นชื่อ Token ไป
Developer: ตกลงสีน้ำเงินที่ใช้อันนี้คือสีอะไร
Designer: สี kpblue-500Developer: OK 🥳
นี่แหละใน Design Tokens จะเรียกสิ่งนี้ว่า “Global Token”
แต่ปกติเราจะไม่ใช้ Global Token ใน UI เท่าไหร่ เพราะชื่อไม่สื่อความหมายและ Scale ยาก …ดังนั้นเราเลยตั้งอีก Token ขึ้นมาเพื่อไปเรียกใช้ Global Token อีกที สิ่งนี้เรียกว่า “Alias Token”
จากนั้นเราค่อยนำเอา Alias Token ไปใช้ในงาน UI เช่นใช้เป็นสีในพวก Component ต่าง ๆ
แล้วไงต่อ? 🤷
ก็ไม่ได้ต่างอะไรกับ Shared Style ใน Figma นี่?
ก็ถูก เพราะ Shared Style ไม่ว่าจะเป็นใน Design Tools ต่างก็ใช้คอนเซปต์เดียวกันนี่แหละ แต่ Design Tokens ไม่ได้มีแค่เรื่อง สี (Color) หรือ แบบอักษร (Typography)
ไม่งั้นมันจะเป็น Single source of truth ได้ยังไงล่ะ
Design Tokens ประกอบไปด้วยหลายตัวด้วยกัน แต่ถ้าในงานออกแบบ UI ก็จะมี
- Animation
- Border
- Color
- Size
- Spacing
- Shadow
- Typography
- Theme
เราลองมาดูใน Component เล็ก ๆ เช่น Button ว่ามันจะมี Token อะไรบ้าง
หรือมองให้ใหญ่ขึ้นว่าจะมี Token อะไรบ้างอยู่ในนั้น
ข้อดีของ Design Tokens
ข้อดีหลัก ๆ ก็ได้เกริ่นไปบ้างแล้วว่า มันจะเป็นตัวช่วยในการสื่อสารระหว่าง Designer กับ Developer แน่นอน แต่ข้อดีอื่น ๆ ก็ยังมีอีกมากมาย เช่น
การวาง Dark mode ที่จริง ๆ เคยเขียนในเวอร์ชั่น Sketch ไปแล้ว นั่นเป็นการทำจาก Design เท่านั้น แต่ถ้าใช้ Token จะสามารถทำ Mode อื่น ๆ สำหรับ Accessibility ให้ Product ได้อย่างไม่จำกัดด้วย อยู่ที่ว่าเราวาง Token ไว้รองรับมากแค่ไหน
การทำ Theming ให้กับหน้าต่าง ๆ หรือ Component สำหรับรองรับหน้า UI พิเศษโดยไม่ต้องเขียนมันขึ้นมาใหม่อีกชุด
อัพเดท Design System version ที่เป็นการเปลี่ยน Style โดยไม่ต้องพึ่ง Developer ให้ทำให้อีกต่อไป
ทั้งหมดนี้เกิดได้ด้วยการ Update file JSON ครั้งเดียว เหลือเชื่อมั้ยล่ะ
พอแปลงอะไรที่ Abstract ออกมาเป็น Code ได้แล้ว แน่นอนว่ามันจะทำให้เราทำ Version Control ได้ง่ายขึ้น แยกการอัพเดท Feature กับ Design ออกจากกันได้ ทำให้การพัฒนา Product ฝั่ง Design กับ Feature วิ่งคู่ขนานกันไปได้
ทำใน Figma ได้มั้ย แล้วทำอะไรได้บ้าง
ขอแนะนำ Plugin ที่ชื่อว่า Figma Tokens ที่ช่วยได้เยอะ แถมดีมาก ๆ ด้วย ที่สำคัญฟรี (และมีเวอร์ชั่น Pro แต่ตัวฟรีทำทุกอย่างตามคอนเซปต์ Design Tokens ได้ทั้งหมด)
ใครอยากลองใช้ Token ในงาน UI ตัวเอง แต่ไม่รู้จะตั้งชื่อยังไง แนะนำไฟล์นี้ เค้าเขียนแนวทางการตั้งชื่อ Token ไว้ให้มาแล้วอย่างดี ด้านล่าง
แง้ม ๆ ให้ดูว่า Figma Tokens ทำไรได้บ้าง
ทำ Theme Light mode / Dark mode ได้
เปลี่ยน Style ที่เตรียมไว้ทำ Version ถัดไปได้
ทำ Style พิเศษ สำหรับหน้าพิเศษ
จะเห็นว่า Design Tokens ค่อนข้างจะยุบยับ และเยอะแยะมาก ๆ เดี๋ยวใน EP หน้าจะมาแชร์วิธีใช้ Figma Tokens และวิธี Manage Token พร้อมรองรับการ Scale ในอนาคต
บวกกับแชร์เรื่องการ Implementation (ใช้กับโครงสร้างไฟล์ Figma ในบทความนี้ได้ด้วย) จะเริ่มมีเรื่อง Coding มาเกี่ยวข้องเล็กน้อย แต่ไม่ยากเกินแน่นอน
ใครมีคำถาม หรืออยากให้ลองอะไร คอมเม้นฝากไว้ได้นะครับ เจอกัน EP ต่อไป
