Design System là gì? Cách xây bộ quy chuẩn thiết kế cho đồ án

Bạn làm đồ án nhóm bốn người. Mỗi người phụ trách vài màn hình. Đến khi ghép lại, sản phẩm có bảy sắc thái xanh khác nhau, bốn kiểu nút bấm, và khoảng cách thì mỗi màn hình một kiểu. Cả nhóm mất trọn một tuần chỉ để "làm cho giống nhau".

Design System là lời giải cho đúng vấn đề đó: thay vì ra quyết định thiết kế lại từ đầu ở mỗi màn hình, bạn định nghĩa một lần rồi tái sử dụng.

Phân biệt Style Guide, UI Kit và Design System

Với đồ án sinh viên, bạn không cần một design system đầy đủ như của công ty lớn. Một style guide tốt cộng vài component chính đã đủ tạo khác biệt rõ rệt — và hội đồng chấm sẽ nhận ra ngay.

Ba tầng của một hệ thống thiết kế

Tầng 1: Design Token — các quyết định nguyên tử

Token là những giá trị nhỏ nhất được đặt tên: một mã màu, một cỡ chữ, một mức khoảng cách, một độ bo góc. Mọi thứ khác được xây từ chúng.

Quy tắc đặt tên quan trọng nhất: đặt theo vai trò, không theo giá trị.

Bộ token tối thiểu cho một đồ án:

• Màu: màu chính (5 sắc độ), thang trung tính (6 cấp), 3 màu trạng thái (thành công, cảnh báo, lỗi).
• Chữ: 5 cấp cỡ chữ, 2–3 độ dày.
• Khoảng cách: 4, 8, 16, 24, 32, 48, 64.
• Bo góc: nhỏ, vừa, lớn, tròn hoàn toàn.
• Đổ bóng: 2–3 cấp độ cao.

Chỉ cần khai báo bấy nhiêu, mọi màn hình sau đó sẽ tự động nhất quán.

Tầng 2: Component — các khối lắp ghép

Component là những phần tử giao diện được dựng từ token và có thể tái sử dụng: nút bấm, ô nhập, thẻ nội dung, thanh điều hướng, hộp thoại, thông báo.

Thứ tự nên làm cho đồ án:

1. Nút bấm (chính, phụ, viền, vô hiệu hóa)
2. Ô nhập và nhãn (kèm trạng thái lỗi)
3. Thẻ nội dung
4. Thanh điều hướng và header
5. Thông báo / cảnh báo
6. Hộp thoại

Mỗi component cần đủ trạng thái: mặc định, di chuột qua, được chọn, vô hiệu hóa, đang tải, lỗi. Đây là phần mà sinh viên hay bỏ sót nhất, và cũng là phần khiến lập trình viên phải tự đoán khi dựng sản phẩm.

Tầng 3: Quy tắc và tài liệu

Không chỉ "có gì" mà còn "dùng khi nào":

• Khi nào dùng nút chính, khi nào dùng nút viền? (Một màn hình chỉ có một nút chính.)
• Thông báo lỗi hiển thị ở đâu? (Ngay dưới ô gây lỗi.)
• Khi nào dùng hộp thoại, khi nào dùng trang riêng?
• Cách viết câu chữ: xưng hô thế nào, có dùng dấu chấm than không.

Phần này chỉ cần một trang tài liệu, nhưng nó là thứ giúp cả nhóm ra quyết định giống nhau mà không cần họp.

Sáu bước xây hệ thống thiết kế nhỏ trong Figma

Bước 1 — Kiểm kê hiện trạng. Nếu đã có sẵn màn hình, chụp lại tất cả nút bấm và màu đang dùng. Bạn sẽ giật mình vì số lượng biến thể vô tình tạo ra.

Bước 2 — Chốt token màu và chữ. Tạo Variables (hoặc Styles) trong Figma cho từng token, đặt tên theo vai trò.

Bước 3 — Dựng component cốt lõi. Bắt đầu từ nút bấm. Dùng Auto Layout để component tự giãn theo nội dung, và Variants để gom các trạng thái vào một component duy nhất.

Bước 4 — Áp dụng lại vào các màn hình. Thay thế các phần tử rời rạc bằng component. Đây là lúc bạn phát hiện những chỗ trước kia làm không nhất quán.

Bước 5 — Viết một trang quy tắc. Ngắn thôi: mỗi component một dòng "dùng khi nào, không dùng khi nào".

