Token ngữ nghĩa - Khi đặt tên cũng... không đơn giản

Chapter 01 - Khi màu xanh không nên là “blue”

Làm UI, chuyện có ba bốn màu xanh là bình thường. Trong một dự án cũ, mình có dùng ba sắc độ của màu xanh dương. Một màu dành cho nền, một màu dành cho button chính, và một màu để hover. Cả ba đều là xanh, nhìn thì khác biệt không rõ ràng lắm, nhưng từng cái mang vai trò khác nhau.

Khi đặt tên trong Figma, mình chọn cách nhanh nhất: blue-1, blue-2, blue-3. Lúc đó thấy cũng ổn. Nhưng rồi dự án kéo dài, người sửa không chỉ còn là mình. Mình từng nghĩ miễn nhớ được là đủ. Nhưng càng làm nhiều màn, càng thấy mỗi trí nhớ của mình thì không ăn thua. Không phải vì mình kém nhớ mà là những cái tên đó không nói gì về mục đích dùng.

Và thế là vào một ngày đẹp trời, anh dev Front-end ping hỏi mình:

“Màu blue-2 là dùng ở đâu vậy em?”
“Check lại đi em, cái hover cho button này chú đang dùng là blue-3 đấy, anh thấy cái button ở popup trong màn login kia chú đang để hover là blue-2 cơ mà?”

Mình mở lại file thiết kế, mò từng màn một như lục một tủ quần áo bừa bộn chỉ để tìm một cái áo trắng có một cái cúc màu đen vậy. Thế là mình biết mình đang thiếu một thứ mà những người làm hệ thống luôn phải có, ngữ nghĩa.

Chapter 02 - Tên gọi không chỉ để phân biệt

Một thành phần thiết kế nếu chỉ được gọi bằng hình dáng hoặc mã kỹ thuật kiểu như #3A7DFF hay 16px bold, thì nó đang mất đi chức năng truyền thông tin. Nhưng nếu nó được gọi bằng chính vai trò trong hệ thống thì mọi người, dù là designer, developer hay QA đều hiểu nó xuất hiện để làm gì.

Đó là lúc mình bắt đầu tìm hiểu và chuyển sang cách đặt tên theo semantic tokens, tức là token ngữ nghĩa.

Thay vì gọi #3A7DFF là blue-primary, mình gọi nó là color-button-primary. Thay vì font-16-bold, thì là text-label-medium. Spacing 24px thì là spacing-card-padding-lg.

Những cái tên này có vẻ dài hơn, nhưng rõ ràng hơn rất nhiều. Và hơn hết là nó không hề khó nhớ.

Chapter 03 - Token ngữ nghĩa giúp mình “gỡ rối” cả hệ thống

Lúc đầu mình tưởng token chỉ là cách giúp làm việc dễ hơn, nhưng sau vài lần áp dụng là mình nhận ra nó thay đổi cả cách mình tư duy hệ thống. Không còn là “màu đẹp thì chọn”, “font vừa mắt thì dùng” nữa mà là “chỗ này là tiêu đề cấp 2 thì phải dùng text-heading-h2”, “Khoảng cách này là khoảng cách chuẩn giữa thẻ và nội dung thì dùng spacing-card-gap”,…

Cái tên không chỉ định nghĩa thành phần đó là gì, mà còn nhắc mình nhớ vị trí, ngữ cảnh và logic sử dụng. Nó giống như khi bạn gọi một người là “chị kế toán” thay vì “chị tóc ngắn” vậy. Gọi đúng, làm đúng, hiểu đúng.

Chapter 04 - Không hề mất công đâu

Mình không ngồi viết guideline dài mấy trang mà chỉ bắt đầu từ những thứ lặp đi lặp lại nhất: Button chính, Heading, Padding chuẩn của thẻ và Background mặc định. Sau đó từ từ tạo cấu trúc đặt tên theo mô hình: category-purpose-state.Ví dụ:
color-button-primary-hover sẽ là "màu sắc dùng cho button chính khi trạng thái button là hover"
text-heading-h3 sẽ là "font size dùng cho tiêu đề cấp 3"
spacing-input-vertical sẽ là "khoảng cách các input xếp theo chiều dọc"

Mình thử nghiệm trong 1 tuần và thấy file Figma rõ ràng hơn, dev không hỏi lại, và mình cũng thao tác nhanh hơn vì chỉ cần gõ token là ra đúng thành phần. Thấy không? Vừa dễ hiểu, vừa dễ dùng và vừa… hay ho hơn là blue-1, blue-2,… đúng chứ?

Chapter 05 – Không cần system to mới dùng được

Lúc trước mình tưởng phải có cả một đội chuyên làm design system thì mới cần tới token. Nhưng không! Chỉ cần bạn có từ hai thành viên trở lên cần dùng chung một file, hoặc bạn hay phải lặp lại UI tương tự nhiều lần, thì token đã là thứ nên có rồi.

Dự án freelance, startup nhỏ, hoặc solo designer làm lâu dài lại càng cần. Vì mỗi lần sửa, mỗi lần update, nếu không có logic rõ ràng từ đầu là bạn sẽ phải tự mò lại chính file mình đã vẽ ra. Và khi mọi thứ bắt đầu xung đột, chỉ một cái tên rõ ràng cũng đủ để tránh cả chuỗi sai sót dây chuyền cũng như tiết kiệm cho bạn rất nhiều thời gian lục lọi đấy.

Chapter 06 – Và mọi thứ còn lại trở nên… đơn giản hơn

Design không chỉ là đẹp mà còn là rõ ràng, có thể tái sử dụng và bền lâu. Mình từng nghĩ điều đó chỉ đúng với wireframe hay hệ thống flow nhưng giờ thì mình tin là nó đúng ngay từ tên gọi đầu tiên bạn đặt cho một màu. Cách đặt tên cho thấy bạn hiểu hệ thống của mình đến đâu.

Và nếu muốn bắt đầu xây dựng một thứ có thể mở rộng được thì token ngữ nghĩa là một khởi đầu rất quan trọng.

Nếu bạn đã có bảng màu, spacing, text style trong file Figma thì đây là thời điểm thích hợp để gọi tên chúng một cách rõ ràng hơn. Không cần phức tạp hóa, không cần “chuẩn hóa” ngay từ đầu. Chỉ cần đặt một cái tên mà người khác đọc vào đã hiểu được ngay ý đồ thiết kế của bạn là đủ.