Một công ty khởi nghiệp năm người quyết định “làm design system”. Hai tuần sau họ có một tệp Figma với 38 biến thể nút, 12 sắc xanh và một trang bìa rất đẹp. Ba tháng sau, không ai mở tệp đó nữa. Lập trình viên vẫn viết mã màu trực tiếp vào từng màn, nhà thiết kế mới vào vẫn tự tạo nút riêng.
Hệ thống thiết kế thất bại ít khi vì thiếu thành phần. Nó thất bại vì làm sai thứ tự và không ai giữ nó sống.
Hệ thống thiết kế gồm những lớp nào
Có thể hình dung bốn lớp, lớp dưới là nền cho lớp trên:
- Token: các giá trị gốc được đặt tên, như màu, cỡ chữ, khoảng cách, bo góc, đổ bóng.
- Thành phần: nút, ô nhập, thẻ, hộp thoại, được dựng từ token.
- Mẫu: tổ hợp thành phần giải quyết một vấn đề lặp lại, như biểu mẫu đăng ký, trang danh sách có lọc.
- Hướng dẫn: khi nào dùng cái gì, giọng văn, nguyên tắc tiếp cận.
Nhóm nhỏ nên làm chắc lớp 1 và một phần lớp 2, ghi lớp 4 thật ngắn. Lớp 3 để tự hình thành khi sản phẩm lớn lên.
Bước 0: kiểm kê giao diện đang có
Trước khi thiết kế gì mới, chụp màn hình mọi màn đang chạy, cắt ra và dán theo loại lên một bảng lớn: tất cả nút một chỗ, tất cả ô nhập một chỗ, tất cả sắc màu một chỗ.
Kết quả thường gây sốc nhẹ: 9 kiểu nút chính, 17 mã màu xám khác nhau, 6 kiểu bo góc. Bảng kiểm kê này có hai tác dụng. Nó cho bạn danh sách thật những gì cần chuẩn hoá. Và nó là bằng chứng để thuyết phục cả nhóm bỏ thời gian cho việc này.
Token: đặt tên theo vai trò, không theo giá trị
Token nên có hai tầng:
- Tầng gốc (primitive): tên theo giá trị. Ví dụ blue-500, gray-100, space-16.
- Tầng ngữ nghĩa (semantic): tên theo vai trò, trỏ về tầng gốc. Ví dụ color-action-primary trỏ tới blue-500, color-text-muted trỏ tới gray-600, color-border-danger trỏ tới red-500.
Thành phần chỉ được dùng token ngữ nghĩa. Khi thương hiệu đổi màu chính từ xanh sang tím, bạn đổi một chỗ ở tầng ngữ nghĩa. Khi làm chế độ tối, bạn cho cùng tên ngữ nghĩa trỏ tới giá trị gốc khác. Nếu nút dùng thẳng blue-500, mỗi thay đổi là một lần đi sửa hàng trăm chỗ.
| Nhóm token | Số lượng hợp lý cho nhóm nhỏ | Ghi chú |
|---|---|---|
| Màu ngữ nghĩa | 15–25 | Nền, chữ, viền, hành động, trạng thái thành công/cảnh báo/lỗi |
| Cỡ chữ | 6–8 bậc | Kèm chiều cao dòng và độ đậm, gói thành kiểu chữ |
| Khoảng cách | 7–9 bậc | Thang 4, 8, 16, 24, 32, 48, 64 |
| Bo góc | 3–4 | Không bo, nhỏ, vừa, tròn hẳn |
| Đổ bóng | 2–3 | Tương ứng độ nổi của thẻ, menu, hộp thoại |
Thành phần lõi: mười cái trước
Đếm trong bảng kiểm kê, bạn sẽ thấy khoảng 10 thành phần chiếm phần lớn giao diện: nút, ô nhập chữ, ô chọn, hộp kiểm, nút gạt, thẻ, hộp thoại, thông báo nổi, thanh điều hướng, biểu tượng. Làm chắc mười cái đó trước.
Mỗi thành phần cần đủ trạng thái, không chỉ đủ kiểu dáng. Một nút tối thiểu phải có: bình thường, di chuột (trên máy tính), đang nhấn, tập trung bàn phím, vô hiệu, đang tải. Thiếu trạng thái tập trung là lỗi phổ biến nhất, và nó làm người dùng bàn phím không biết mình đang ở đâu.
Biến thể: ít hơn bạn nghĩ
38 biến thể nút đến từ việc nhân mọi thuộc tính với nhau: 4 kiểu × 3 cỡ × 3 trạng thái biểu tượng. Hỏi lại từng trục:
- Có thật cần 4 kiểu? Thường chỉ cần chính, phụ, và dạng chữ. Kiểu “nguy hiểm” có thể là màu của kiểu chính.
- Có thật cần 3 cỡ? Nhiều sản phẩm di động chỉ cần 2.
- Biểu tượng trái/phải/không có: dùng thuộc tính bật tắt thay vì biến thể riêng.
Trong Figma, dùng thuộc tính thành phần (component properties) cho chữ, biểu tượng, bật tắt; chỉ dùng biến thể cho khác biệt thật về hình dạng.
Đồng bộ với mã: nơi hệ thống sống hay chết
Một hệ thống thiết kế chỉ tồn tại trong Figma là một tài liệu tham khảo, không phải hệ thống. Tối thiểu cần:
- Token xuất ra một tệp mà mã dùng được (biến CSS, tệp JSON cho ứng dụng).
- Tên token trong Figma và trong mã giống hệt nhau.
- Mỗi thành phần trong Figma có một thành phần tương ứng trong mã, cùng tên, cùng thuộc tính.
Nhóm nhỏ không cần công cụ phức tạp. Một người thiết kế và một người lập trình ngồi cùng nhau nửa ngày để đặt tên chung đã giải quyết được phần lớn vấn đề.
Quản trị: ai được thêm gì
Quy tắc đơn giản đủ dùng cho nhóm dưới mười người:
- Ai cũng được đề xuất thành phần mới, nhưng phải chỉ ra ít nhất hai chỗ trong sản phẩm cần nó.
- Một người phụ trách duyệt và cập nhật thư viện.
- Mỗi thay đổi ghi một dòng nhật ký: ngày, thay đổi gì, vì sao.
- Thành phần ngừng dùng thì đánh dấu, không xoá ngay.
Kế hoạch bốn tuần cho nhóm nhỏ
- Tuần 1: kiểm kê, chọn bảng màu và thang chữ, đặt token hai tầng.
- Tuần 2: nút, ô nhập, ô chọn, hộp kiểm với đủ trạng thái; lập trình dựng song song.
- Tuần 3: thẻ, hộp thoại, thông báo, điều hướng. Thay dần vào hai màn quan trọng nhất.
- Tuần 4: viết một trang hướng dẫn ngắn, đặt quy trình đề xuất – duyệt, đo xem còn bao nhiêu mã màu viết thẳng.
Việc nên làm tiếp theo: làm ngay bước kiểm kê cho sản phẩm bạn đang làm, chỉ riêng màu và nút. Một buổi chiều là xong, và con số bạn đếm được sẽ cho biết hệ thống thiết kế là việc cấp bách hay còn chờ được.
Câu hỏi thường gặp
Design system là gì?
Là bộ quy tắc và thành phần dùng chung để thiết kế và lập trình giao diện nhất quán, gồm token, thành phần, mẫu và hướng dẫn sử dụng. Nó khác bộ UI kit ở chỗ được đồng bộ với mã và có người duy trì.
Design token là gì?
Là các giá trị gốc được đặt tên như màu, cỡ chữ, khoảng cách, bo góc. Thành phần dùng token thay vì giá trị cứng, nên đổi một token là cả hệ thống cập nhật theo.
Nhóm nhỏ có cần design system không?
Cần ở mức tối thiểu: token và khoảng mười thành phần lõi. Không cần tài liệu đồ sộ, nhưng cần đồng bộ tên với mã và có một người giữ thư viện.
Token ngữ nghĩa khác token gốc thế nào?
Token gốc đặt tên theo giá trị như blue-500. Token ngữ nghĩa đặt tên theo vai trò như color-action-primary và trỏ về token gốc, giúp đổi thương hiệu hay làm chế độ tối dễ dàng.
Vì sao design system hay bị bỏ dở?
Thường vì làm quá nhiều biến thể trước khi có nhu cầu thật, không đồng bộ với mã, và không có ai chịu trách nhiệm cập nhật. Bắt đầu nhỏ và gắn với mã giúp tránh điều này.
