UI/UX

Atomic design là gì?

atomic designthiế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.

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.

Ả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

Thuật ngữ liên quan