Design Tokens là gì và khi nào đáng đầu tư

Chốt nhanh

Design token là đơn vị nhỏ nhất của một quyết định thiết kế, ví dụ mã màu chủ đạo hay một bước giãn cách, được ghi dưới dạng máy đọc được để web, iOS và Android cùng kéo từ một nguồn. Pipeline token xứng đáng đầu tư khi sản phẩm số của Anh Chị chạy trên nhiều nền tảng và cần đổi thương hiệu một chỗ rồi áp mọi nơi. Với một website đơn lẻ hoặc thương hiệu chưa có sản phẩm số, ghi đủ mã HEX, RGB, CMYK trong quy chuẩn là đủ dùng.

Design token không phải khái niệm phức tạp, nhưng hay bị hiểu nhầm theo hai hướng đối lập: hoặc tưởng rằng mọi thương hiệu đều cần, hoặc cho rằng chỉ là chuyện của lập trình viên, không liên quan đến thương hiệu. Sinh Vũ giải thích thẳng để Anh Chị quyết định đúng phạm vi.

Design token là gì

Token là đơn vị nguyên tử (nhỏ nhất, không thể chia nhỏ hơn) của một quyết định thiết kế. Thay vì ghi cứng màu xanh chủ đạo là #0057B8 ở hàng trăm chỗ trong mã nguồn, Anh Chị định nghĩa một token tên color-brand-primary có giá trị #0057B8. Toàn bộ web, iOS, Android đọc token đó. Khi thương hiệu điều chỉnh màu, chỉ cần đổi một chỗ, tất cả nền tảng nhận ngay.

Token lưu được nhiều hơn màu: bước giãn cách, cỡ chữ, đổ bóng, bo góc đều có thể token hóa. Tháng 10 năm 2025, Nhóm cộng đồng W3C (tổ chức thiết lập chuẩn web quốc tế) đã phát hành phiên bản ổn định đầu tiên của định dạng Design Tokens, được Figma, Style Dictionary, Tokens Studio và nhiều công cụ lớn hỗ trợ. Đây là dấu hiệu hệ sinh thái đã đủ trưởng thành để đầu tư.

Token định nghĩa biến, hệ thiết kế định nghĩa quan hệ và quy tắc các biến đó tương tác. Có kho token không đồng nghĩa đã có hệ thiết kế đầy đủ.
Design Tokens Format Module, W3C Community Group

Các yếu tố cần cân nhắc

Số nền tảng cần đồng bộ. Token phát huy khi cùng một màu phải khớp trên web, iOS và Android cùng lúc. Một nền tảng duy nhất thì lợi ích ít hơn chi phí thiết lập.
Tần suất thay đổi thương hiệu hoặc chủ đề. Thương hiệu cần đổi màu theo mùa, theo thị trường, hoặc có nhiều sub-brand, token tiết kiệm thời gian rõ rệt.
Đội kỹ thuật có vận hành được pipeline không. Pipeline (chuỗi xử lý tự động) dịch token thành mã CSS, Swift, Kotlin cần người hiểu công cụ và bảo trì đều đặn. Token không người bảo trì sẽ lệch bản nhanh.
Mức trưởng thành của sản phẩm. Giao diện đang thay đổi liên tục thì pipeline token dễ thành gánh nặng hơn là tiết kiệm.
Công cụ đang dùng có hỗ trợ chuẩn token không. Figma, Style Dictionary, Tokens Studio đã hỗ trợ. Nếu đội đang dùng công cụ cũ hơn, cần kiểm tra trước khi cam kết.

Khi nào chọn hướng nào

Đáng đầu tư pipeline token đầy đủ khi sản phẩm số chạy trên ít nhất hai nền tảng (web và mobile), có đội kỹ thuật duy trì, và giao diện đã tương đối ổn định. Lợi ích lớn nhất là đổi thương hiệu một chỗ, áp mọi nơi, không sót nền tảng.

