Blog Pidgo
Prompt UI Design untuk Figma, Contoh dan Cara Menulisnya
Prompt yang baik untuk UI design menyebutkan komponen, ukuran, warna, dan perilaku secara spesifik. Prompt yang samar menghasilkan desain yang samar. Berikut lima contoh yang bisa kamu salin dan sesuaikan, lalu lima aturan untuk menulis prompt sendiri. Hasil akhirnya tetap tergantung tool AI yang kamu pakai, jadi anggap contoh ini sebagai titik awal.
Contoh 1: Kartu produk
Buat komponen kartu produk:
- Gambar persegi dengan sudut membulat
- Nama produk maksimal 2 baris
- Harga besar, harga coret kecil di sebelahnya
- Tombol "Tambah ke keranjang" lebar penuh
- Label diskon di pojok kanan atas gambar
- Hover: bayangan kartu menebal
Warna: {WARNA_UTAMA}. Font: {FONT}.
Contoh 2: Navigasi bawah di HP
Buat bilah navigasi bawah untuk aplikasi seluler:
- Lima tab: beranda, cari, favorit, keranjang, profil
- Ikon dan label di setiap tab
- Tab aktif: ikon terisi, label tebal, warna {WARNA_UTAMA}
- Tab tidak aktif: ikon garis, warna abu-abu
- Beri ruang aman di bagian bawah layar
Contoh 3: Formulir masuk
Buat formulir masuk di tengah layar:
- Judul "Selamat datang kembali"
- Kolom email dan kata sandi dengan tombol tampil/sembunyi
- Tautan "Lupa kata sandi"
- Tombol utama lebar penuh
- Pemisah "atau lanjut dengan" dan tombol akun Google
- Tampilkan state error di bawah kolom yang salah
Contoh 4: Tabel harga tiga paket
Buat tabel harga dengan tiga kartu:
- Paket {PAKET_1}, {PAKET_2}, dan {PAKET_3}
- Kartu tengah disorot dengan label "Paling banyak dipilih"
- Tiap kartu memuat harga, daftar fitur dengan tanda centang, dan tombol
- Tampilan HP: kartu bertumpuk satu kolom
Contoh 5: Header responsif
Buat header responsif:
- Laptop: logo kiri, menu di tengah, tombol ajakan di kanan
- HP: logo di kiri, ikon menu di kanan
- Menu HP terbuka sebagai panel layar penuh, tombol ajakan ada di dalamnya
Lima aturan menulis prompt UI
- Sebut ukuran dan jarak bila kamu peduli hasilnya. "Jarak antar kartu 24 px" lebih jelas dari "agak lega".
- Sebut semua state: normal, hover, aktif, nonaktif, memuat, dan error.
- Sebut perilaku di HP. Banyak hasil AI bagus di laptop tapi berantakan di layar kecil.
- Beri batasan. Misalnya "maksimal dua font" atau "satu warna aksen".
- Revisi sedikit-sedikit. Ubah satu hal per putaran supaya kamu tahu perubahan mana yang berpengaruh.
Pidgo untuk Figma dan tool lain
Pidgo menyediakan 43+ prompt desain yang bisa ditempel ke Claude, ChatGPT, Figma, Framer, atau Cursor. Tiap prompt punya preview live hasil render aslinya. Paket Pro mencakup workflow kit untuk Figma dan Claude Design.
Lihat 43+ preview live dan coba 5 prompt gratis di pidgoapp.online. Basic Rp99.000, Pro Rp199.000, sekali bayar, bukan langganan.