Design System là gì và vì sao mình từng ghét nó

Hồi mới làm, mình được giao thiết kế một loạt màn hình cho web/app bất động sản. Lúc đó, mình cứ nghĩ "Đẹp là được chứ gì. Vẽ mấy cái nút này có gì khó khăn đâu."

Thế là mình cặm cụi làm một file Figma to đùng, component chi chít, có điều mỗi cái lại... hơi khác một chút.
Cái nút ở màn hình A bo góc 8px. Sang cái form B tự dưng bo 12px. Text field bên này có label nằm trong, bên kia label nằm trên…

Mình thấy cũng… không sao? Miễn là nhìn vẫn ổn.

Rồi team dev vào. Họ hỏi:

“Sao cái button này với cái hôm qua mày thiết kế khác gì nhau vậy em?”
“Padding bao nhiêu đấy?”
“Font size em để 14px được không anh, vì cùng một cấp body text mà chỗ 14px chỗ 16px nè?”

Lúc đó mình chỉ muốn chui xuống gầm bàn.

Lần đầu nghe cụm từ “Design System”, mình chả quan tâm lắm.

Vì trong đầu mình lúc đó, “design system” nghe như kiểu công cụ của những công ty big tech, có cả team chuyên lo system, component, token, blah blah blah… cơ.

Còn đây đang làm outsource, vừa vẽ UI vừa chạy khắp nơi nhờ BrSE test người dùng ở thị trường Nhật hộ cho thì system gì ở đây?

Nhưng rồi đến khi phải chỉnh sửa lần thứ 5 chỉ để thống nhất khoảng cách giữa icon và chữ, mình nhận ra không có design system, mình đang tự làm khổ chính mình và làm khổ cả mấy anh em dev nữa.

Vậy design system là gì?

Nói một cách dễ hiểu, design system không phải là một file UI Kit. Nó là ngôn ngữ thị giác có hệ thống, nơi mọi thứ đều có lý do để tồn tại. Nút bấm to hay nhỏ – vì mục tiêu nào? Màu success là xanh lá kiểu gì để dễ nhìn hơn, hay để người dùng không bị lẫn với warning? Khoảng cách giữa các thành phần là 8px vì lưới chuẩn hay vì dễ canh theo dev?

Design system là khi thiết kế không chỉ đúng, mà còn đồng bộ, dễ dùng lại, và dễ phát triển tiếp. Là khi dev không cần ping bạn hỏi “nút này mấy px nữa vậy”, và bạn cũng không cần đắn đo mỗi lần làm màn hình mới.

Và rồi mình không thể sống thiếu design system.

Mình bắt đầu thấy hứng thú sau khi ngồi cùng dev để viết ra bộ button component đầu tiên. Khi prototype nhanh chỉ bằng cách kéo thả component đã có sẵn, mình cảm giác như có một “đội quân tí hon” giúp mình mỗi lần bắt tay vào việc.

Quan trọng nhất là mình không phải vẽ lại cái nút “Submit” lần thứ 17, mình có nhiều thời gian hơn để lo những thứ... thực sự quan trọng như user flow có hợp lý không, text có rõ không, người dùng có hiểu thao tác không?

Nếu bạn cũng đang nghĩ “chắc công ty mình chưa đủ lớn để cần system đâu”, thì thử nghĩ xem bạn có đang thiết kế cái gì đó... nhiều hơn một lần không nha. Nếu có thì…

Chào mừng bạn tới thế giới của những người từng rất ghét nhưng giờ rất cần design system.