Design Token คืออะไร

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

หากไม่มีโทเค็น ค่าเดียวกันจะถูกทำซ้ำในโค้ด CSS, iOS และ Android แหล่งข้อมูลโทเค็นที่เป็นศูนย์กลางเพียงแห่งเดียวทำให้การเปลี่ยนสีแบรนด์อัปเดตทุกแพลตฟอร์มได้พร้อมกัน

หมวดหมู่ที่พบบ่อย ได้แก่ สี (แบรนด์ เชิงความหมาย และกลาง) รูปแบบตัวอักษร (ตระกูล แบบ ขนาด น้ำหนัก และความสูงบรรทัด) ระยะห่าง (ตาราง 4px) รัศมี เงา และภาพเคลื่อนไหว (ระยะเวลาและการผ่อนจังหวะ)

โทเค็นจัดเก็บเป็น JSON, YAML หรือรูปแบบโทเค็นการออกแบบของ W3C โทเค็นแต่ละรายการมีชื่อ ค่า ชนิด และคำอธิบายเพิ่มเติมที่เป็นตัวเลือก การแปลงจะเปลี่ยนโทเค็นให้เป็นผลลัพธ์เฉพาะแพลตฟอร์ม

โทเค็นส่วนกลางคือค่าดิบ: color-blue-500: #3b82f6 โทเค็นนามแฝงอ้างอิงโทเค็นส่วนกลางในเชิงความหมาย: color-action-primary: {color-blue-500} คอมโพเนนต์ควรอ้างอิงโทเค็นนามแฝง ไม่ใช่ค่าดิบ

พร็อพเพอร์ตีแบบกำหนดเองของ CSS เป็นผลลัพธ์ตามธรรมชาติสำหรับโทเค็นบนเว็บ โทเค็นชื่อ spacing-4 จะกลายเป็น --spacing-4: 1rem และนำไปใช้ทั่วทั้งสไตล์ชีตในรูปแบบ margin: var(--spacing-4)

ปลั๊กอิน Figma Tokens และ Tokens Studio ช่วยซิงก์โทเค็นการออกแบบระหว่าง Figma กับที่เก็บโค้ด นักออกแบบและนักพัฒนาใช้คำศัพท์โทเค็นชุดเดียวกัน จึงลดข้อผิดพลาดในการถ่ายทอดงาน

โทเค็นมีการเปลี่ยนแปลงอยู่เสมอ: ยกเลิกค่าที่เก่าโดยไม่ทำให้ผู้ใช้งานเสียหายด้วยการจัดเตรียมการจับคู่สำหรับการย้ายข้อมูล การใช้การกำหนดเวอร์ชันตามหลักความหมายกับแพ็กเกจโทเค็นจะส่งสัญญาณการเปลี่ยนแปลงที่ไม่เข้ากันได้ไปยังทีมที่ใช้งาน

JSON ของโทเค็นเดียวกันสามารถสร้างตัวแปร CSS สำหรับเว็บ ค่าคงที่ Swift สำหรับ iOS และทรัพยากร XML สำหรับ Android ไฟล์คำจำกัดความเพียงไฟล์เดียวช่วยป้องกันไม่ให้การตัดสินใจด้านการออกแบบแตกต่างกันไปตามแพลตฟอร์ม

เริ่มจากโทเค็นสีและระยะห่าง แทนที่ค่าที่เขียนตายตัวทีละไฟล์ ค้นหาในฐานโค้ดด้วยค่าฐานสิบหกดิบและค่าพิกเซลที่เขียนตายตัว เพื่อค้นหาการตัดสินใจด้านการออกแบบที่ยังไม่ได้เปลี่ยน

โทเค็นนามแฝงช่วยให้จัดการธีมได้ เพียงเปลี่ยนว่าโทเค็นนามแฝงชี้ไปยังโทเค็นส่วนกลางใด ธีมทั้งหมดก็จะเปลี่ยนโดยไม่ต้องแก้โค้ดคอมโพเนนต์ ธีมสว่าง มืด และแบรนด์ล้วนสร้างจากชั้นนามแฝงเดียวกัน

โทเค็นการออกแบบคือตัวแปรที่มีชื่อซึ่งเข้ารหัสการตัดสินใจด้านการออกแบบในรูปแบบที่ไม่ผูกกับแพลตฟอร์ม โทเค็นส่วนกลางเก็บค่าดิบ ส่วนโทเค็นนามแฝงให้ความหมายเชิงความหมาย ทั้งสองอย่างร่วมกันช่วยขับเคลื่อนระบบการออกแบบที่สอดคล้อง ดูแลรักษาได้ง่าย และใช้ได้หลายแพลตฟอร์ม