Thư viện thuật ngữ / UI/UX

Tài liệu design system là gì?

Còn gọi: documentation

Tài liệu trong design system là phần hướng dẫn bằng chữ và ví dụ, giải thích mỗi component, token và pattern dùng để làm gì, khi nào nên và không nên dùng, cùng các quy tắc tiếp cận và hành vi.

Hiểu kỹ hơn

Một component chưa có tài liệu thì mỗi người sẽ dùng theo một cách. Trang tài liệu chuẩn cho một component thường gồm: mô tả ngắn, cấu tạo (anatomy) chú thích từng phần, các biến thể và trạng thái, hướng dẫn nên và không nên kèm hình minh hoạ, quy tắc nội dung chữ, yêu cầu tiếp cận như thứ tự focus và nhãn cho trình đọc màn hình, và liên kết tới code. Trong Figma, có thể ghi mô tả ngay trong phần Description của main component, thêm liên kết tài liệu, và dựng trang Docs trong file thư viện; phía code thường dùng Storybook hoặc trang web riêng như Zeroheight. Ví dụ: trang tài liệu nút của Material Design 3 giải thích khi nào dùng filled, tonal, outlined hay text button. Lỗi thường gặp là tài liệu chỉ liệt kê thuộc tính mà không nói lý do, hoặc nằm ở nơi không ai mở khi đang làm việc.