Digital Transformation
Atomic Design (Desain Atomik)
TL;DR: Atomic design memecah UI menjadi lima level: atom (tombol, label), molekul (form field), organisme (header), template (kerangka halaman), dan halaman. Pendekatan ini bikin tim front-end dan desainer bicara bahasa yang sama, mempercepat rilis fitur baru.
Apa itu Atomic Design?
Atomic design adalah metodologi yang dipopulerkan Brad Frost pada 2013. Ide intinya meminjam dari kimia: antarmuka kompleks tersusun dari elemen kecil (atom) yang bergabung menjadi struktur lebih besar. Pendekatan ini menjadi tulang punggung banyak design system modern, termasuk yang dipakai di Next.js dan React.
Setiap level punya tanggung jawab jelas. Atom tidak boleh punya logika bisnis. Molekul menggabungkan atom tanpa fetching data. Organisme boleh punya state. Template mengatur layout, halaman mengisi konten.
Lima Level Atomic Design
| Level | Definisi | Contoh konkret |
|---|---|---|
| Atom | Elemen UI paling dasar | Button, Input, Label |
| Molekul | Gabungan atom dengan satu fungsi | Search bar (input + button) |
| Organisme | Komponen kompleks dengan konteks | Navbar, Card produk |
| Template | Kerangka layout tanpa data | Halaman blog kosong |
| Halaman | Template + data nyata | Halaman blog dengan artikel |
Kenapa Penting?
Untuk tim Indonesia yang campuran marketer dan developer, atomic design jadi jembatan komunikasi. Marketer bisa minta perubahan di level "molekul search" tanpa khawatir merusak halaman lain. Developer bisa rilis fitur tanpa diskusi panjang soal tampilan. Hierarki ini juga memudahkan onboarding desainer baru, mereka cukup pelajari atom dulu sebelum naik ke level kompleks. Pendekatan ini sejalan dengan prinsip single source of truth untuk komponen.
Pertanyaan Umum
Apakah atomic design wajib untuk semua proyek?
Tidak. Untuk landing page tunggal, overhead-nya tidak sepadan. Mulai pertimbangkan saat proyek punya 10+ halaman atau lebih dari 1 developer aktif.
Apa beda atom dan komponen biasa?
Atom adalah komponen yang tidak bisa dipecah lagi tanpa kehilangan fungsi. Tombol adalah atom, tapi card produk adalah organisme karena terdiri dari banyak atom dan molekul.
Istilah Terkait