Thư viện thuật ngữ / UI/UX

Design token là gì?

Còn gọi: design tokens, token thiết kế, Figma Tokens

Design token là các giá trị thiết kế được đặt tên và lưu tập trung, như màu, cỡ chữ, khoảng cách, bo góc, bóng đổ, để dùng chung giữa file thiết kế và code, giúp sản phẩm nhất quán và dễ thay đổi.

Ảnh minh hoạ Design token: sơ đồ ba tầng token từ giá trị gốc đến token ngữ nghĩa đến component, với ví dụ màu nút
Sơ đồ ba tầng token từ giá trị gốc đến token ngữ nghĩa đến component, với ví dụ màu nút

Hiểu kỹ hơn

Thay vì ghi '#F15A24' ở khắp nơi, đội đặt token như color.brand.primary; khi đổi màu thương hiệu, chỉ cần sửa một chỗ. Token thường có nhiều tầng: token gốc (blue-500), token ngữ nghĩa (color.text.link) và token theo component (button.primary.background). Figma Variables và các plugin token giúp đồng bộ với code. Library có mục figma-tokens về cách làm trong Figma.