hand lthand lthand lthand lthand lthand lt
14Jul, 2023
Language blog :
Thai
Share blog : 
14 July, 2023
Thai

Design system evolves to Design token

By

3 mins read
Design system evolves to Design token

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 เหมือนกัน

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

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

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

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

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

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





Design token examples
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 ที่ไม่ใช้สีก็เป็นไปได้ ออกแบบในมุมมองที่สะดวกสบายลดความยุ่งยากหรือรูปแบบการพิมพ์เอง

Dark mode and light mode

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 ต่อได้



Token name parts

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 อาจดูแตกต่างกันในบริบทสภาพแวดล้อมหรือเครื่องมือการทำงานต่างๆ ที่แต่ละทีมในองค์กรใช้ทำงานร่วมกัน

Ads libraries

Image : Ads-libraries

Reference :

 

Written by
Snooker
Snooker

Subscribe to follow product news, latest in technology, solutions, and updates

- More than 120,000 people/day visit to read our blogs

Other articles for you

18
April, 2024
UX for Psychology - Loss Aversion (ความกลัวการสูญเสีย)
18 April, 2024
UX for Psychology - Loss Aversion (ความกลัวการสูญเสีย)
หลายคนคงเคยเจอเหตุการต่างๆ บนโลกดิจิทัลที่สามารถนำพาเราไปเสียเงินหรือสมัครใช้บริการได้ง่าย ๆ ทั้งที่ไม่รู้ตัว ลองมาดูกันว่า พวกเขาเหล่านั้น ใช้วิธีหลอกล่อนักชอปอย่างเรากันอย่างไรบ้าง พื้นฐานของคนทั่วไปนั้นไม่อยากที่จะสูญเสียอะไรไป แม้แต่สิ่งที่อาจจะไม่จำเป็น เราอาจจะพบการทำการตลาดในเชิงนี้ได้บ่อย ๆ ทั้ง ๆ ที่เราไม่รู้ตัว และอาจจะไม่จำเป็นต้องซื้อแต่โดนกระตุ้นด้วยข้อมูลที่เรารับมาแบบงง ๆ เช่น Flash sale 40% สินค้าที่มีจำนวนจำกัด นั้นจะน่าสนใจมากกว่าการเดินเจอสินค้าเดียวกันในห้างที่ลดราคา 40% เช่นเดียวกัน ข้อความบนเว็บช็อปปิ้งที่ส่งมาหาคุณว่าสินค้าที่คุณเคยสนใจกำลังลดราคาอยู่ อย่าพลาดโอกาสที่จะซื้อตอนนี้ มักกระตุ้นความต้องการซื้อของเราได้เป็นอย่างดี เพราะเรากลัวที่จะเสียโอกาสดี

By

3 mins read
Thai
18
April, 2024
ทำไม Google Fonts ถึงเป็นทางเลือกที่ดีในการออกแบบเว็บไซต์
18 April, 2024
ทำไม Google Fonts ถึงเป็นทางเลือกที่ดีในการออกแบบเว็บไซต์
แต่ก่อน เวลาที่เว็บไซต์ถูกดีไซน์ด้วยฟอนต์แปลก ๆ หรือมีเอกลักษณ์เฉพาะตัว จะทำให้ผู้ใช้งานบางคนมองไม่เห็น เพราะในเครื่องของผู้ใช้งานไม่มีฟอนต์นั้น ระบบก็จะเลือกเอาฟอนต์อื่นในเครื่องขึ้นมาแสดงผล เห็นเป็นฟอนต์อื่นไป ทำให้ดีไซเนอร์ต้องแก้ปัญหาด้วยการทำรูปแล้วเอามาแปะในเว็บไซต์แทน หรือแม้ว่าจะแสดงผลตามที่ถูกออกแบบมา ความเร็วก็อาจเป็นปัญหาในการโหลดและเข้าถึง เพราะฟอนต์ถูกโหลดจากเซิร์ฟเวอร์ แต่สมัยนี้ไม่มีใครใจเย็นพอที่จะรออะไรนานๆ เพราะจากรายงานระบุว่า 40% ของคนที่เข้าเว็บไซต์ จะออกหรือปิดทันทีถ้ามีการโหลดนานกว่า 3 วินาที โดยเฉพาะนักช็อปออนไลน์เกือบครึ่งที่พร้อมจะหันหลังให้อีคอมเมิร์ซเว็บไซต์ที่โหลดช้ากว่า 2 วินาที และ 79% บอกว่ามีโอกาสที่จะไม่ใช้บริการอีก Google Fonts คืออะไร? (กันแน่) หลายคนคงรู้จัก Google Fonts แต่วันนี้เราจะพามาทำความรู้จักให้มากขึ้น

By

4 mins read
Thai
18
April, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
18 April, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
S&P Food’s yearly revenues were 435 mils $USD. 10% of the revenue was from online sales. The board of directors felt that online sales should account for more. The digital

By

4 mins read
English

Let’s build digital products that are
simply awesome !

We will get back to you within 24 hours!Go to contact us
Please tell us your ideas.
- Senna Labsmake it happy
Contact ball
Contact us bg 2
Contact us bg 4
Contact us bg 1
Ball leftBall rightBall leftBall right
Sennalabs gray logo28/11 Soi Ruamrudee, Lumphini, Pathumwan, Bangkok 10330+66 62 389 4599hello@sennalabs.com© 2022 Senna Labs Co., Ltd.All rights reserved.