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

Component library là gì?

Còn gọi: thư viện thành phần

Component library là tập hợp các thành phần giao diện dựng sẵn và dùng lại được, như nút, ô nhập, card, modal, được quản lý tập trung trong file thiết kế hoặc trong code.

Component library (thư viện thành phần)

Hiểu kỹ hơn

Thư viện thành phần là phần cụ thể nhất của một design system. Ở phía thiết kế, đó là file Figma chứa các main component có variant và thuộc tính, được xuất bản để các file khác bật dùng trong Assets › Libraries; khi thư viện cập nhật, người dùng nhận thông báo và chọn chấp nhận bản mới. Ở phía code, đó là các component React, Vue hoặc SwiftUI tương ứng, thường được tài liệu hoá bằng công cụ như Storybook. Hai phía nên dùng cùng tên component và tên thuộc tính để bàn giao dễ hơn. Ví dụ: thư viện Material 3 Design Kit trên Figma Community có sẵn component tương ứng với thư viện code của Google. Lỗi thường gặp là để mỗi người thiết kế tự tách instance (detach) và chỉnh tay, dần dần trong file có năm kiểu nút gần giống nhau, hoặc đặt tên component trong Figma khác hẳn tên trong code khiến lập trình viên không tìm ra.