Step 6 - Membangun Komponen Konsisten

Menyusun komponen reusable dari framework agar UI stabil saat produk tumbuh.

Kalau step 5 bicara strategi, step 6 adalah eksekusi: mengubah komponen cepat jadi komponen yang konsisten.

Target step ini

• 1 gaya tombol utama
• 1 gaya kartu konten
• 1 pola form yang konsisten

Step praktik

Step 1: Definisikan varian komponen dulu

Contoh tombol:

• primary
• secondary
• danger

Step 2: Bungkus utilitas ke komponen

<button class="btn btn-primary">Simpan</button>
<button class="btn btn-secondary">Draft</button>

Dengan begitu, tim tidak perlu menghafal puluhan class utilitas.

Step 3: Buat aturan state

Semua komponen wajib punya state:

• hover
• focus
• disabled

Step 4: Dokumentasikan contoh pakai

Setiap komponen harus punya snippet penggunaan 3-5 baris.

Studi kasus nyata

Kasus: Product detail page e-commerce

Masalah: tombol “Beli” dan “Tambah Keranjang” beda style antar halaman.
Solusi: standarisasi komponen tombol + state + dokumentasi.

Hasil:

• identitas UI lebih kuat
• bug visual berulang menurun
• kolaborasi dev-desain lebih sinkron

Checklist latihan

• Buat 3 varian tombol standar
• Buat 1 komponen card reusable
• Pastikan semua punya state focus yang jelas
• Tulis snippet penggunaan tiap komponen

Checklist mengingat

• Konsistensi mengalahkan kreativitas acak
• Komponen reusable mengurangi bug jangka panjang
• Dokumentasi singkat lebih baik dari asumsi

Mini proyek

Buat mini UI kit internal berisi:

• tombol
• card
• input
• badge status

Pakai di 2 halaman berbeda untuk cek konsistensi.

Progress belajar

Progress belajar topik Framework CSS: 40%