Reference: Atomic Design Methodology | Atomic Design by Brad Frost written by Dev Rando

<aside> <img src="/icons/book_gray.svg" alt="/icons/book_gray.svg" width="40px" />

Contents

</aside>

Apa itu Atomic Design?

Atomic Design adalah metodologi untuk menciptakan desain sistem UI yang modular, konsisten, dan dapat digunakan kembali. Metodologi ini terinspirasi dari konsep kimia, di mana UI dibangun dari komponen kecil (atoms) yang digabung menjadi unit yang lebih besar (molecules, organisms, dll.).

Lima Tingkatan Atomic Design

1. Atoms

   Komponen paling kecil dan fundamental, seperti tombol, label, atau input.

   • Contoh: <button>, <input>, <label>.

2. Molecules

   Gabungan beberapa atom yang membentuk unit kecil dengan fungsi spesifik.

   • Contoh: Form input (label + input + tombol).

3. Organisms

   Struktur kompleks yang terdiri dari beberapa molecules dan atoms.

   • Contoh: Header (logo + menu navigasi + search bar).

4. Templates

   Layout halaman yang menempatkan organisms ke dalam struktur spesifik.

   • Contoh: Layout blog dengan header, sidebar, dan footer.

5. Pages

   Implementasi nyata dari template dengan data atau konten spesifik.

   • Contoh: Halaman artikel blog dengan konten lengkap.

Keuntungan Atomic Design

1. Konsistensi: Komponen yang dapat digunakan kembali menjaga tampilan tetap seragam.
2. Fleksibilitas: Mudah untuk menambah atau mengubah desain tanpa memengaruhi keseluruhan sistem.
3. Efisiensi: Mengurangi pengulangan kerja dengan memanfaatkan komponen modular.
4. Kolaborasi: Mempermudah komunikasi antar tim desain dan pengembang.