Design Tokens

ใน Figma เมื่อคุณกำหนด color style ชื่อ brand/primary และนำไปใช้กับ element สามสิบอัน คุณสามารถเปลี่ยนสีนั้นครั้งเดียวแล้ว element ทั้งหมดจะอัปเดต นั่นคือพลังของแหล่งความจริงเดียว CSS custom properties — หรือที่เรียกว่า design tokens หรือ CSS variables — ให้พลังงานเดียวกันนั้นแก่คุณในโค้ด

Figma variables → CSS custom properties

แนวคิด Figma	CSS equivalent
Color Style `brand/primary`	`--color-primary: #7C3AED;`
Color Style `text/muted`	`--color-text-muted: #6B7280;`
Spacing variable `space/4`	`--space-4: 1rem;`
Radius variable `radius/card`	`--radius-card: 12px;`

คุณกำหนด tokens ทั้งหมดครั้งเดียวที่ด้านบนของ CSS บน selector พิเศษ :root :root หมายถึง “ทั้งเอกสาร” — ดังนั้นค่าเหล่านี้จะพร้อมใช้งานทุกที่

:root {
  --color-primary: #7C3AED;
  --color-text: #111827;
  --color-text-muted: #6B7280;
  --color-surface: #FFFFFF;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --radius-card: 12px;
}

ในการใช้ token ให้เขียน var(--token-name) แทนที่จะเขียนค่าโดยตรง:

.card {
  background: var(--color-surface);
  padding: var(--space-6);
  border-radius: var(--radius-card);
}

ทำไมสิ่งนี้จึงสำคัญ

เมื่อสีแบรนด์ของคุณเปลี่ยนจากม่วงเป็นน้ำเงิน คุณเปลี่ยน หนึ่งบรรทัด — --color-primary — แล้วปุ่ม ลิงก์ และ highlight ทุกอันในทุกเพจจะอัปเดตโดยอัตโนมัติ หากไม่มี tokens คุณจะต้องค้นหาและแทนที่ #7C3AED ที่ hardcode ไว้ทุกไฟล์ CSS

นี่คือสาเหตุที่ design systems มีอยู่: กำหนดการตัดสินใจครั้งเดียว ปฏิบัติตามทุกที่

Tokens ในการทำงาน

การ์ดด้านล่างสร้างขึ้นจาก tokens ทั้งหมด ลองเปลี่ยน --color-primary ในแผง CSS — สังเกตว่าปุ่มและแท็กทั้งคู่อัปเดตพร้อมกัน

<div class="card">
  <span class="tag">Product Design</span>
  <h3 class="card-title">Design Systems</h3>
  <p class="card-body">Building a single source of truth for color, spacing, and type.</p>
  <a class="btn-primary" href="#">Read more</a>
</div>

ข้อผิดพลาดที่นักออกแบบเจอบ่อย

Hardcode สี/spacing ในแต่ละ component แยกกันแทนอ้างอิง token กลาง
เปลี่ยนสี brand ใน Figma แต่ไม่รู้ว่า developer ต้องไปแก้ทีละที่ในโค้ดถ้าไม่มี token

มุมมองของ developer

👨‍💻 สิ่งที่ developer เห็นจริง ๆ

Designer เห็น “สี variable ใน Figma” แต่ developer เห็น CSS variable/design token ตัวเดียวที่ใช้ได้ทั้งระบบ เปลี่ยนที่เดียวกระทบทุกที่ที่ reference ถึง

💡 ตัวอย่างจากของจริง

รูปแบบของ W3C Design Tokens Community Group พยายามทำให้เครื่องมืออย่าง Figma กับโค้ดใช้ไฟล์ token ต้นทางเดียวกัน เพื่อให้ค่าสีหรือ spacing มีแหล่งความจริงเดียว ไม่ใช่สองแหล่งที่ค่อย ๆ เพี้ยนออกจากกัน