Design System &
Komponen Tetap
Belajar menyusun komponen UI yang konsisten, reusable, dan efisien untuk pengalaman pengguna yang lebih baik.
Apa itu Komponen UX?
Elemen interaktif yang memiliki fungsi dan perilaku tertentu serta dapat digunakan berulang kali di berbagai layar.
Kenapa Penting?
User (Pengguna)
Tidak bingung, cepat hafal penggunaan, dan merasa aplikasi profesional.
Designer
Hemat waktu (buat sekali pakai berkali-kali) & mudah update global.
Prinsip Konsistensi
"Jangan buat pengguna berpikir ulang untuk hal yang sama."
Visual
Elemen yang sama terlihat sama di semua tempat.
Fungsional
Elemen yang sama berfungsi sama di mana saja.
Posisi
Elemen berada di letak yang diharapkan pengguna.
Atomic Design
Metode membangun sistem desain dari elemen terkecil seperti menyusun LEGO.
Atoms
Elemen terkecil (Icon, Label, Box).
Molecules
Gabungan atom (Button, Input Field).
Organisms
Gabungan molekul (Header, Card, Form).
VISUALISASI KOMPONEN
4 Komponen Utama
Button (Tombol)
States & Variants
Do: Minimal tinggi 48px, Label jelas (Kata Kerja).
Don't: Label generik ("Ok", "Klik"), Terlalu banyak primary button dalam 1 layar.
Input Field
Card
Card digunakan untuk mengelompokkan informasi. Seluruh area card idealnya bisa diklik.
- Padding: 16px
- Gap: 8-12px
Bottom Navigation
Gunakan 3-5 menu. Menu aktif harus terlihat jelas (beda warna/tebal).
Tugas Kelompok (Design System)
Membuat Component Library Sederhana.
Checklist Komponen
Ketentuan
- • Format: Hitam Putih (Wireframe)
- • Output: Figma Link & PDF
- • Kelompok: 2-3 Orang
- • Deadline: Pertemuan Berikutnya
Dilarang!
Jangan menggunakan warna selain hitam, putih, dan abu-abu.