Atomic Design là gì trong thiết kế UX/UI?

Atomic Design là gì?

Atomic Design lần đầu được giới thiệu bởi Brad Frost, một nhà thiết kế web đến từ Pittsburgh, USA vào năm 2013. Mô hình này giúp đội ngũ thiết kế sản phẩm chuẩn hoá và đồng nhất được các thành phần trong file thiết kế, giúp đẩy nhanh quá trình làm việc.

Lấy cảm hứng từ Atomic (Nguyên tử), Brad Frost đã tạo nên một mô hình thông minh và logic, tối ưu cho việc thiết kế dựa trên sự kết hợp từ các thành phần từ nhỏ đến lớn như sau:

• Atom (Nguyên tử)
• Molecule (Phân tử)
• Organism (Thực thể)
• Template (Mẫu)
• Pages (Trang - mang tính trình bày thành quả với data thực tế)

Chúng ta sẽ tìm hiểu về từng thành phần ở các hình minh họa tiếp theo nhé.

ATOM

Atom (Nguyên tử) là thành phần nhỏ nhất, ví dụ như: Title, lable, icon, input, button fields, link, checkboxes…

Molecule

Molecule (Phân tử) là tổ hợp gồm nhiều Atom, tạo thành những đơn vị cơ bản và có tính năng rõ ràng ví dụ như một cụm Input nhập email (bao gồm tiêu đề, icon và input fields..),

Một Molecule có thể có nhiều biến thể (Là các component trong một Variant với Figma) nhằm mục đích sử dụng ở các vị trí khác nhau hoặc phục vụ cho Interaction (Hover, Pressing, After delay…)

Organism

Organism (Thực thể) được cấu tạo từ nhiều nguyên tử, phân tử, có chức năng tương tự nhau để tạo nên 1 thành phần hoàn chỉnh tương đối phức tạp như Header, Footer, Box tìm kiếm nâng cao, Box thông báo, Menu sidebar …

Templates

Templates (Mẫu): là kết hợp các organisms với nhau tạo thành các trang hoàn chỉnh. Các bạn có thể hiểu đây gần tương tự bước Wireframing trong quy trình 6 bước hoàn thiện bản thiết kế UI/UX.

Pages

Pages là các Template được fill data thực tế vào nhằm mục đích trình bày, mang đến cái nhìn chân thực nhất cho thiết kế. Mục này thực ra có thể được lược bỏ trong cấu trúc Atomic Design.

Để có thể bắt tay vào xây dựng Design System thì bước đầu tiên và cơ bản nhất là phải nắm được cấu trúc Atomic Design. Tuy không khó nhưng đây là kiến thức cơ sở không thể thiếu.

---

Bài viết được biên soạn & tổng hợp bởi GV Đinh Tiến Thành, phát hành độc quyền tại Keyframe. Thiết kế minh họa bởi Keyframe.

Nếu bạn muốn học và thực hành sâu hơn về Atomic Design thì có thể tham gia khóa học Figma UI Design tại Keyframe nhé.
Xem khóa học tại đây: https://keyframe.vn/khoa-hoc-offline/khoa-hoc-figma-ui-design-80.html