Atomic Design adalah cara berpikir untuk menyusun antarmuka (UI) secara terstruktur dan konsisten, mirip seperti membangun sesuatu dari bagian paling kecil sampai utuh.
Metodologi ini diciptakan oleh Brad Frost dan dia menginspirasi dunia UI/UX dengan analogi kimia.
👶 Penjelasan Sederhana (Untuk Orang Awam)
Bayangkan kamu sedang membangun rumah LEGO:
Bata LEGO kecil (Atom) → Bagian terkecil
Gabungan bata jadi dinding (Molecule) → Sudah mulai punya fungsi
Gabungan dinding jadi rumah (Organism) → Sudah terlihat bentuknya
Susunan beberapa rumah jadi perumahan (Template) → Struktur tanpa penghuni
Perumahan penuh penghuni & furniture (Page) → Siap dipakai
🔬 Lima Tingkatan dalam Atomic Design
1. 🧱 Atoms (Atom)
Bagian terkecil UI yang berdiri sendiri
Contoh:
Label (<label>Email</label>)
Input field (<input type=”text” />)
Tombol (<button>Kirim</button>)
Ikon atau warna
➡️ Sendiri, mereka belum terlalu bermakna.
2. 🧪 Molecules (Molekul)
Gabungan dari beberapa atom untuk membentuk fungsi dasar
Contoh:
Form login: label + input + tombol
Navigasi kecil: ikon + teks
➡️ Sudah bisa menjalankan fungsi spesifik.
3. 🧬 Organisms (Organisme)
Gabungan molekul dan/atau atom menjadi bagian besar dari UI
Contoh:
Navigasi atas (navbar): logo, menu, tombol login
Kartu produk: gambar + nama + harga + tombol beli
Footer situs
➡️ Sudah terlihat seperti bagian nyata dari halaman web/aplikasi.
4. 🧱 Templates
Kerangka layout halaman tanpa data asli
Contoh:
Layout halaman login
Template blog
Halaman checkout kosong
➡️ Sudah menunjukkan struktur dan posisi elemen, tapi belum ada kontennya.
5. 📄 Pages
Template + konten nyata = halaman siap digunakan pengguna
Contoh:
Halaman produk lengkap
Artikel blog dengan teks asli
Dashboard pengguna dengan data nyata
➡️ Sudah bisa digunakan oleh user.
💡 Studi Kasus Nyata
📱 Contoh: Tokopedia
Bayangkan tim UI Tokopedia membuat design system berdasarkan Atomic Design.
🔹 Atoms:
Icon keranjang
Font teks “Rp”
Tombol hijau + Tambah
🔹 Molecules:
Komponen “Tambah ke Keranjang” = tombol + ikon
Input pencarian = input + ikon + label
🔹 Organisms:
Header (logo + search + menu akun)
Kartu produk (gambar + nama + harga + tombol beli)
🔹 Template:
Layout halaman produk: gambar kiri, deskripsi kanan, review di bawah
🔹 Page:
Produk: “Sandal Swallow Ukuran 42” dengan foto & harga asli
🧠 Manfaat Atomic Design
Manfaat Penjelasan
🔁 Konsistensi Semua komponen dibangun dari aturan & struktur yang sama
🧱 Reusability Komponen kecil bisa dipakai di banyak tempat tanpa buat dari awal lagi
🤝 Kolaborasi Mudah Designer & developer paham istilah dan struktur yang sama
🧪 Scalable Design system mudah dikembangkan seiring pertumbuhan produk
🛠️ Testing Mudah Bisa uji tiap bagian UI (dari atom ke page) secara terpisah
📌 Kesimpulan
Atomic Design adalah cara berpikir yang memecah antarmuka (UI) jadi bagian kecil yang membentuk satu kesatuan besar.
Dengan lima level:
Atom → elemen dasar
Molekul → gabungan fungsional sederhana
Organisme → bagian besar UI
Template → kerangka halaman
Page → halaman nyata dengan konten asli
📚 Tambahan: Tools Pendukung
🔧 Storybook → Untuk dokumentasi komponen per level (atom, molekul, dll)
🎨 Figma → Untuk membuat visual guideline mengikuti struktur atomic design
