[2] Quy trình thật sự để tạo ra một Design System

Trước khi bắt đầu Design System, hãy hiểu “quy trình” của nó

Có thể bài viết này sẽ không có nhiều người đọc. Vì bây giờ chỉ cần hỏi AI là có thể ra đủ thứ từ màu sắc, font chữ cho tới cả UI hoàn chỉnh. Có khi chỉ cần vài câu lệnh là đã có một giao diện nhìn “cũng ổn”.

Nhưng mình vẫn nghĩ, nếu không hiểu bản chất, thì những thứ đó chỉ là… copy. Và sớm muộn gì cũng sẽ gặp giới hạn. Thiết kế (và cả Design System) không phải là chuyện “làm cho đẹp”, mà là hiểu cách mọi thứ được tạo ra từ bên trong.

Design System không bắt đầu từ UI

Nhiều người (trong đó có mình trước đây) nghĩ rằng:

Làm Design System = tạo button, input, card…

Nhưng thực tế không phải vậy, design System không bắt đầu từ UI. Nó bắt đầu từ logic và quy tắc (rule).

❗ Trước khi làm system, cần hiểu sản phẩm làm gì

Trước khi liệt kê ra button hay input, có một câu hỏi quan trọng:

Sản phẩm của mình dùng để làm gì?

Ví dụ:

• Một landing page chỉ cần hiển thị thông tin và kêu gọi hành động
• Một dashboard cần hiển thị dữ liệu, bảng biểu, nhiều tương tác
• Một form nhập liệu cần input, validation, thông báo lỗi

Từ chức năng của sản phẩm, chúng ta mới xác định được:

• cần những thành phần giao diện nào
• và không cần những thứ không liên quan

Nói đơn giản:

Component không được tạo ra trước, mà được sinh ra từ nhu cầu của sản phẩm

Quy trình đúng để tạo Design System

Nếu phải tóm gọn lại, toàn bộ quá trình sẽ đi theo thứ tự này:

1. Xác định hệ thống có những gì (Structure)
2. Đặt quy tắc sử dụng (Rule)
3. Tạo nền tảng (Foundation)
4. Xây dựng thành phần cơ bản (Base Component)
5. Ghép thành component hoàn chỉnh
6. Áp dụng vào UI / Page

Nghe có vẻ nhiều bước, nhưng thực chất rất logic.

1. Xác định hệ thống có những gì

Trước tiên, cần trả lời:

Sản phẩm của mình sẽ có những “vai trò” nào?

Ví dụ:

• Màu chính (Primary)
• Màu lỗi (Error)
• Màu cảnh báo (Warning)
• Màu thành công (Success)
• Màu trung tính (Neutral)

Và các thành phần:

• Button
• Input
• Card
• Alert

Đây là bước định nghĩa “hệ thống của mình tồn tại những gì”.

2. Đặt quy tắc (Rule)

Đây là bước quan trọng nhất. Ví dụ:

• Button luôn dùng màu đậm (500–700)
• Background luôn dùng màu nhạt (50–100)
• Text luôn dùng màu đậm (700–900)
• Không dùng màu trực tiếp (#hex), chỉ dùng theo hệ thống

Nói đơn giản:

Không phải chọn màu — mà là đặt luật dùng màu

3. Foundation (Nền tảng)

Sau khi có rule, mới bắt đầu tạo nền tảng:

• Color (màu sắc)
• Typography (font chữ)
• Spacing (khoảng cách)
• Shadow (bóng đổ)
• Radius (bo góc)

Đây là nguyên liệu gốc, giống như LEGO chưa lắp.

4. Base Component (thành phần cơ bản)

Từ foundation → tạo ra những thứ nhỏ nhất:

• Button
• Input
• Checkbox
• Tag
• Icon

Mỗi cái đều phải tuân theo rule đã đặt.

5. Component (ghép lại)

Tiếp theo, ghép các phần nhỏ thành phần lớn:

• Card
• Alert
• Modal (popup)
• Form
• Table

Đây là những thứ user bắt đầu nhìn thấy rõ.

6. Page / UI

Cuối cùng, ghép component lại thành giao diện hoàn chỉnh:

• Trang login
• Dashboard
• Trang chi tiết

Hiểu đơn giản như thế này

• Foundation = nguyên liệu
• Base component = viên gạch
• Component = khối nhà
• Page = căn nhà hoàn chỉnh

Điều quan trọng nhất

Design System không phải là:

“làm ra bộ UI đẹp”

Mà là:

“tạo ra một hệ thống có thể lặp lại và mở rộng”

Một sai lầm rất phổ biến

Nhiều người làm theo cách:

• chọn màu trước
• thấy chưa đẹp thì chỉnh
• mỗi chỗ một kiểu

Kết quả là:

→ không có system

→ không scale được

Cách đúng

• Đặt rule trước
• Sau đó mới tạo màu (scale)
• Cuối cùng áp vào UI

Nếu UI chưa đẹp:

→ sửa lại hệ thống

→ không sửa từng chỗ

Kết

Có thể AI sẽ làm được rất nhiều thứ nhanh hơn chúng ta. Nhưng hiểu được cách một hệ thống được tạo ra từ rule cho tới UI là thứ không thể “copy” được. Ở bài tiếp theo, mình sẽ bắt đầu từ phần đầu tiên của foundation: màu sắc và cách tạo ra một hệ màu có thể dùng được trong thực tế.