Design token có phải chỉ là biến CSS đổi tên?

Biến CSS là chỗ lưu giá trị. Token là quy ước về việc giá trị thuộc lớp nào (raw, alias, semantic) và ai được gọi thẳng tới nó. Hai dự án cùng dùng biến CSS có thể một bên có hệ token, một bên không.

Có cần Style Dictionary hay Tokens Studio để bắt đầu không?

Với một site hay một sản phẩm nhỏ thì chưa cần. Ba lớp token sống được trong một file CSS có kỷ luật. Công cụ chuyển đổi đáng dùng khi token phải xuất từ một nguồn ra nhiều nền tảng như web, iOS, Android.

Đổi giá trị ở lớp raw có làm component đổi theo ngay không?

Có. Đổi --brand-500 một lần, mọi nơi dùng bg-primary đổi theo mà không component nào phải sửa. Đó là lý do component chỉ được gọi lớp semantic.

Câu hỏi thường gặp về design token: 8 câu trả lời

Q: Nên đặt tên token theo màu hay theo vai trò?

Lớp raw đặt theo màu và bậc (gray-700). Lớp semantic đặt theo vai trò (muted-foreground). Tên theo màu ở lớp semantic sẽ sai ngay khi bạn đổi màu.

Design token là tên đặt cho một quyết định thiết kế, như màu chữ phụ hay bo góc của thẻ, để Figma và code dùng chung. Bài này trả lời tám câu tôi hay được hỏi nhất, từ chuyện token khác biến CSS ra sao tới chuyện có cần công cụ riêng. Mỗi câu trả lời dựa trên token thật của site này.

Nếu bạn chưa nắm ba lớp raw, alias, semantic, đọc bài design token là gì trước. Bài đó giải thích từng lớp kèm code.

Token có phải chỉ là biến CSS đổi tên không?

Không hẳn. Biến CSS là cơ chế lưu trữ. Token là quy ước về việc giá trị đó thuộc lớp nào và ai được phép gọi thẳng tới nó.

Ở site này, cả ba dòng dưới đều là biến CSS. Chỉ dòng cuối được dùng trong component:

--gray-700: #595959;                    /* raw */
--neutral-700: var(--gray-700);          /* alias */
--muted-foreground: var(--neutral-700);  /* semantic */

Hai dự án có thể cùng dùng biến CSS, nhưng chỉ dự án có quy ước phân lớp mới có hệ token thật. Dự án còn lại có một danh sách hằng số.

Có cần công cụ riêng như Style Dictionary hay Tokens Studio không?

Ở quy mô một trang hay một sản phẩm nhỏ thì chưa cần. Ba lớp token có thể sống trong một file CSS có kỷ luật, như app/globals.css của site này.

Công cụ chuyên dụng đáng dùng khi token phải đồng bộ từ một nguồn ra nhiều nền tảng. Style Dictionary đọc file token và xuất ra CSS, Swift, Kotlin. Theo tài liệu của nó, từ bản 4 Style Dictionary hỗ trợ định dạng của W3C Design Tokens Community Group, dù bản đặc tả mới nhất 2025.10 vẫn đang được hoàn thiện hỗ trợ ở bản 5.

Tình huống	Đủ dùng
Một site, một codebase web	File CSS có ba lớp
Web cộng app iOS, Android	File JSON chuẩn W3C cộng Style Dictionary
Designer muốn sửa token ngay trong Figma	Figma Variables, hoặc plugin như Tokens Studio

Đổi giá trị ở lớp raw có ảnh hưởng ngay tới component không?

Có, và đó là điểm của việc có ba lớp. Đổi --brand-500 một lần, mọi nơi dùng bg-primary cập nhật theo mà không component nào phải sửa.

Điều kiện là component không bao giờ gõ thẳng lớp raw. Ở site này, lớp raw cố ý không được nối sang Tailwind, nên class bg-gray-600 không tồn tại. Muốn dùng màu xám, bạn phải đi qua bg-muted hoặc text-muted-foreground.

