Khi nào UI Kit cần trở thành Design System?

UI Kit trả lời “có gì”; Design System trả lời “dùng khi nào”

Corevia sử dụng nền navy #0D2B5E, teal #00B2A9, IBM Plex Sans/Condensed/Mono và nhịp spacing 4px. Những giá trị này là foundation; chúng không giải thích vì sao một trạng thái bị chặn cần được ưu tiên trong Dispatch nhưng lại được viết như một kỳ vọng trên Customer App.

Tôi tách Global token (giá trị gốc) khỏi Alias token (vai trò dùng trong UI). Component sau đó nhận ý nghĩa từ Alias thay vì sao chép mã màu ở từng màn. Kết quả mong muốn là đổi theme hoặc sửa status ở nơi hợp lý và kiểm tra được tác động trên các surface; đó là nguyên tắc tổ chức, chưa phải số liệu tiết kiệm thời gian được đo.

Thư viện không có giá trị nếu màn UI không dùng nó

Trong quá trình rà soát Figma, các lỗi nhỏ lặp lại đã xuất hiện: màn có button hoặc status nhìn giống component nhưng chưa dùng instance; item chưa có Auto Layout; text chưa gán text style; icon chưa đi từ bộ MingCute và component dùng chung. Đặc biệt những bảng ListPageTemplate có thể trông nhất quán khi zoom nhỏ, nhưng thực chất dễ lệch khi nội dung và state thay đổi.

Cách xử lý không phải tạo thêm thật nhiều component. Tôi kiểm kê pattern lặp, xác định component/variant có vai trò thật, thay thành instance trong màn, gắn text style và icon nhất quán, rồi rà lại trạng thái dài/ngắn, empty, error, responsive. Component chỉ là một hợp đồng nếu đội dùng nó và hiểu khi nào được phép ngoại lệ.

Handoff là nơi logic gặp implementation

Developer cần biết không chỉ padding và màu, mà còn ai được sửa, dữ liệu nào phải có, trạng thái loading/empty/error, ngưỡng responsive, failure path và điều kiện để coi một screen đã xong. Tên component, token và instance làm việc xây dựng rõ ràng hơn; Design QA kiểm tra UI được build có giữ logic, không chỉ gần pixel.

Corevia là minh họa tốt: Operations nhìn exception, Fleet Manager nhìn readiness, Driver xác nhận milestone, Customer theo dõi booking. Một status lệch ý nghĩa giữa các surface là lỗi sản phẩm, ngay cả khi cả bốn badge có cùng teal.

• Foundation: typography, màu nền, spacing.
• Global → Alias: từ giá trị sang vai trò.
• Component: variants, states và quy tắc tái sử dụng.
• Màn thật + handoff: IA, logic vai trò, failure path và Design QA.

Thời điểm chuyển đổi

Nếu chỉ có một màn concept, UI Kit gọn có thể đủ. Khi cùng một pattern xuất hiện ở nhiều surface, nhiều người cùng thiết kế/build, sửa một state kéo theo các màn khác, hoặc handoff bắt đầu xuất hiện ngoại lệ không được ghi lại, đã đến lúc thiết lập Design System có governance tối thiểu.

Đây là lời khuyên dựa trên kinh nghiệm xây và rà UI của tôi, không phải khẳng định mọi sản phẩm đều cần một thư viện đồ sộ. Bắt đầu từ component được dùng thật, rồi mở rộng khi có nhu cầu; một hệ thống không được bảo trì sẽ nhanh chóng biến thành… một bảo tàng button.