Chưa cần pipeline khi chỉ có một website đơn lẻ, hoặc thương hiệu chưa có sản phẩm số nào. Lúc này, quy chuẩn ghi đủ mã HEX, RGB, CMYK là nguồn duy nhất mà cả đội thiết kế lẫn đội in ấn đều dùng được.

Mức nhẹ ở giữa là dùng Variables trong Figma để đồng bộ thiết kế nội bộ nhưng chưa dựng pipeline sinh mã tự động. Phù hợp khi đội kỹ thuật chưa sẵn sàng nhưng muốn đặt nền móng trước.

Lỗi thường gặp

Dựng pipeline phức tạp cho sản phẩm chưa ổn định. Giao diện đổi, token đổi theo, pipeline cần cập nhật liên tục, tốn công hơn làm thủ công.
Tưởng có bộ token là có hệ thiết kế. Token chỉ là biến. Quan hệ giữa chúng, ví dụ màu nào dùng cho nền, màu nào cho chữ trên nền đó, vẫn cần được định nghĩa riêng thành quy tắc.
Đặt token theo giá trị thay vì vai trò. Token tên do-#C42021 chỉ mô tả màu sắc. Token tên mau-nhan (màu nhấn) mô tả vai trò. Khi thương hiệu đổi màu nhấn từ đỏ sang cam, token theo vai trò chỉ cần đổi một giá trị, token theo giá trị buộc phải tìm và sửa khắp nơi.

Góc nhìn của Sinh Vũ

Sinh Vũ chỉ đưa token vào phạm vi làm việc khi khách thật sự có sản phẩm số nhiều nền tảng và đội kỹ thuật đủ năng lực vận hành. Ở cấp quy chuẩn thông thường, Sinh Vũ khóa hệ màu bằng đủ mã HEX, RGB, CMYK, đây là dạng nguồn duy nhất mà cả đội thiết kế lẫn đội in ấn đều đọc được mà không cần phần mềm đặc biệt.

Sinh Vũ không dựng pipeline token thay cho khách khi chưa có đội kỹ thuật vận hành. Pipeline mà không có người bảo trì sẽ lệch bản theo thời gian và tạo ra vấn đề lớn hơn vấn đề nó giải quyết. Nếu Anh Chị đang ở giai đoạn cần đánh giá, câu hỏi thực tế nhất là: ai trong đội sẽ cập nhật token này khi thương hiệu thay đổi vào năm sau?

Nguồn tham khảo

W3C Design Tokens Community Group, Design Tokens Format Module (designtokens.org); Contentful, Design token system; kinh nghiệm thực hành Sinh Vũ.

Câu hỏi thường gặp

Figma đã có Variables rồi, dùng đó thay token được không?

Figma Variables là cách lưu token bên trong file Figma, nhưng để đồng bộ ra mã thực tế cho iOS hay Android vẫn cần bước dịch bổ sung, thường qua Style Dictionary hoặc Tokens Studio. Nếu đội chỉ làm web và Figma là điểm cuối, Variables đủ dùng. Nếu cần sinh mã đa nền tảng tự động thì phải dựng pipeline đầy đủ hơn.

Bộ token có thay thế được hệ thiết kế không?

Không. Token định nghĩa các biến riêng lẻ, còn hệ thiết kế định nghĩa quan hệ và quy tắc các biến đó tương tác với nhau. Có kho token mà thiếu quy tắc quan hệ thì đội kỹ thuật vẫn phải tự suy luận cách ghép chúng, và kết quả thường không đồng nhất.

Khi nào nên bắt đầu nghĩ đến token, không phải ngay từ đầu?

Nên bắt đầu nghĩ đến token khi giao diện sản phẩm đã tương đối ổn định và đội kỹ thuật bắt đầu phàn nàn về việc cập nhật màu hay chữ bị sót nền tảng. Dựng pipeline token trên một giao diện đang thay đổi liên tục sẽ tốn công bảo trì nhiều hơn giá trị nhận lại.