Nên đặt tên token theo màu hay theo vai trò?

Tuỳ lớp. Lớp raw đặt theo màu và bậc: --gray-700, --brand-500. Lớp semantic đặt theo vai trò: --background, --muted-foreground, --destructive.

Tên theo màu ở lớp semantic sẽ sai ngay lần đổi màu đầu tiên. Một token tên --pink-button sau khi đổi thương hiệu sang xanh là một lời nói dối nằm trong code. Site này dùng bộ tên semantic của shadcn, cộng thêm ba token riêng là subtle-foreground, primary-text và footer.

Làm dark mode bằng token thế nào?

Cách gọn nhất là đánh số thang trung tính theo khoảng cách tới nền, theo quy ước của Radix. neutral-50 luôn là nền, neutral-950 luôn là chữ đậm nhất. Khi đó dark mode chỉ cần đổi giá trị lớp raw trong .dark, còn lớp alias và semantic giữ nguyên.

Trong Figma, việc tương đương là tạo một collection có hai mode Light và Dark. Mỗi variable giữ một giá trị cho mỗi mode. Các câu hỏi chi tiết hơn nằm ở bài câu hỏi thường gặp về dark mode và bài thang màu Radix.

Có định dạng chuẩn cho file token không?

Có. Design Tokens Community Group của W3C công bố bản Design Tokens Format Module 2025.10 vào ngày 28/10/2025. File dùng đuôi .tokens hoặc .tokens.json. Mỗi token có $value, thường kèm $type, và tham chiếu tới token khác bằng ngoặc nhọn:

{
  "primary": {
    "$type": "color",
    "$value": "{brand.500}"
  }
}

Bạn chỉ cần định dạng này khi có công cụ đọc nó. Nếu token chỉ phục vụ một site web, file CSS là đủ.

Giữ token trong Figma và trong code khớp nhau bằng cách nào?

Ba việc giúp nhiều nhất:

Dùng cùng một tên. Variable trong Figma tên muted-foreground thì biến CSS cũng tên --muted-foreground.
Điền Code syntax cho từng variable. Figma cho ghi tên code riêng cho Web, Android và iOS. Với Web, ghi kèm var() để Dev Mode hiện tên biến thay vì mã hex.
Cho AI đọc cả hai phía. Tôi dùng Figma MCP để Claude Code đọc variable trong file Figma rồi đối chiếu với globals.css. Cách làm nằm ở bài Figma MCP và Claude Code.

Phần lý do vì sao mỗi token tồn tại thì không nằm trong Figma hay CSS. Tôi ghi nó trong DESIGN.md, giải thích ở bài DESIGN.md là gì.

Một hệ thống cần bao nhiêu token là đủ?

Ít hơn bạn nghĩ. Site này có đúng ba giá trị bề mặt (#ffffff nền, #f8f8f8 mảng xám, #efefef đường kẻ) và bốn bậc chữ. Tôi ghi thẳng vào quy ước dự án: nếu thiết kế cần giá trị thứ tư thì bố cục đang sai.

Số token tăng nhanh nhất khi mỗi màn hình mới được phép xin một màu mới. Trước khi thêm token, thử xem một token có sẵn có làm được việc đó không. Nếu có, dùng nó. Nếu không, hỏi xem bố cục có cần thay đổi trước.

Nguồn

Design Tokens Format Module 2025.10, W3C Design Tokens Community Group. Truy cập 2026-10-04.
Figma: Overview of variables, collections, and modes. Truy cập 2026-10-04.
Figma Plugin API: setVariableCodeSyntax.
Tailwind CSS: Theme variables. Truy cập 2026-10-04.
Style Dictionary: DTCG support. Truy cập 2026-10-04.

Tôi là Hai Le, UI/UX designer dựng design system và viết code cho chính site này. Muốn xem tôi áp dụng token trong một sản phẩm thật, đọc case study Joyme, hoặc xem thêm về tôi.