Belajar UI Designer - UI Components Design

#Pendahuluan

Setelah di episode 6 kita punya mesin komponen di Figma dan di episode 7 aset ikon, pada episode ini kita mengisi mesin itu dengan komponen inti yang dipakai di hampir semua layar: tombol, form, input, dan kartu. Ini adalah blok bangunan — kualitas produk sangat ditentukan seberapa matang blok-blok ini.

Mengapa komponen inti perlu didesain serius, bukan "nanti juga"? Karena 80% layar produk dibangun dari 20% komponen yang sama. Tombol yang state-nya tidak jelas, input yang tidak menunjukkan error, atau kartu yang tidak konsisten — semua itu mewarnai setiap layar. Investasi di komponen inti adalah investasi yang terbayar di seluruh produk.

#Buttons (Tombol)

Tombol adalah elemen interaktif paling penting. Empat pertimbangan saat mendesainnya:

• Peran — primary (satu per layar, aksi utama), secondary (aksi alternatif), ghost/text (aksi ringan), destructive (aksi berbahaya).
• Label — verb-first ("Simpan target"), bukan noun-only ("Target"). Jangan pernah dua tombol primary dalam satu area.
• Hit area — area klik minimal 44 × 44 px (kita ukur detailnya di episode 15), termasuk untuk tombol yang tampak kecil.
• State — setiap tombol wajib punya semua state.

default  → bg primary-500, label putih
hover    → bg primary-600 (sedikit lebih gelap) + elevation tipis
pressed  → bg primary-700 (lebih gelap lagi) + inset shadow
disabled → bg ink-200, label ink-400 — TANPA drop shadow
loading  → label diganti spinner, ukuran tidak berubah

Perhatikan bahwa disabled tidak boleh memakai warna semantik dan tidak boleh terlihat seperti primary yang redup saja — ia harus jelas "tidak bisa diklik", bukan "warnanya keganti".

#Forms dan Inputs

Form adalah tempat pengguna menyerahkan data — dan tempat paling sering terjadi frustrasi. Input yang baik punya tiga lapisan visual yang jelas:

• Label — selalu terlihat, singkat, dan menjelaskan apa yang diminta.
• Field — border 1px, background terang, placeholder redup.
• Helper/error — teks pembantu; saat error, kombinasi border merah + ikon + pesan teks (jangan hanya warna, ingat episode 3).

default : border ink-300, label ink-700
focus   : border primary-500 + ring 2px primary-100
filled  : teks ink-900, tetap terlihat jelas
error   : border danger-500 + ikon ! + pesan "Minimal Rp10.000"
disabled: bg ink-50, border ink-200, teks ink-400

Fokus state adalah "janji" bahwa input sedang aktif — jangan pernah menghilangkannya (kita bahas lagi dari sisi aksesibilitas di episode 15).

#Cards (Kartu)

Kartu mengelompokkan informasi dalam satu unit visual. Variabel yang harus konsisten: padding, radius, border/shadow, dan hierarki teks di dalamnya. Kartu transaksi Kantongin:

Radius   : 12 px
Padding  : 16 px (dari spacing scale)
Elevasi  : border 1px ink-200 (light) / bg ink-50 (dark)
Struktur : ikon kategori | teks utama + subteks | nominal

Dua pendekatan elevasi: bordered card (border tipis, tenang) dan elevated card (shadow, menonjol). Pilih satu sebagai standar utama — jangan campur perasaan di tiap layar. Elevated biasanya hanya untuk elemen yang memang perlu mengambang (dropdown, tooltip).

#Komponen Pendukung Lainnya

Selain empat inti, siapkan sekaligus: avatar, badge/chip (kategori, status), empty state, switch/checkbox, dan skeleton loading. Skeleton khususnya penting — ia menjaga persepsi performa saat data dimuat:

[Skeleton] bg ink-100 berdenyut halus → placeholder judul/isi
[Real]    isi sebenarnya muncul setelah data siap

Struktur skeleton harus mirip struktur aslinya — jangan sampai pengguna kaget saat data asli tampil dengan bentuk berbeda.

#Membangun Komponen Library

Semua komponen di atas disusun menjadi library: satu file Figma khusus yang berisi komponen, dipakai tim lewat publish library. Aturannya:

• Satu file untuk library (Kantongin-System), terpisah dari file desain (Kantongin-App).
• Setiap komponen punya variants untuk semua state yang didukung.
• Simpan styles warna/teks di file library.
• Update library → tim mendapat notifikasi dan bisa menyerap perubahan.

#Praktik: Komponen Library Kantongin

1. Buat file Figma baru Kantongin-System.
2. Bangun 4 komponen inti: Button, Input, Card, Badge — masing-masing dengan variants.
3. Tambahkan EmptyState dan Skeleton sebagai komponen pendukung.
4. Gunakan style color/typography yang sudah dibuat di episode 3-4.
5. Terapkan komponen di layar Kantongin file desain — dan verifikasi perubahan master menyebar ke instance.

#Common Pitfalls

• State tidak lengkap — tombol tanpa state hover/pressed/disabled membuat developer menebak.
• Dua primary button dalam satu layar — pengguna bingung aksi mana yang utama.
• Error hanya warna — pengguna buta warna tidak bisa membedakannya (episode 3 & 15).
• Radius/padding inkonsisten antar komponen — library yang tidak patuh spacing scale.
• Komponen "mati" — library dibuat sekali lalu tidak dirawat; state error basi.

#Penutup

Pada episode 8 ini, kalian telah mendesain komponen inti yang menjadi blok bangunan seluruh produk.

Inti yang harus dibawa pulang:

• Button punya peran (primary/secondary/destructive) dan semua state (hover, pressed, disabled, loading).
• Input butuh label, field, dan helper/error yang jelas — fokus state jangan dihilangkan.
• Card konsisten dalam radius, padding, dan elevasi — pilih bordered atau elevated sebagai standar.
• Komponen disusun menjadi library di file terpisah dan dirawat rutin.

Di episode 9 selanjutnya kita akan membahas design systems & tokens — menyatukan warna, type, spacing, dan komponen menjadi satu bahasa desain yang terdokumentasi untuk Kantongin. Sampai jumpa di episode 9!