Dưới cả nguyên tử còn một tầng nữa
Một nút là nguyên tử. Nhưng nút đó có màu nền, màu chữ, cỡ chữ, bo góc, khoảng đệm. Nếu mỗi giá trị ấy được viết thẳng vào từng component, ví dụ #1F8A4C ở nút, #1F8A4C ở đường viền ô nhập, #1E8B4D ở huy hiệu vì ai đó chọn bằng mắt, thì khi đổi màu thương hiệu, ta lại quay về bài toán 23 chỗ của bài 1.
Design token là các quyết định thiết kế được đặt tên: thay vì viết mã màu, ta viết tên của nó. Token là ngôn ngữ chung giữa designer và kỹ sư. Designer nói "màu hành động chính", kỹ sư dùng color-action-primary, và cả hai biết chắc đó là cùng một thứ.
Ba lớp token
Đội thường chia token thành ba lớp, mỗi lớp trả lời một câu hỏi khác:
| Lớp | Trả lời câu hỏi | Ví dụ ở Giỏ Xanh |
|---|---|---|
| Token gốc | Ta có những giá trị nào? | green-700 = #15703D, green-600 = #1F8A4C, space-4 = 16px |
| Token ngữ nghĩa | Giá trị này dùng để làm gì? | color-action-primary = green-700, color-text-muted = grey-600 |
| Token component | Component này dùng gì cho phần nào? | button-primary-bg = color-action-primary |
color-action-primary trỏ sang giá trị mới. Mọi nút, liên kết, đường viền đang dùng token ấy tự đổi theo. Đổi màu không còn là dự án ba sprint, mà là một thay đổi có thể review trong một buổi chiều.Những nhóm token cần có trước
Không cần token cho mọi thứ ngay từ đầu. Bốn nhóm sau giải quyết phần lớn sự lệch ở Giỏ Xanh:
| Nhóm | Trước khi có token | Sau khi có token |
|---|---|---|
| Màu | 17 mã xanh lá khác nhau | 5 bậc xanh (green-300 đến green-700), mỗi bậc có tên ngữ nghĩa |
| Khoảng cách | 9 giá trị lẻ: 5, 6, 10, 12, 14, 15, 18, 20, 30 | 7 bậc theo bội số 4: 4, 8, 12, 16, 24, 32, 48 |
| Chữ | 11 cỡ chữ | 6 cỡ: 12, 14, 16, 20, 24, 32, mỗi cỡ có tên vai trò |
| Bo góc và đổ bóng | Mỗi thẻ một kiểu | 3 bậc bo góc, 2 bậc đổ bóng |
Đặt tên token sao cho sống lâu
Tên token sẽ xuất hiện ở hàng trăm chỗ, nên đặt sai thì sửa rất đắt. Ba nguyên tắc Giỏ Xanh rút ra:
- Tên ngữ nghĩa mô tả vai trò, không mô tả hình dạng.
color-action-primarysống được qua lần đổi màu;color-green-buttonthì không, vì mai kia nút chính có thể không còn xanh. - Cấu trúc tên nhất quán. Nhóm, rồi vai trò, rồi biến thể:
color-text-default,color-text-muted,color-text-inverse. Người mới đoán được tên mà không cần tra. - Ít token hơn là tốt hơn. Mỗi token mới là một lựa chọn mới cho người dùng thư viện. Nếu hai token luôn trỏ cùng một giá trị và dùng cho cùng một vai trò, gộp lại.
Token và chế độ hiển thị
Token ngữ nghĩa còn mở ra một lợi ích mà nhiều PM không thấy ngay: chế độ tối, thương hiệu phụ, hay giao diện dịp lễ chỉ là một bộ giá trị khác cho cùng tên token. Giỏ Xanh muốn làm giao diện Tết cho mục quà biếu. Nếu component dùng token ngữ nghĩa, đội chỉ cần một bộ giá trị mới cho vài token màu và bật nó trong mục đó. Nếu component viết thẳng mã màu, đó là một bản sao của cả mục.
| Token ngữ nghĩa | Giá trị thường | Giá trị chế độ tối |
|---|---|---|
color-surface-default | Trắng | Xám rất đậm |
color-text-default | Xám rất đậm | Trắng ngà |
color-action-primary | green-700 | green-300 |
Token là thoả thuận, không phải file cấu hình
Một bộ token chỉ có giá trị khi cả designer và kỹ sư dùng nó. Lỗi thường gặp: designer có bảng màu trong công cụ thiết kế, kỹ sư có file biến trong code, hai bên được tạo riêng và lệch dần. Bài 5 sẽ nói cách giữ một nguồn sự thật. Ở bài này, điều cần nhớ là:
- Token được định nghĩa ở một chỗ và xuất ra cho cả công cụ thiết kế lẫn code.
- Thêm hay đổi token đi qua review như thay đổi code, vì nó ảnh hưởng mọi nơi.
- Một giá trị viết thẳng (không qua token) trong code mới là thứ cần hỏi lý do khi review.
PM nên hỏi gì
PM không cần thuộc tên token. Nhưng ba câu hỏi sau giúp PM biết đội đang ở đâu:
- Nếu ngày mai đổi màu thương hiệu, phải sửa ở bao nhiêu chỗ?
- Trong một màn hình mới, có bao nhiêu giá trị màu và khoảng cách không đi qua token?
- Designer và kỹ sư có dùng cùng một danh sách token, hay mỗi bên một bản?
Làm ngay
Lấy ba màn hình bạn đã chụp ở bài 1. Liệt kê mọi mã màu và mọi khoảng cách bạn đo được (công cụ kiểm tra phần tử của trình duyệt hoặc chế độ xem code của công cụ thiết kế giúp việc này nhanh). Nhóm chúng lại, đề xuất một thang khoảng cách và một bảng màu ngữ nghĩa không quá 12 tên. Đem đề xuất cho một designer và một kỹ sư xem, và hỏi: tên nào khiến họ phải hỏi lại nghĩa?