Design system là gì? Gồm những gì và khi nào doanh nghiệp cần
Cananest Studio · · 3 min read
Design system là bộ quy chuẩn, thành phần tái sử dụng và tài liệu giúp sản phẩm số nhất quán. Gồm những gì, ví dụ nổi tiếng, khi nào doanh nghiệp cần.
Design system (hệ thống thiết kế) là bộ quy chuẩn, thành phần giao diện dùng lại được và tài liệu hướng dẫn, giúp mọi màn hình của website hay ứng dụng trông và hoạt động nhất quán. Nó là "nguồn sự thật chung" để designer và lập trình viên cùng dùng thay vì mỗi người tự làm một kiểu nút, một kiểu màu.
Design system có ích nhất khi sản phẩm có nhiều màn hình, nhiều người cùng làm hoặc cập nhật liên tục. Với một website nhỏ, một bộ thành phần cơ bản là đủ.
Bài này giải thích design system gồm những gì, ví dụ nổi tiếng và cách bắt đầu ở quy mô nhỏ.
1. Design system là gì?
Theo Wikipedia, design system là một khung tổ chức gồm các tiêu chuẩn, thành phần tái sử dụng và tài liệu, giúp các sản phẩm số nhất quán trong một tổ chức, đóng vai trò tài liệu tham chiếu chung cho designer và lập trình viên.
Nói đơn giản: thay vì vẽ lại nút "Đặt hàng" ở mỗi màn hình, đội làm một nút chuẩn một lần, kèm quy định dùng khi nào, rồi tái sử dụng ở mọi nơi.
2. Design system gồm những gì?
| Thành phần | Nội dung |
|---|---|
| Design token | Biến lưu các lựa chọn thiết kế: mã màu, cỡ chữ, khoảng cách, bo góc |
| Style guide | Quy định màu, font, khoảng cách, kích thước thành phần |
| Thư viện component | Nút, ô nhập, thẻ, menu, hộp thoại… thiết kế sẵn |
| Component đã lập trình | Bản code tương ứng để dev dùng lại |
| Pattern | Cách ghép component cho tình huống lặp lại: form đăng ký, trang danh sách |
| Tài liệu | Khi nào dùng, khi nào không, ví dụ đúng và sai |
3. Ví dụ design system nổi tiếng
Nhiều công ty công nghệ lớn công khai design system của họ, như Material Design của Google, Carbon Design System của IBM, Fluent Design System của Microsoft và Lightning Design System của Salesforce (theo Wikipedia). Đây là nguồn tham khảo tốt khi tự xây design system.
4. Design system khác brand guideline thế nào?
Brand guideline quy định nhận diện thương hiệu trên mọi ấn phẩm, cả in ấn lẫn số. Design system tập trung vào sản phẩm số và đi sâu tới từng thành phần giao diện, trạng thái (bình thường, rê chuột, bị vô hiệu) và code. Design system thường lấy màu, font từ brand guideline làm gốc.
5. Khi nào doanh nghiệp cần design system?
- Website hoặc ứng dụng có nhiều màn hình, nhiều tính năng.
- Nhiều designer, lập trình viên cùng làm hoặc thay người thường xuyên.
- Có nhiều sản phẩm số cần trông như cùng một thương hiệu.
- Thấy giao diện bắt đầu lệch nhau: mỗi trang một kiểu nút, một màu xanh.
6. Bắt đầu design system ở quy mô nhỏ
- Gom màu, font, khoảng cách đang dùng thành bộ token.
- Chuẩn hoá 5–10 component dùng nhiều nhất: nút, ô nhập, thẻ, menu, thông báo.
- Ghi trạng thái của từng component.
- Lưu trong một file Figma chung, có trang hướng dẫn ngắn.
- Mở rộng dần khi có màn hình mới.
Câu hỏi thường gặp
Website nhỏ có cần design system không?
Không cần một design system đầy đủ. Một bộ token màu, font và vài component chuẩn là đủ để giữ nhất quán và giúp sửa đổi sau này nhanh hơn.
Design token là gì?
Design token là biến có tên, lưu một lựa chọn thiết kế như màu chính, cỡ chữ tiêu đề, khoảng cách chuẩn. Khi đổi giá trị token, mọi nơi dùng token đó tự cập nhật, cả trong file thiết kế lẫn trong code.
Ai chịu trách nhiệm duy trì design system?
Thường là một designer hoặc một nhóm nhỏ gồm designer và lập trình viên. Quan trọng là có người được giao rõ, để component mới được thêm đúng cách thay vì mỗi người tự tạo.
Kết luận
Design system là bộ token, component và tài liệu giúp sản phẩm số nhất quán và làm nhanh hơn. Doanh nghiệp không cần bắt đầu bằng một hệ thống lớn: chuẩn hoá màu, font và vài component dùng nhiều nhất là bước đầu đủ dùng.
Cần xây design system cho website hoặc ứng dụng? Xem dịch vụ thiết kế UI UX của Cananest.
Tài liệu tham khảo:
