Belajar UI Designer - AI dalam UI Design Workflow

#Pendahuluan

Setelah di episode 20 produk siap mendunia, pada episode ini kita memasuki ranah yang mengubah cara desainer bekerja sejak 2024-2026: AI dalam workflow desain. Bukan sebagai pengganti, tapi sebagai percepatan — dari eksplorasi ide hingga aset produksi.

Mengapa AI wajib dikuasai UI designer di 2026? Karena kecepatan eksplorasi menentukan kualitas keputusan: dengan AI, desainer bisa melihat 20 variasi layout dalam waktu yang sebelumnya dipakai untuk 2. Namun AI juga punya jebakan — hasil yang indah tapi tidak masuk akal, atau "tampak selesai" padahal belum dipikirkan. Keterampilan kalian justru di penjagaan kualitas, bukan di klik generasi.

#AI dalam Alur Kerja Desain

AI menyentuh beberapa titik alur kerja:

Tahap	Peran AI	Contoh
Ideation	Menyediakan arah & variasi	Prompt "3 layout beranda fintech untuk gen-Z"
Eksplorasi	Variasi layout otomatis	Figma AI membuat beberapa opsi frame
Aset	Image gen untuk ilustrasi	Membuat ilustrasi empty state
Sizing	Mengisi konten & aset	Placeholder, teks, avatar
Review	Pemeriksaan konsistensi	Mendeteksi spacing/color yang menyimpang

Kuncinya: AI paling kuat di tahap eksplorasi & produksi aset, sementara keputusan tetap manusiawi.

#Figma AI dan Fitur 2026

Figma telah mengintegrasikan AI ke alur kerja desain:

AI create — membuat layout dari deskripsi teks; hasilnya titik awal yang bisa dikembangkan, bukan hasil akhir.
Rename layers — penamaan layer otomatis yang membersihkan struktur file (membantu handoff episode 13!).
Aset search — menemukan komponen/ikon dari deskripsi.
AI suggestions — saran varian state atau komponen yang mirip.

Prinsip pakai: gunak'an hasil AI sebagai starter, bukan jawaban final. Layout yang dihasilkan AI biasanya wajar secara struktur tapi belum mempertimbangkan konteks produk, brand, dan data nyata — di situlah kalian bekerja.

#Prompt Engineering untuk Desain

Hasil AI sangat ditentukan prompt. Prompt desain yang baik berisi konteks + kendala + output:

Contoh prompt eksplorasi layout

Buat 3 opsi layout untuk halaman beranda aplikasi keuangan pribadi.
 
Konteks: target pengguna 18-24 tahun, mobile-first 390px,
brand muda & tepercaya (primary ungu), fokus pada saldo + target tabungan.
 
Kendala: maksimal 1 chart, tombol utama jelas, margin 20px,
mengikuti grid 4 kolom, tidak ada iklan.
 
Output: 3 frame wireframe tingkat hi-fi yang bisa dikembangkan di Figma.

Prompt yang baik menjawab: untuk siapa (konteks), apa batasannya (kendala), dan seperti apa hasilnya (output). Semakin spesifik kendala, semakin berguna hasilnya — AI yang diberi "buatkan yang bagus" menghasilkan yang generik.

Tip

Gunakan AI untuk memperluas, bukan meniru. Saat kalian punya satu arah desain, minta AI menghasilkan variasi yang berbeda dari arah tersebut — "bikin versi yang kontras, misalnya layout bottom-heavy". Ini memperkaya ruang ide yang tidak terpikirkan kalian sendiri.

#AI Image Generation untuk Aset

Ilustrasi dan aset visual bisa dihasilkan AI (misal untuk empty state, onboarding, ikon kustom). Aturan produksi:

Selaras dengan design system — generate dalam style dan palette yang sudah ditetapkan (episode 7, 9), bukan gaya asing yang "menarik tapi nyasar".
Revisi berlapis — refine bertahap (deskripsi → variasi → detail), bukan berharap sekali jadi.
Cek kualitas & lisensi — hasil AI bisa mengandung detail aneh (jari 6, teks aneh); audit sebelum dipakai. Perhatikan juga hak penggunaan aset.
Gunakan sebagai bahan, rapikan manual — seringkali aset AI menjadi base yang dirapikan di Figma.

#Peran Manusia: Penjaga Kualitas

AI mempercepat produksi, tetapi kualitas tetap tanggung jawab desainer:

Kurasi — memilih hasil yang sesuai konteks, membuang yang "tampak keren tapi salah".
Verifikasi — cek kontras, spacing, dan struktur hasil AI terhadap design system (episode 15, 9).
Kejujuran — AI tidak tahu dark patterns atau konteks budaya; penjagaan etika tetap manusiawi (episode 18-20).
Keputusan — "mana yang terbaik untuk pengguna" tidak bisa didelegasikan ke model.

Warning

Bahaya terbesar AI dalam desain bukan "hasil jelek", melainkan kepercayaan berlebih: output AI terlihat profesional, padahal struktur, aksesibilitas, atau kejujuran datanya tidak diverifikasi. Tetapkan aturan: semua output AI melewati review desain yang sama seperti karya manual — termasuk cek kontras, dark patterns, dan kebenaran konteks.

#Praktik: Workflow AI untuk Kantongin

Tulis prompt eksplorasi untuk beranda (konteks + kendala + output) dan generate 3 opsi.
Pilih satu arah, lalu buat 3 variasi yang kontras dari arah itu.
Generate 1 ilustrasi empty state ("belum ada transaksi") dengan style & palette Kantongin.
Review hasil: cek kontras, grid, dan konsistensi dengan design system — perbaiki manual.
Rename layer dengan bantuan AI, lalu catat prompt yang bekerja baik untuk dipakai lagi.

#Common Pitfalls

Hasil AI langsung jadi — tanpa review desain dan verifikasi system.
Prompt terlalu kosong — tanpa konteks & kendala, hasilnya generik.
Gaya nyasar — aset AI tidak mengikuti style & palette produk.
Kepercayaan berlebih — menganggap AI "pasti benar" padahal tidak tahu konteks produk.
Berhenti belajar — tools berubah cepat; rutinitas eksperimen adalah bagian kerja.

#Penutup

Pada episode 21 ini, kalian telah mengintegrasikan AI sebagai akselerator workflow desain Kantongin.

Inti yang harus dibawa pulang:

AI mempercepat eksplorasi, produksi aset, dan kebersihan file — bukan menggantikan keputusan.
Prompt yang baik: konteks + kendala + output yang spesifik.
Image generation dipakai sebagai bahan yang dirapikan dan diverifikasi terhadap design system.
Peran manusia: kurasi, verifikasi, dan penjagaan kualitas & etika.

Di episode 22 selanjutnya kita akan membahas 3D & immersive UI — elemen 3D, kedalaman, dan tren Liquid Glass untuk memberi dimensi pada antarmuka Kantongin. Sampai jumpa di episode 22!