Ghi chú về việc dựng design system một mình

Bắt đầu bằng những thứ lặp lại

Một design system nhỏ có thể bắt đầu từ những quyết định đã xuất hiện nhiều lần: màu chữ, khoảng cách, góc bo và cách một nút phản hồi khi được bấm. Tôi ghi lại chúng trước khi xây một thư viện component lớn.

Mục tiêu ban đầu là giảm số quyết định phải đưa ra trên mỗi màn hình. Một bộ quy tắc ít nhưng được sử dụng nhất quán có ích hơn nhiều biến thể chưa có người dùng.

Đặt tên theo ý nghĩa

Token nên mô tả mục đích sử dụng. Tên như --text-muted giúp người đọc hiểu vai trò của màu và cho phép thay đổi giá trị giữa các giao diện sáng, tối.

:root {
  --text-primary: #17201b;
  --text-muted: #59665f;
  --space-control: 0.75rem;
}

Các giá trị này chỉ là ví dụ. Trước khi dùng trong sản phẩm, tôi kiểm tra độ tương phản trên nền thực tế và xem giao diện ở nhiều kích thước màn hình.

Viết tài liệu khi sử dụng

Mỗi component cần ví dụ thể hiện trạng thái thường gặp, cùng giới hạn của nó. Với nút bấm, tôi bắt đầu bằng trạng thái mặc định, đang xử lý, vô hiệu hoá và focus bằng bàn phím.

• Ghi rõ khi nào nên dùng component.
• Chỉ thêm biến thể khi có nhu cầu từ màn hình thật.
• Kiểm tra nhãn, thứ tự focus và kích thước vùng bấm.
• Ghi lại thay đổi làm ảnh hưởng nơi đang sử dụng.

Tài liệu hữu ích trả lời được câu hỏi đang xuất hiện khi xây một màn hình.

Khi làm một mình, tôi dành thời gian cải thiện các phần được dùng thường xuyên nhất. Nhờ vậy, thư viện phát triển cùng sản phẩm và chi phí bảo trì vẫn nằm trong khả năng của mình.