Atomic Design: xây design system từ nguyên tử đến trang

Atomic Design là phương pháp do Brad Frost đề xuất để xây hệ thống giao diện theo từng tầng, mượn ẩn dụ từ hóa học.

Năm tầng

Atoms là phần tử nhỏ nhất như nút, nhãn, ô nhập. Molecules ghép các atom thành nhóm có chức năng, ví dụ ô tìm kiếm gồm nhãn, input và nút. Organisms là cụm phức tạp hơn như header. Templates sắp xếp organisms thành bố cục trang, còn Pages là template được đổ nội dung thật để kiểm tra trong thực tế.

Giá trị mang lại

Cách nghĩ này giúp tái sử dụng component, giữ nhất quán và cho phép đội nhóm thảo luận ở đúng cấp độ chi tiết. Nó là một mô hình tư duy chứ không phải quy trình cứng nhắc, nên có thể điều chỉnh theo sản phẩm.