สถาปัตยกรรมโทเค็นการออกแบบความหมาย: โทเค็นส่วนกลาง ความหมาย และส่วนประกอบ

สามชั้น

Material Design อธิบายโทเค็นสามคลาส: การอ้างอิง ระบบ และส่วนประกอบ หลายทีมเรียกพวกเขาว่า global, semantic และ part ชื่อแตกต่างกัน แต่แนวคิดเหมือนกัน: แยกค่าดิบออกจากการตัดสินใจเกี่ยวกับวิธีการใช้งาน

• Global (ข้อมูลอ้างอิง): ทุกค่าดิบในระบบ เช่น blue-600, space-4, font-size-16, spring-gentle
• ความหมาย (ระบบ): ค่านั้นมีไว้เพื่ออะไร เช่น color.text.primary, color.action.primary, motion.enter
• ส่วนประกอบ: วิธีที่ส่วนประกอบหนึ่งใช้ระบบ เช่น button.Background หรือ Dialog.motion.open

เหตุใดโทเค็นความหมายจึงมีความสำคัญ

หากปุ่มใช้สีน้ำเงิน-600 โดยตรง การเปลี่ยนแปลงธีมทุกครั้งหมายถึงการแก้ไขทุกองค์ประกอบ หากใช้ color.action.primary โหมดมืด คอนทราสต์สูง หรือแบรนด์ใหม่จะเปลี่ยนเฉพาะสิ่งที่ color.action.primary ชี้ไป หมายเหตุสำคัญที่โทเค็นทำให้สามารถใช้จานสีที่มีคอนทราสต์สูงหรือเปลี่ยนระดับประเภททั้งระบบในลักษณะนี้

ธีมและหลายยี่ห้อ

สำหรับผลิตภัณฑ์ที่มีหลายแบรนด์หรือไวท์เลเบล ให้เก็บโทเค็นความหมายและส่วนประกอบหนึ่งชุด และจานสีส่วนกลางหนึ่งชุดต่อแบรนด์ แต่ละธีมคือการแมปจากโทเค็นเชิงความหมายไปจนถึงค่าโกลบอล เวอร์ชันเสถียรรุ่นแรกของข้อกำหนด W3C Design Tokens (2025.10) เปิดตัวในเดือนตุลาคม 2025 เพิ่มธีมและการรองรับหลายแบรนด์ พื้นที่สีที่ทันสมัย ​​เช่น Display P3 และ OKLCH และนามแฝงและการอ้างอิงระดับส่วนประกอบ

โทเค็นการเคลื่อนไหวก็อยู่ที่นี่เช่นกัน

ระยะเวลา การค่อยๆ เปลี่ยนเส้นโค้ง และสปริงจะเป็นไปตามระดับเดียวกัน โทเค็นระดับโลกอาจมีสปริงที่อ่อนโยนพร้อมทั้งความแข็งและการหน่วง โทเค็นความหมาย Motion.enter ชี้ไปที่มัน โทเค็นส่วนประกอบ sheet.motion.open ชี้ไปที่ Motion.enter เพิ่มธีมแบบลดการเคลื่อนไหวซึ่งจะทำการแมปโทเค็นการเคลื่อนไหวให้เป็นการเฟดแบบสั้น

จัดส่งโทเค็นไปยังทุกแพลตฟอร์ม

เก็บโทเค็นไว้ในที่เก็บข้อมูลเป็น DTCG JSON ซึ่งเป็นแหล่งความจริงแห่งเดียว เครื่องมือสร้าง เช่น Style Dictionary แปลงเป็นตัวแปร CSS, Swift, Kotlin, Flutter หรือรูปแบบอื่นๆ เครื่องมือออกแบบที่อ่านรูปแบบเดียวกันสามารถซิงค์กันได้ และเครื่องมือเข้ารหัส AI ก็สามารถอ่าน JSON ได้โดยตรง

• แหล่งที่มาของความจริง: DTCG JSON ใน Git ตรวจสอบเหมือนโค้ด
• สร้าง: เปลี่ยนแปลงไปตามแต่ละแพลตฟอร์มในทุกการเปลี่ยนแปลง
• การซิงค์เครื่องมือออกแบบ: นำเข้าหรือปลั๊กอิน ไม่ต้องคัดลอกค่าด้วยมือ
• Linting: ห้ามค่าดิบในส่วนประกอบ