Khi một website lớn dần, mỗi trang lại có một nút bấm khác kiểu, một thẻ sản phẩm lệch khoảng cách, bạn sẽ nhận ra vấn đề không nằm ở từng trang mà ở cách dựng giao diện. Atomic Design là một câu trả lời cho chuyện đó: thay vì vẽ từng trang rời rạc, bạn xây các mảnh nhỏ rồi ghép dần lên, để mọi trang đều mọc ra từ cùng một bộ chi tiết gốc.
Atomic Design là cách tư duy, không phải công cụ
Điểm hay gây nhầm nhất: nhiều người tưởng Atomic Design là một thư viện hay một file Figma. Không phải. Đây là một phương pháp tư duy (mental model — mô hình suy nghĩ trong đầu) do Brad Frost mô tả năm 2013, lấy cảm hứng từ hoá học. Nó trả lời câu hỏi “chia nhỏ giao diện tới đâu thì hợp lý” chứ không quy định bạn dùng React, Vue hay WordPress.
Cách phân biệt nhanh với hai khái niệm hay đi cùng: component library (thư viện component — tập hợp các mảnh tái dùng đã dựng sẵn) là cái cụ thể bạn cầm nắm được; design system (hệ thống thiết kế — bộ quy tắc + tài sản + tài liệu) là cái bao trùm cả tài liệu lẫn nguyên tắc. Còn Atomic Design chỉ là cách sắp xếp các mảnh đó theo tầng. Bạn hoàn toàn có thể dựng một design system mà không dùng Atomic Design, và ngược lại.
5 tầng của Atomic Design
Brad Frost mượn ẩn dụ hoá học: vật chất gồm nguyên tử, nguyên tử ghép thành phân tử, phân tử ghép thành sinh vật. Giao diện cũng vậy, gồm 5 tầng lồng vào nhau.
1. Atom (nguyên tử) — mảnh nhỏ nhất
Atom là phần tử cơ bản nhất, chia nhỏ hơn nữa thì mất hết ý nghĩa. Ví dụ: một nhãn (label), một ô nhập liệu (input), một nút (button), một biểu tượng, hay một bảng màu, một cỡ chữ. Atom tự nó thường chưa làm được việc gì hữu ích, nhưng là viên gạch gốc.
2. Molecule (phân tử) — vài atom ghép lại
Molecule là nhóm nhỏ vài atom hợp lại để làm một việc cụ thể. Ví dụ kinh điển: ô tìm kiếm = nhãn “Tìm kiếm” + input + nút “Tìm”. Ba atom rời rạc kia khi đứng riêng vô dụng, ghép lại thành một đơn vị có chức năng rõ ràng và tái dùng được.
3. Organism (sinh vật) — khối lớn của giao diện
Organism là phần phức tạp hơn, tạo thành một mảng riêng biệt của giao diện. Ví dụ: thanh header gồm logo (atom) + menu điều hướng (molecule) + ô tìm kiếm (molecule). Organism đủ lớn để đứng độc lập như một khối, và thường là thứ bạn sẽ dùng đi dùng lại trên nhiều trang.
4. Template (khung) — bố cục chưa có nội dung thật
Template ghép các organism vào một khung bố cục, nhưng vẫn dùng nội dung giả (placeholder). Đây là lúc bạn nhìn thấy “trang sản phẩm trông sẽ thế nào” về mặt cấu trúc: header ở đâu, lưới sản phẩm bao nhiêu cột, footer chỗ nào — chưa quan tâm chữ và ảnh cụ thể.
5. Page (trang) — template đổ nội dung thật
Page là template được đổ nội dung thật vào: tên sản phẩm thật, ảnh thật, giá thật. Đây cũng là tầng quan trọng nhất để kiểm thử, vì nội dung thật mới lộ ra lỗi mà nội dung giả giấu đi — ví dụ tiêu đề quá dài làm vỡ thẻ, hay danh sách rỗng trông trống trải.
Một điểm hay bị bỏ qua: đây không phải quy trình tuyến tính
Nhiều người hiểu nhầm Atomic Design bắt buộc đi từ atom lên page theo thứ tự. Bản thân Brad Frost nhấn mạnh nó là mô hình tư duy để dựng giao diện và hệ thống nền dưới nó cùng lúc, không phải dây chuyền một chiều. Thực tế bạn thường bắt đầu từ một trang cụ thể, rồi “bóc ngược” ra xem nó gồm những organism, molecule, atom nào — đi từ page về atom cũng hợp lệ.
Ví dụ thực tế trên một thẻ sản phẩm
Để dễ hình dung, hãy mổ xẻ một thẻ sản phẩm (product card) quen thuộc:
| Tầng | Thành phần |
|---|---|
| Atom | Ảnh, tên sản phẩm, giá, nút “Thêm vào giỏ” |
| Molecule | Cả thẻ sản phẩm (gộp ảnh + tên + giá + nút thành một khối) |
| Organism | Lưới 8 thẻ sản phẩm của một danh mục |
| Template | Trang danh mục: header + lưới sản phẩm + bộ lọc + footer (nội dung giả) |
| Page | Trang “Áo thun nam” với 8 sản phẩm thật, giá thật |
Cùng một thẻ sản phẩm đó xuất hiện ở trang chủ, trang danh mục, trang tìm kiếm — sửa molecule một lần là cả ba nơi đổi theo. Đó chính là lợi ích lớn nhất của lối tư duy phân tầng: nhất quán và dễ bảo trì.
Khi nào nên dùng Atomic Design
Atomic Design phát huy mạnh khi dự án nhiều trang, nhiều người cùng làm, hoặc bạn dự định dùng lâu dài. Với một landing page (trang đích đơn) một lần dùng, ép đủ 5 tầng có thể thừa thãi. Quan trọng là tinh thần “dựng hệ thống, không dựng từng trang” — kể cả khi bạn không gọi tên 5 tầng một cách máy móc.
Trong thực tế dựng giao diện, Web22 thường áp dụng tinh thần phân tầng này khi xây theme: các atom (màu coral, cỡ chữ Inter Tight, khoảng cách) được khai báo một chỗ, rồi component tái dùng lắp ráp lên từ đó, để bản thiết kế và code khớp nhau, không tam sao thất bản khi bàn giao.
Câu hỏi thường gặp
Atomic Design có thay thế design system không?
Không. Atomic Design là cách tổ chức component; design system là toàn bộ hệ thống gồm cả quy tắc, tài liệu, token. Bạn có thể dùng Atomic Design như xương sống để sắp xếp component bên trong một design system.
Bắt buộc phải có đủ 5 tầng không?
Không bắt buộc. Nhiều nhóm bỏ tầng template hoặc gộp molecule với organism cho gọn. Atomic Design là bộ khung tham khảo, không phải luật cứng — hãy chỉnh cho vừa quy mô dự án.
Atomic Design có dành cho cả app di động không?
Có. Vì đây là cách tư duy độc lập với nền tảng, nó áp dụng được cho web, app di động hay phần mềm — miễn là giao diện có những mảnh lặp lại cần dựng có hệ thống.
Nếu bạn muốn dựng giao diện bài bản theo lối phân tầng này thay vì chắp vá từng trang, tham khảo dịch vụ thiết kế trải nghiệm người dùng của Web22.