Chuẩn token DTCG JSON là gì và vì sao nên dùng

Chốt nhanh

DTCG (Design Token Community Group) là đặc tả định dạng JSON do cộng đồng W3C soạn thảo, quy định cách viết tên và giá trị token sao cho các công cụ như Figma, Style Dictionary, Tokens Studio đều đọc được mà không cần chuyển đổi thủ công. Dùng DTCG nghĩa là hệ thống thiết kế không bị ràng buộc vào một nhà cung cấp cụ thể, đổi toolchain sau này không mất dữ liệu. Đây là định dạng mặc định Sinh Vũ áp dụng cho tất cả dự án có design system.

DTCG JSON không phải khái niệm phức tạp. Đây đơn giản là một thỏa thuận chung về cách viết file token, để bất kỳ công cụ nào cũng hiểu được mà không cần dịch thủ công. Anh / Chị chọn định dạng này ngay từ đầu, thì sau này đổi công cụ, thêm nền tảng, hoặc bàn giao cho đội kỹ thuật mới đều không mất dữ liệu.

DTCG JSON là gì

DTCG là viết tắt của Design Token Community Group, nhóm cộng đồng thuộc W3C soạn thảo đặc tả định dạng cho design token. Đặc tả này quy định mỗi token là một object JSON với ba trường bắt buộc:

$value: giá trị thực của token, ví dụ #1A1A1A hoặc 16px
$type: kiểu dữ liệu, ví dụ color, dimension, fontFamily
$description: mô tả ngữ cảnh sử dụng, để developer biết khi nào dùng token này

Nhờ cấu trúc nhất quán này, công cụ như Style Dictionary (của Amazon) có thể đọc file DTCG và tự động chuyển sang CSS, Swift, Kotlin, XML mà không cần viết script riêng cho từng nền tảng.

Vì sao trung lập quan trọng

Trước khi DTCG phổ biến, mỗi công cụ dùng định dạng riêng. Figma có cách xuất token của Figma, Tokens Studio có schema riêng, Style Dictionary có cú pháp riêng. Khi team muốn đổi công cụ hoặc thêm nền tảng mới, họ phải viết lại toàn bộ file token hoặc viết script chuyển đổi tùy chỉnh.

DTCG giải quyết vấn đề này bằng cách làm lớp trung gian: token được viết một lần, mọi công cụ đọc cùng một file. Đây là lý do Sinh Vũ gọi DTCG là định dạng trung lập, không phải vì nó không có quan điểm, mà vì nó không ràng buộc Anh / Chị vào bất kỳ nhà cung cấp nào.

Nguồn sự thật (source of truth, tức bản gốc làm chuẩn) phải nằm ở repository code, không phải trong Figma. Figma là giao diện chỉnh sửa. Git là lịch sử và kiểm soát phiên bản.
Quan điểm ngành, áp dụng tại Shopify Polaris và IBM Carbon

Khi nào dùng DTCG, khi nào chưa cần vội

Nên dùng DTCG ngay: Dự án dự kiến triển khai trên nhiều nền tảng (web, iOS, Android), có developer tham gia, hoặc cần CI/CD (quy trình tích hợp và triển khai tự động) validate token trước khi đưa vào production. DTCG có schema JSON chuẩn để hệ thống tự kiểm tra định dạng mà không cần con người làm thủ công.

Có thể trì hoãn: Team chỉ dùng Figma, chưa có developer, dự án ngắn hạn và không có kế hoạch maintain lâu dài. Trong trường hợp này, Anh / Chị có thể dùng Figma Variables trước, rồi migrate sang DTCG khi dự án mở rộng. Tuy nhiên nên biết rằng việc migrate muộn sẽ tốn công hơn.

Lỗi thường gặp khi bỏ qua DTCG

Dùng định dạng riêng của một công cụ duy nhất, rồi bị kẹt khi muốn đổi hoặc thêm công cụ khác.
Trộn lẫn global token (giá trị gốc, ví dụ màu xanh cụ thể) và alias token (vai trò ngữ nghĩa, ví dụ màu nền chính) trong cùng một file, khiến đội kỹ thuật không phân biệt được tầng nào đang làm gì.
Bỏ trường $type, dẫn đến Style Dictionary transform sai kiểu dữ liệu vì không biết giá trị 16 là số pixel hay hệ số nhân.
Export token từ Figma thủ công thay vì tự động qua plugin, dễ xảy ra lệch giữa bản thiết kế và code thực tế.
Không version file token, không biết ai thay đổi gì và khi nào, đặc biệt nguy hiểm khi có nhiều người chỉnh sửa.

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

Sinh Vũ chọn DTCG JSON làm định dạng chuẩn cho tất cả dự án A3. File token được lưu trong repository, đồng bộ với Figma qua Tokens Studio hoặc plugin tương đương. Mỗi lần release hệ thống đều có bản diff token rõ ràng, nghĩa là danh sách cụ thể những token nào thay đổi, để cả khách lẫn đội kỹ thuật hiểu trước khi deploy.

Lý do đơn giản: Sinh Vũ không muốn khách phụ thuộc vào bất kỳ công cụ nào Sinh Vũ đang dùng hôm nay. Toolchain thay đổi, nhà cung cấp thay đổi. Dữ liệu token của Anh / Chị phải là tài sản của Anh / Chị, không phải của vendor.

Nguồn tham khảo

W3C Design Tokens Community Group Draft Specification; Style Dictionary (Amazon): tài liệu chính thức và migration guide; Tokens Studio for Figma: DTCG support documentation; Kinh nghiệm thực hành Sinh Vũ trên dịch vụ A3.

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

DTCG có phải chuẩn chính thức của W3C chưa?

DTCG hiện là Draft Specification của W3C Community Group, chưa phải Recommendation chính thức. Tuy nhiên các công cụ lớn như Figma Variables, Tokens Studio và Style Dictionary đã hỗ trợ định dạng này. Trong ngành, đây đã là lựa chọn thực tế được áp dụng rộng rãi, không cần đợi chuẩn hóa hoàn toàn mới bắt đầu dùng.

Nếu team chỉ dùng Figma, có cần DTCG không?

Nếu team chỉ dùng Figma và không có developer tham gia xây dựng code, Anh / Chị có thể dùng Figma Variables trước. Tuy nhiên nên cân nhắc migrate sang DTCG khi dự án mở rộng sang web hoặc mobile, vì lúc đó việc chuyển đổi sẽ tốn nhiều công hơn nếu không chuẩn bị từ đầu. Sinh Vũ khuyến nghị bắt đầu với DTCG từ sớm để tránh rủi ro này.

Token lưu ở Figma hay ở repository code?

Sinh Vũ giữ nguồn sự thật (source of truth, tức bản gốc làm chuẩn) tại repository code, không phải Figma. Figma là giao diện để chỉnh sửa và xem trực quan, còn Git là nơi lưu lịch sử, kiểm soát phiên bản và cho phép review thay đổi trước khi áp dụng. Cách tiếp cận này được các tổ chức lớn như Shopify Polaris và IBM Carbon áp dụng.