Belajar UI Designer - Icons & Illustration

#Pendahuluan

Setelah di episode 6 kita menguasai struktur Figma, pada episode ini kita mengisi struktur itu dengan aset visual paling sering dipakai: icon dan ilustrasi. Ikon ada di hampir setiap layar — tab bar, tombol aksi, kategori, notifikasi — dan justru karena sering, perbedaannya paling cepat terasa.

Mengapa icon perlu diperlakukan sebagai sistem? Karena ikon yang digambar dari gaya berbeda (satu tebal, satu tipis, satu punya sudut tajam) membuat layar terlihat campuran meski warna dan tipografi sudah konsisten. UI designer profesional tidak memilih ikon satu per satu; mereka membangun atau memilih satu set yang seragam, lalu memakainya secara konsisten.

#Anatomi Icon

Icon yang baik tidak digambar bebas — ia mengikuti anatomi standar agar mudah disejajarkan dan konsisten:

• Grid — ikon biasanya digambar dalam grid 16, 20, atau 24 px dengan area aman di dalamnya.
• Stroke width — ketebalan garis; seluruh set harus memakai satu nilai (misal 1.5 atau 2).
• Corner radius — lengkungan sudut yang seragam memberi karakter set.
• Size — semua ikon dipakai dalam ukuran yang sama (misal 20 px di bar navigasi, 16 px inline).

Grid          : 24 x 24 px (area aman 20 px di tengah)
Stroke        : 1.75 px, rounded caps & corners
Filled variant: untuk state aktif / terpilih
Palette       : ink (default), primary (aktif), semantik (status)

Dua gaya utama icon: filled (isi padat, tegas, dipakai untuk state aktif) dan outline (garis tipis, dipakai untuk default). Banyak produk memakai kombinasi keduanya — outline untuk default, filled untuk state terpilih — persis pola tab bar.

#Icon vs Icon Set

Ada dua jalur: membangun sendiri atau memakai set yang sudah ada. Untuk kebanyakan produk, memakai set yang matang (misal Lucide, Phosphor, Feather) jauh lebih efisien daripada menggambar dari nol — konsistensi sudah terjamin. Kalian menggambar sendiri hanya saat butuh ikon kustom (misal ikon brand) atau ketika produk menuntut karakter unik.

Yang penting bagi UI designer: mengelola set — memastikan size, stroke, dan palette konsisten; menandai ikon mana yang boleh dipakai (whitelist) dan mana yang tidak; dan menyimpan semua ikon sebagai komponen Figma (episode 6). Tanpa whitelist, setiap orang memakai ikon beda gaya — konsistensi hancur.

#Membangun Icon Set Sendiri

Jika memutuskan menggambar sendiri, ikuti resep sederhana dengan shape dan boolean di Figma:

1. Frame 24x24, grid 20px area aman.
2. Garis horizontal 10px + garis vertikal 10px, stroke 1.75.
3. Cek: titik tengah di 12,12; jarak ujung ke tepi 7px.
4. Simpan sebagai component, buat variant outline & filled.

Rahasia konsistensi bukan pada satu ikon, melainkan pada menyalin komponen dasar lalu memodifikasinya — bukan menggambar tiap ikon dari nol. Dengan begitu, semua ikon mewarisi grid, stroke, dan sudut yang sama.

#Ilustrasi

Ilustrasi membawa kepribadian dan membuat momen non-fungsional jadi hangat: empty state, halaman sukses, onboarding, error. Panduan praktis:

• Konsisten dalam gaya — satu ilustrasi "flat berwarna pastel" dan satu lagi "line-art" dalam satu produk terasa berantakan.
• Selaras dengan palette — ilustrasi memakai warna dari palette produk (primer + netral + semantik), bukan warna asing.
• Tidak menggantikan fungsi — ilustrasi pada empty state harus menyertai pesan yang jelas dan (idealnya) aksi lanjutan, bukan hanya menghiasi.

Untuk Kantongin, ilustrasi memakai gaya flat + duotone ungu yang konsisten dengan brand, dengan wajah yang ramah untuk momen sukses menabung dan konteks netral untuk empty state.

#Praktik: Icon Set Kantongin

1. Buat frame Icons di Figma, komponen icon 24 px (stroke 1.75, area aman 20 px).
2. Buat 6 ikon inti: plus (tambah), arrow-right, home, chart, target, dan settings.
3. Jadikan masing-masing component dengan variants outline dan filled.
4. Tempatkan deretan tab bar Kantongin memakai 4 ikon inti.
5. Whitelist: catat di page Spec ikon mana yang boleh dipakai tim.

#Common Pitfalls

• Campuran stroke — sebagian ikon tebal, sebagian tipis; set terlihat asal ambil.
• Ikon beda ukuran secara visual — semua 24 px tapi ada yang tampak kecil; grid area aman mencegah ini.
• Ikon kustom tanpa gaya set — ikon "kreatif" yang tidak mengikuti stroke/radius set.
• Ilustrasi warna beda palette — ilustrasi kuning-hijau di produk ungu terasa asing.
• Ikon tanpa label — ikon ambigu tanpa teks membuat pengguna menebak (kita bahas di episode 14).

#Penutup

Pada episode 7 ini, kalian telah membangun sistem aset: icon dan ilustrasi yang seragam dan konsisten.

Inti yang harus dibawa pulang:

• Icon dibangun di atas anatomi standar: grid, stroke width, corner radius, dan size.
• Untuk mayoritas produk, memakai set yang matang + whitelist lebih efisien daripada menggambar sendiri.
• Ilustrasi harus selaras gaya & palette dan selalu punya alasan fungsi.
• Simpan semua aset sebagai komponen Figma agar konsistensi terjaga.

Di episode 8 selanjutnya kita akan membahas UI components design — button, form, input, card, dan state-nya — sebagai kumpulan elemen siap pakai untuk membangun layar Kantongin. Sampai jumpa di episode 8!