Design token คืออะไร และช่วยเพิ่มประสิทธิภาพในการออกแบบได้อย่างไร?
เผยแพร่เมื่อ 18 Oct 2022 โพสไปที่Design token ได้กลายเป็นมาตรฐานใหม่ของ W3C หน่วยงานสากลที่คอยกำหนดมาตรฐานของภาษาที่ใช้ในการพัฒนาเว็บไซต์ เพื่อทำให้แน่ใจว่าการออกแบบและเขียนโค้ดจะสามารถทำงานสอดประสานกันได้อย่างราบรื่นที่สุด โดยในการออกแบบโครงสร้างพื้นฐาน (design foundation) โทเค็นคือหน่วยที่เล็กที่สุดในการออกแบบที่รวมตัวกันเพื่อแสดงผลใน front-end framework
ทุกอย่างเริ่มต้นด้วย design foundation
ใน design system ส่วนที่เล็กที่สุดของพื้นฐานถูกสร้างขึ้นมาจากโทเค็น ซึ่งมีวัตถุประสงค์เพื่อเก็บค่าต่างๆ เช่น สี ตัวอักษร ระยะห่าง และอื่นๆ ที่จะช่วยให้ design system สามารถแบ่งปันข้อมูลเหล่านี้ข้ามไปยังแพลตฟอร์มต่างๆ ไม่ว่าจะเป็น iOS, Android และเว็บไซต์ทั่วไปได้
โดยในปี 2023 นี้ เหล่า designer ทั่วโลกยังคงใช้งาน design token เพื่อให้ครอบคลุมบรรดาฟีเจอร์และองค์ประกอบการออกแบบต่างๆ ภายใน design system ซึ่งต่อไปนี้คือ design token ที่คุณอาจพบได้ใน design foundation
Color Token: โทเค็นนี้ทำหน้าที่กำหนดชุดสีสำหรับ design system ตั้งแต่สีหลัก, สีรอง, พื้นหลัง, ข้อความ, และสี accent ที่สามารถระบุเป็นค่าฐานสิบหกได้, RGBA, การไล่ระดับสี, หรือการแสดงสีอื่นๆ ได้อย่างหลากหลาย
Typography Token: โทเค็นนี้ประกอบไปด้วย font family, font size, ความสูงของบรรทัด, และ font weight ทำให้ designer สามารถระบุตัวเลือก typography ที่แตกต่างกันสำหรับส่วนหัวข้อ, ข้อความเนื้อหา และองค์ประกอบข้อความอื่นๆ ได้อย่างสะดวก
Spacing Token: โทเค็นนี้จะเป็นตัวกำหนดการเว้นวรรค, ค่า padding, และระยะขอบที่สอดคล้องกัน เพื่อช่วยให้มั่นใจได้ว่าเค้าโครงและระยะห่างจะเหมือนกันหมดทั้งในส่วนประกอบและเลย์เอาต์ต่างๆ
Border Token: โทเค็นนี้ระบุคุณสมบัติที่เกี่ยวข้องกับเส้นขอบและโครงร่างสำหรับองค์ประกอบต่างๆ เช่น ปุ่ม, การ์ด, และช่องกรอกแบบฟอร์ม ซึ่งรวมถึงความกว้างของเส้นขอบ, สีของเส้นขอบ, และรัศมีของเส้นขอบ
Shadow Token: โทเค็นชนิดนี้จะเป็นตัวกำหนดคุณสมบัติเรื่องเงาของกล่อง ซึ่งช่วยให้สามารถใช้เงากับองค์ประกอบ UI ต่างๆ ได้อย่างสม่ำเสมอ รวมถึงค่าต่างๆ เช่น ความเข้มของเงา, รัศมีการเบลอ, และรัศมีการแพร่กระจายได้อีกด้วย
Icon Token: โทเค็นนี้จะระบุรายละเอียดการออกแบบที่เกี่ยวข้องกับไอคอน เช่น ขนาดไอคอน, สี, และระยะห่าง, เพื่อช่วยให้มั่นใจได้ว่าไอคอนต่างๆ ทั่วทั้ง design system จะมีสไตล์ที่สอดคล้องกันทั้งหมด
Component Token: โทเค็นชนิดนี้ครอบคลุมสไตล์สำหรับ UI component ทั่วไป เช่น ปุ่ม, ช่องกรอกแบบฟอร์ม, ช่องทำเครื่องหมาย, และปุ่มตัวเลือก ซึ่งรวมถึงคุณสมบัติเฉพาะของส่วนประกอบต่างๆ เช่น รูปร่างของปุ่ม, ลักษณะเส้นขอบของช่องกรอกแบบฟอร์ม, และแอนิเมชันของช่องทำเครื่องหมาย
Breakpoint Token: โทเค็นนี้จะเป็นตัวกำหนด responsive breakpoint ที่ใช้ในการออกแบบเว็บไซต์ โดยจะกำหนดว่าเมื่อใดที่การออกแบบและเลย์เอาต์จะต้องปรับให้เหมาะสมกับขนาดหน้าจอที่แตกต่างกัน เพื่อให้มั่นใจว่าผู้ใช้จะได้รับประสบการณ์ที่สอดคล้องและดีเหมือนกันในทุกอุปกรณ์
Animation Token: โทเค็นแอนิเมชันระบุคุณสมบัติของแอนิเมชัน เช่น ระยะเวลา ฟังก์ชันการค่อยๆ เปลี่ยน และคีย์เฟรม เพื่อให้มั่นใจว่าการออกแบบการเคลื่อนไหวจะสอดคล้องกันทั่วทั้งอินเทอร์เฟซ
Accessibility Token: โทเค็นเหล่านี้มีคุณสมบัติที่เกี่ยวข้องกับการเข้าถึง เช่น contrast ratio, text size, และ focus state เพื่อช่วยให้แน่ใจว่า design system จะเป็นไปตามมาตรฐานการเข้าถึงหรือที่เรียกว่า accessibility standard
Grid Token: โทเค็นกริดจะกำหนดคุณสมบัติ grid layout รวมถึงความกว้างของคอลัมน์กริด, gutter spacing, และการจัดตำแหน่ง ซึ่งช่วยให้สามารถสร้าง grid-based layout ที่สอดคล้องกันได้
Media Token: โทเค็นประเภทนี้ครอบคลุมถึงรูปภาพและคุณสมบัติที่เกี่ยวข้องกับสื่อต่างๆ เช่น อัตราส่วนภาพ, ขนาดรูปภาพ, และ video player style เพื่อช่วยให้การแสดง media ตามส่วนต่างๆ ใน design system มีความสอดคล้องกัน
Text Token: หรือเรียกว่าโทเค็นข้อความจะครอบคลุมถึงสไตล์และคุณสมบัติของข้อความที่นอกเหนือจากเรื่องของ typography ซึ่งรวมถึงการตกแต่งข้อความ, การเว้นวรรคตัวอักษร, และการจัดแนวข้อความ
Shape Token: โทเค็นเหล่านี้จะเป็นสิ่งที่คอยกำหนดรูปร่างที่ใช้ใน design system เช่น รูปร่างของปุ่ม, รูปร่างช่องกรอกข้อมูล, และรูปร่างของการ์ด เป็นต้น
Custom Token: โทเค็นชนิดสุดท้ายที่จะพูดถึงก็คือโทเค็นแบบกำหนดเอง ที่ designer สามารถกำหนดการออกแบบให้มีเอกลักษณ์ตามต้องการ เพื่อช่วย design system มีความยืดหยุ่นมากยิ่งขึ้น
Design token ใน design system
ทุก design foundation เริ่มต้นด้วย global design token โดยโทเค็นนี้มีการถ่ายทอดคุณลักษณะต่อไปยังโทเค็นย่อยอื่นๆ ที่จะแสดงให้เห็นถึงลักษณะเฉพาะหรือสิ่งที่เป็นนามธรรมในการออกแบบ
สิ่งนี้ช่วยเพิ่มความสามารถในการขยายขนาดและประสิทธิภาพใน front-end framework และยังเป็นวิธีที่ยอดเยี่ยมในการสร้าง design system ของคุณโดยใช้หลักการเดียวกัน
สร้างวิธีการส่งต่องานที่ดีระหว่างนักออกแบบและนักพัฒนา
คุณสามารถใช้หลักการ design token เดียวกันกับที่ใช้ใน front-end framework กับ design system ของคุณได้อย่างง่ายดาย
เริ่มต้นด้วย global design token ที่สำคัญที่สุดของคุณ ซึ่งสามารถนำมาเป็นต้นแบบของโทเค็นย่อยที่แสดงถึงสไตล์ของส่วนประกอบอื่นได้ในภายหลัง
Design foundation ที่มีการจัดการอย่างเป็นระบบจะช่วยเพิ่ม design automation และทำให้การส่งต่องานระหว่างนักออกแบบและนักพัฒนาเป็นไปได้ด้วยความราบรื่น เนื่องจากนักพัฒนาสามารถแปลพื้นฐานของ design systetm ให้กลายเป็นโค้ดได้อย่างรวดเร็ว
การเพิ่มประสิทธิภาพในการส่งต่องานให้กับนักพัฒนาประกอบไปด้วย
ช่วยส่งต่องานให้รวดเร็วยิ่งขึ้น
ช่วยให้นำดีไซน์ไปใช้ได้ง่ายขึ้น
ช่วยเพิ่ม design automation
มีแหล่งข้อมูลกลางของการออกแบบที่เหมือนกัน
การออกแบบเพื่อรองรับการปรับเปลี่ยน
แม้ว่าเครื่องมือสำหรับออกแบบที่ได้รับความนิยมมากที่สุดในตลาดจะยังไม่รองรับการทำงานกับ design token แต่คุณก็สามารถที่จัดระเบียบ design system ของคุณเพื่อรองรับหลักการของโทเค็นได้ตั้งแต่ตอนนี้
นั่นหมายความว่านี่จะยังคงเป็นหนึ่งในกระบวนการที่คุณต้องทำด้วยตัวเองอยู่ จนกว่าเครื่องมือที่คุณใช้จะถูกอัปเดตเพื่อรองรับการใช้งานอย่างเต็มที่ ถึงอย่างนั้น design token ก็จะค่อยๆ กลายเป็นมาตรฐานใหม่ของการออกแบบ เพื่อทำให้มั่นใจได้ว่าการออกแบบทั้งหมดจะสามารถอัปเดตและจัดการได้จากที่เดียว
เพิ่มความสม่ำเสมอ
Design token จะทำให้การออกแบบมีความสม่ำเสมอในทุกส่วน เนื่องจากองค์ประกอบในการออกแบบแต่ละอย่างจะเชื่อมต่อกับสไตล์ จากนั้นจึงค่อยเป็น design token ที่ช่วยให้สามารถปรับขนาดและสร้างสรรค์ผลงานได้รวดเร็วขึ้น
ประโยชน์ของความสม่ำเสมอ
สามารถปรับขยายโปรเจ็กต์ได้
สไตล์การออกแบบแยกออกจากส่วนประกอบต่างๆ
Design foundation ที่เป็นระบบ
สามารถสลับสับเปลี่ยน design foundation ได้
ออกแบบโครงสร้างพื้นฐานตามบริบท
คุณควรจัดระเบียบ design token ของคุณให้เรียบร้อย ด้วยการตั้งชื่อโทเค็นที่มีตามโครงสร้างและการใช้งานที่แตกต่างกัน ซึ่งเราเรียกสิ่งนี้ว่า token scheme โดยโทเค็นแบบนี้เป็นการตั้งชื่อตามการใช้งาน เช่น ปุ่ม แบบฟอร์ม หรือการ์ด เป็นต้น
ถ้าเราแจกแจงรายละเอียดออกมา คุณจะเห็นว่ารูปแบบการตั้งชื่อโทเค็นจะมีลักษณะดังนี้color-button-bg
color-button-border
color-form-input-bg
color-form-input-border
color-card-bg
color-card-border
คุณสามารถใช้หลักการตั้งชื่อแบบเดียวกันนี้ได้กับ design foundation ที่หลากหลาย เช่น รูปแบบตัวอักษร การเว้นระยะ ระดับความสูง และรัศมีมุม เป็นต้น
สิ่งเหล่านี้ควบคุมสไตล์หลักของส่วนประกอบของคุณ และช่วยจัดระเบียบตามบริบทและการใช้งาน นอกจากนี้ยังช่วยให้คุณสามารถใช้ส่วนประกอบเดียวกันนี้ และเปลี่ยนเป็น design token ตามอุปกรณ์และโครงการของคุณ
ปรับเปลี่ยนสไตล์การออกแบบของคุณในทันที
คุณสามารถสลับสับเปลี่ยน design foundation ด้วย design system library ที่เหมือนกันได้อย่างง่ายดาย โดยใช้ design token scheme และการตั้งชื่อในรูปแบบเดียวกัน
ซึ่งจะช่วยให้คุณใช้ส่วนประกอบเดียวกันและเปลี่ยนโทเค็นการออกแบบตามอุปกรณ์และบริบทของโปรเจกต์ของคุณได้
ด้วยการใช้ design token scheme กับส่วนประกอบหลักทั้งหมด คุณสามารถเปลี่ยนสไตล์ตามการใช้งานเฉพาะหรือประเภทอุปกรณ์ได้โดยไม่กระทบต่อสิ่งต่างๆ ที่อยู่ภายนอกบริบท
การปรับเปลี่ยน design foundation จะเกิดขึ้นในสถานการณ์เหล่านี้:
การสลับไปมาระหว่าง responsive web กับ native app
ธีมมืดหรือสว่าง
Branding หรือ white label design
แปล design token ไปเป็นโค้ด
Design token ที่ถูกจัดอย่างเป็นระเบียบในเครื่องมือออกแบบ เช่น Figma หรือ Sketch สามารถแปลเป็นโค้ดได้อย่างง่ายดาย เช่นเดียวกับที่คุณสามารถใช้ design token ใน design system ของคุณเพื่อปรับขยายขอบเขตในการออกแบบ และคุณยังสามารถใช้ใน front-end framework ของคุณได้อีกด้วย
ท้ายที่สุดแล้ว design token ของคุณก็คือรากฐานสำหรับการปรับแต่งแบบเดียวกับที่ใช้ใน front-end framework มาเป็นเวลาหลายปี ดังนั้นถึงเวลาแล้วที่ความรับผิดชอบและการควบคุมจะกลับไปเป็นหน้าที่ของนักออกแบบเช่นเดิม
แหล่งข้อมูลจริงเพียงแห่งเดียว หรือ single source of truth
Design token สามารถแปลเป็นภาษาที่ใช้ในการเขียนโปรแกรม เช่น SCSS, JSON หรือ XML ได้อย่างง่ายดาย ซึ่งจะช่วยให้คุณแปลง design resource ของคุณให้เป็นแหล่งข้อมูลจริงเพียงแห่งเดียว
ประโยชน์ของการใช้ design resource เป็นแหล่งข้อมูลจริงเพียงแห่งเดียว
กระบวนการพัฒนาที่ทำได้ง่ายและเร็วยิ่งขึ้น
การทำงานระหว่างแพลตฟอร์ม
การออกแบบที่ปรับแต่งได้ยืดหยุ่น
ควบคุมการออกแบบและพัฒนาของคุณได้ตามที่ต้องการ
ที่มอร์โฟซิส เราเชี่ยวชาญด้านหลักการในการออกแบบ เช่น design system และ front-end framework เพราะทั้งสองสิ่งนี้มีบทบาทสำคัญในการออกแบบผลิตภัณฑ์และการสร้างผลิตภัณฑ์ที่ปรับขยายขนาด ซึ่งสามารถรองรับการเติบโตเมื่อมีการพัฒนาต่อยอดในอนาคตได้
มาเรียนรู้ว่าเราสามารถช่วยเหลือคุณในการออกแบบผลิตภัณฑ์เรื่องใดได้บ้าง