Bước 6 — Kiểm tra tính dễ tiếp cận. Rà toàn bộ cặp màu chữ/nền theo ngưỡng tương phản 4.5:1, kiểm tra vùng chạm tối thiểu 44×44px. Xem bài về accessibility.

Toàn bộ quy trình này mất khoảng 6–10 giờ cho một đồ án cỡ vừa, và tiết kiệm nhiều hơn thế ở giai đoạn sau.

Học từ các hệ thống thiết kế công khai

Nhiều tổ chức lớn công bố design system của họ. Đọc chúng là cách học miễn phí và rất hiệu quả — hãy tập trung vào phần lý do đằng sau quyết định, không chỉ copy giao diện:

Lưu ý khi tham khảo: đừng bê nguyên Material Design vào đồ án rồi gọi đó là thiết kế của mình. Hãy dùng nó làm nền, rồi tùy biến token màu và chữ theo thương hiệu bạn xây.

Sai lầm thường gặp

1. Xây quá lớn ngay từ đầu. 40 component cho một đồ án 8 màn hình là lãng phí. Chỉ xây cái bạn thực sự dùng.
2. Đặt tên theo màu sắc thay vì vai trò. Đến khi đổi màu thương hiệu, cả hệ thống trở nên khó hiểu.
3. Không cập nhật. Design system bị bỏ mặc sau hai tuần còn tệ hơn không có, vì mọi người sẽ tin vào tài liệu đã lỗi thời.
4. Chỉ có ảnh, không có quy tắc. Người khác nhìn vào không biết dùng cái nào khi nào.
5. Bỏ qua các trạng thái. Component không có trạng thái lỗi và trạng thái rỗng là component chưa hoàn thành.

Câu hỏi thường gặp

Đồ án nhỏ có cần design system không?

Cần ở mức tối thiểu: một bảng màu, một thang cỡ chữ, một hệ khoảng cách. Ba thứ này mất khoảng một giờ để thiết lập và tiết kiệm cho bạn nhiều giờ sửa vặt về sau.

Design token khác gì với style thông thường?

Style là cách Figma lưu một giá trị dùng lại. Token là khái niệm rộng hơn: một giá trị được đặt tên theo vai trò và có thể dùng chung giữa thiết kế và code. Trong Figma hiện nay, Variables là công cụ gần với khái niệm token nhất, vì chúng hỗ trợ nhiều chế độ như sáng/tối.

Có nên dùng design system có sẵn thay vì tự xây?

Với đồ án gấp, hoàn toàn nên. Lấy một bộ có sẵn làm nền, chỉ tùy biến token màu và chữ. Điều này còn phản ánh đúng thực tế đi làm — rất ít người xây hệ thống từ con số 0.

Ai chịu trách nhiệm duy trì trong nhóm sinh viên?

Nên cử một người làm "người giữ hệ thống": mọi thay đổi về token và component đều qua người đó. Không cần quy trình phức tạp, chỉ cần một người chịu trách nhiệm để tránh mỗi người sửa một kiểu.

Design system có làm mất tính sáng tạo không?

Ngược lại. Khi không phải quyết định lại cỡ chữ và màu sắc ở từng màn hình, bạn còn thời gian cho những quyết định thực sự quan trọng: cấu trúc thông tin, luồng người dùng, cách giải quyết vấn đề.

Bao nhiêu component là đủ cho một đồ án?

Thường 8–12 component là đủ cho sản phẩm 10–15 màn hình. Nếu bạn thấy mình đang tạo component chỉ dùng đúng một lần, đó là dấu hiệu nên dừng lại.

Nguồn tham khảo

• Material Design 3
• IBM Carbon Design System
• Figma Learn – Tokens, variables, and styles
• Nielsen Norman Group – Design Systems

Kết luận

Design system không phải thứ chỉ dành cho công ty lớn. Ở quy mô đồ án, nó đơn giản là: quyết định một lần về màu, chữ và khoảng cách, rồi tuân thủ.

Riêng việc đó đã giải quyết được vấn đề phổ biến nhất của bài tập nhóm — mỗi người một kiểu — và khiến sản phẩm cuối cùng trông chuyên nghiệp hơn hẳn.

Bài viết liên quan

• Lý thuyết màu sắc trong thiết kế
• Bố cục và hệ lưới trong thiết kế
• Học Figma cho người mới bắt đầu
• Thiết kế dễ tiếp cận và tiêu chuẩn WCAG