0Pricing
Frontend Academy · Pelajaran

Desain Atomik: Atom Molekul Organisme

Kategorikan komponen menjadi atom, molekul, organisme, templat, dan halaman untuk menciptakan kosakata bersama antara desain dan rekayasa.

Desain Atomik: Atom Molekul Organisme adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa Itu Atomic Design?

Atomic Design (Brad Frost, 2013) adalah model mental untuk mengatur komponen UI ke dalam lima tingkat kompleksitas: Atom, Molekul, Organisme, Templat, dan Halaman. Model ini memberi desainer dan engineer kosakata bersama.

Atom — Blok Bangunan Terkecil

Komponen dengan satu tujuan yang tidak dapat diuraikan lebih lanjut. Tombol, kolom masukan, ikon, label, dan contoh warna. Komponen ini abstrak dan dapat digunakan ulang dalam konteks apa pun.

// Atoms (examples)
<Button variant="primary">Save</Button>
<Input type="email" name="email" />
<Icon name="chevron-right" />
<Label htmlFor="email">Email</Label>

Molekul — Kelompok Komponen Sederhana

Gabungkan atom untuk melakukan sesuatu yang berguna. SearchBar adalah gabungan Masukan + Tombol + Ikon. FormField adalah gabungan Label + Masukan + ErrorMessage. Komponen ini masih bersifat umum.

function SearchBar({ onSearch }) {
  return (
    <div className="search-bar">
      <Input placeholder="Search..." />
      <Button onClick={onSearch}>
        <Icon name="search" />
      </Button>
    </div>
  );
}

Organisme — Bagian yang Kompleks

Komposisi yang lebih besar dan membentuk bagian khusus dalam antarmuka: tajuk (logo + navigasi + bilah pencarian + menu pengguna), ProductCard (gambar + judul + harga + tombol), dan SignupForm. Komponen ini lebih mempertimbangkan konteks.

function Header({ user }) {
  return (
    <header>
      <Logo />
      <Navigation links={navLinks} />
      <SearchBar onSearch={handleSearch} />
      <UserMenu user={user} />
    </header>
  );
}

Templat — Kerangka Halaman

Tata letak setingkat kerangka gambar yang mengatur organisme tanpa konten nyata. BlogTemplate memiliki tajuk, bagian Utama dengan slot Artikel, dan Bilah Samping.

function BlogTemplate({ header, article, sidebar, footer }) {
  return (
    <div className="blog-layout">
      {header}
      <div className="main">
        <main>{article}</main>
        <aside>{sidebar}</aside>
      </div>
      {footer}
    </div>
  );
}

Halaman — Konten Nyata

Templat dengan konten nyata. Halaman /blog/[slug] merender BlogTemplate dengan artikel aktual, widget bilah samping, dan elemen antarmuka umum.

Struktur Folder

Banyak tim mengatur komponen berdasarkan tingkatannya.

src/components/
  atoms/
    Button.tsx
    Input.tsx
    Icon.tsx
  molecules/
    SearchBar.tsx
    FormField.tsx
  organisms/
    Header.tsx
    ProductCard.tsx
  templates/
    BlogTemplate.tsx
  pages/
    BlogPage.tsx

Manfaat

Kosakata bersama antara desainer dan pengembang. Mendorong komposisi alih-alih duplikasi. Mempermudah pembangunan sistem desain. Mendorong pemikiran tentang unit terkecil yang dapat digunakan ulang terlebih dahulu.

Kritik: Kategorisasi Ketat Itu Sulit

Dalam praktiknya, batas antara molekul dan organisme tidak jelas. Banyak tim akhirnya berdebat tentang tempat sesuatu seharusnya berada — sehingga tujuan untuk mendapatkan kejelasan justru tidak tercapai.

Alternatif Modern: Berbasis Fitur

Banyak basis kode React/Vue berukuran besar lebih memilih pengaturan berdasarkan fitur (auth/, checkout/, dashboard/) daripada tingkat atom yang ketat. Atomic Design tetap cocok untuk lapisan sistem desain bersama.

Atomic di Storybook

Storybook cocok digunakan dengan atomic design — kategori tingkat atas Atom, Molekul, dan Organisme membuat pustaka komponen mudah dijelajahi.

Kapan Menggunakan Atomic Design

Paling cocok untuk: pustaka sistem desain yang digunakan bersama oleh beberapa aplikasi, tim besar yang memerlukan model mental bersama, dan proyek dengan keterlibatan aktif desainer. Lewati untuk: aplikasi kecil, prototipe, dan SPA yang berfokus pada fitur, karena penempatan bersama lebih penting di sana.

Pemeriksaan Singkat

Dalam Atomic Design, komponen seperti apa SearchBar yang dibangun dari Masukan + Tombol + Ikon?

Ringkasan: Atomic Design

Lima tingkat: Atom (Tombol, Masukan, Ikon), Molekul (SearchBar, FormField), Organisme (tajuk, ProductCard), Templat (tata letak), dan Halaman (konten nyata). Kosakata bersama dan pemikiran yang mengutamakan komposisi. Struktur folder mencerminkan lapisan-lapisan tersebut. Paling cocok untuk sistem desain bersama; folder berbasis fitur sering kali lebih baik daripada atomic untuk kode aplikasi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Desain Atomik: Atom Molekul Organisme” gratis?

Ya — teks lengkap “Desain Atomik: Atom Molekul Organisme” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Desain Atomik: Atom Molekul Organisme”?

Kategorikan komponen menjadi atom, molekul, organisme, templat, dan halaman untuk menciptakan kosakata bersama antara desain dan rekayasa. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Desain Atomik: Atom Molekul Organisme” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Desain Atomik: Atom Molekul Organisme
  2. Penyiapan Monorepo dengan Turborepo
  3. Mikro-frontend: Module Federation
  4. Struktur Folder Berbasis Fitur
← Kembali ke Frontend Academy