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

Atomic design là gì?

Còn gọi: thiết kế nguyên tử

Atomic design là phương pháp xây dựng hệ thống giao diện do Brad Frost đề xuất, chia thành năm cấp: nguyên tử (nút, nhãn), phân tử (ô tìm kiếm), sinh vật (header), template và trang.

Ảnh minh hoạ Atomic design: năm khối từ nhỏ đến lớn: nguyên tử, phân tử, sinh vật, template, trang, với ví dụ giao diện cho mỗi cấp
Năm khối từ nhỏ đến lớn: nguyên tử, phân tử, sinh vật, template, trang, với ví dụ giao diện cho mỗi cấp

Hiểu kỹ hơn

Cách nghĩ này giúp đội xây giao diện từ các mảnh nhỏ tái sử dụng, thay vì thiết kế từng trang riêng lẻ. Khi sửa một nguyên tử (ví dụ kiểu nút), mọi nơi dùng nó cập nhật theo. Atomic design là nền tảng tư duy cho component library và design system trong Figma; không nhất thiết phải dùng đúng tên năm cấp, quan trọng là tinh thần phân cấp và tái sử dụng.