Cara Membuat UI Design dengan Nano Banana Pro untuk Desainer

Bisa nggak sih pakai Nano Banana Pro untuk bantu kerja UI design, bukan cuma buat gambar art random? Jawabannya bisa banget, asalkan kamu paham cara ngomong yang “benar” ke AI lewat prompt.

Di artikel ini, saya akan jelaskan cara membuat UI design dengan Nano Banana Pro, khususnya untuk UI dashboard, dengan workflow yang realistis dipakai desainer sehari-hari.

Kenapa UI Designer Perlu Coba Nano Banana Pro?

Nano Banana Pro adalah salah satu model AI dari Google yang cukup populer untuk menghasilkan gambar visual. Buat UI/UX designer, ini bisa jadi alat bantu untuk:

Bikin konsep visual lebih cepat saat masih di tahap eksplorasi.
Dapat gambaran layout dan style sebelum masuk ke Figma.
Ngebantu kalau client belum kasih brief yang jelas tapi sudah minta “contoh look & feel”.

Tapi ingat, AI bukan pengganti desainer. AI cuma bantu bikin draft ide, sedangkan keputusan akhir tetap di kamu: layout mana yang dipakai, typography, warna, sampai detail interaksi.

Workflow: Perplexity + Google Gemini + Nano Banana Pro

Di workflow ini, kamu akan pakai dua hal utama: Perplexity dan Google Gemini (yang di dalamnya ada akses ke Nano Banana Pro). Kenapa dua tools?

Perplexity: enak untuk minta AI bantu merinci struktur UI dan bikin prompt yang rapi dalam format markdown.
Gemini + Nano Banana Pro: dipakai untuk generate visual UI berdasarkan prompt yang sudah dirapikan tadi.

Jadi alurnya kurang lebih seperti ini:

Pakai Perplexity untuk definisikan struktur UI dan element yang dibutuhkan.
Rapikan atau modifikasi prompt sesuai kebutuhan kamu.
Kirim prompt tersebut ke Gemini dengan model Nano Banana Pro untuk generate gambar UI.
Pakai hasilnya sebagai referensi visual, lalu eksekusi final di Figma.

Membuat UI dengan Berbagai Style Tanpa Referensi

Bagian ini cocok kalau kamu masih benar-benar blank: belum punya referensi visual, belum tahu mau taruh apa saja di dashboard, tapi sudah tahu bisnisnya apa.

Contoh case: Dashboard Barbershop dengan Glassmorphism

Misalnya kita mau bikin Web UI Dashboard untuk barbershop, dengan style glassmorphism modern. Tapi kamu masih bingung:

Section apa yang harus ada?
Data apa yang penting buat owner?
Layout-nya kira-kira seperti apa?

Langkah pertama: minta Perplexity bantu definisikan struktur UI.

Metode tanpa referensi

Dengan menggunakan AI, kita dapat merancang gaya UI sebelum mendesainnya secara mendetail. Hal ini memungkinkan kalian menghemat waktu dalam membuat konsep. Sebagai contoh, kita bisa menciptakan UI modern dengan gaya tampilan kaca atau yang dikenal sebagai Glassmorphism untuk UI dashboard Barbershop. Langkah-langkah yang dapat dilakukan adalah meminta AI di Perplexity untuk membuat prompt UI. Misalnya, jika kalian masih belum memiliki gambaran elemen apa saja yang perlu ditampilkan dalam UI, AI di Perplexity dapat membantu merinci elemen-elemen tersebut.

Gunakan Prompt ini di Perpelxity

Help me to define the Web UI Dashboard for the barbershop business, where the owner or admin can see overview booking information from customers who want to cut their hair, but I have no idea what other information I should put on the dashboard.  Provide me the UI prompt for that as a markdown format. Also I want the UI style is using Glass Morphism style.

Dari prompt di atas ini, AI akan merespons dengan struktur yang cukup rinci, misalnya:

Header Navigation Bar: logo, nama barbershop, notifikasi, settings, profile owner.
Overview Cards: total bookings hari ini, staff yang sedang on duty, upcoming appointments, daily revenue.
Bookings Overview: tabel berisi nama customer, barber, service, waktu, status, dan harga.
Barbers Performance Panel: grafik sederhana untuk performa tiap barber dan rating pelanggan.
Revenue & Insights: grafik revenue harian/mingguan dan layanan paling populer.
Customer Feedback: list ulasan pelanggan dengan rating star.
Upcoming Appointments: panel kecil berisi booking berikutnya.
Quick Actions: tombol “Add New Booking”, “Add New Service”, “Add New Barber”.

Di bagian visual style, AI juga sudah ikut menjelaskan: glassmorphism, frosted glass cards, background blur, warna navy dengan aksen cyan/violet, dan rekomendasi font seperti Inter atau Poppins.

Dan ini adalah hasil respon dari AI perlexity.

Design a modern Web Dashboard UI for a Barbershop business admin panel, using Glassmorphism style — semi-transparent panels with blurred background, subtle gradients, and soft drop shadows. The overall aesthetic should feel clean, premium, and easy to navigate.
The main goal is to give the shop owner/admin a clear overview of current operations, customer bookings, and revenue insights.
Layout sections:


##Header Navigation Bar
- Logo and shop name on the left.
- Quick actions: Notifications bell, Settings icon, Profile avatar (owner).

##Overview Cards (Top Summary Row)

- Total Bookings Today
- Active Barbers / Staff on Duty
- Upcoming Appointments
- Daily Revenue / Earnings

##Bookings Overview Section

- Table/List view of today’s appointments.
- Columns: Customer Name, Barber, Service Type, Time, Status (Pending, Confirmed, Completed), Price.
- Action buttons: Edit or Cancel booking.

##Barbers Performance Panel
- Small chart showing number of completed cuts per barber this week.
- Rating summary or customer satisfaction score (per barber).

##Revenue & Insights Section
- Mini line or bar chart of revenue trend (daily or weekly).
- Top 3 popular services (Haircut, Beard trim, Styling, etc.).


##Customer Feedback / Reviews Widget
- Scrolling list of latest customer feedback with rating stars and short comments.

##Upcoming Appointments (Sidebar Widget)
- Compact calendar or “Next 5 Bookings” preview panel.

##Quick Actions Footer or Floating Button

- “Add New Booking”
- “Add New Service”
- “Add New Barber”

##Visual Style:
- Glassmorphism: Frosted glass cards (transparent panels, background blur, and accent gradients).
- Primary colors: navy blue base with soft cyan or violet glow accents.
- Rounded corners, subtle depth, and modern typography (e.g., Inter, Poppins, or Nunito).
- Icons should be minimal and clear.

Responsive design: Adaptable to tablet and desktop view. Mobile can use card stacking layout.

**hasilnya akan berbeda di setiap AI merespon.

Prompt yang di atas, lalu saya masukan ke dalam gemini.google.com dan pilih gemini PRO ( Nano Banana). dan hasilnya yang di buat seperti ini.

cara membuat UI design dengan Nano Banana Pro

Menambahkan Referensi Desain dari Dribbble

Hasilnya yang di berikan cukup baik, dari sisi menampilkan data, namun style saya kurang begitu suka, lalu disini kita bisa adjust dari sisi UInya, secara informasi sudah OK, namun UI, saya ingin menggantinya. Lalu bagimana cara menggantinya. Triknya adalah dengan mencari inspirasi dari dribbble.com dan lalu saya menemukan UI dashoard ini.

Design By Leon Abramovic

Lalu saya menggunakan Prompt di bawah ini agar bisa pindahkan data dari dasain pertama ke desain kedua.

I have a reference style, and I like it. Can you adjust the UI design that you have made and follow the style based on the reference? then use the information from the barbershop dashboard instead of following from reference design

Dengan pendekatan ini:

Struktur dan informasi tetap berasal dari kebutuhan barbershop dashboard kamu.
Style visual (color, depth, shadow, glass effect, layout density) mengikuti referensi yang kamu berikan.

Lalu hasil yang di berikan seperti ini.

Apa yang Perlu Kamu Refine di Figma?

Walaupun output AI sudah kelihatan “oke” secara visual, ini baru starting point, bukan final UI yang siap production. Di Figma, kamu tetap perlu:

Menyesuaikan typography (font family, size, line-height, hierarchy).
Mengatur ulang layout agar konsisten dengan grid, spacing, dan sistem desain kamu.
Menyetel warna agar kontrasnya cukup dan aksesibel.
Menyatukan icon style, ilustrasi, dan gaya visual lain agar konsisten.
Menambah state UX penting (hover, error, empty state, loading).

Intinya, Nano Banana Pro membantu kamu “melihat” kemungkinan desain lebih cepat, tapi keputusan desain tetap kamu yang pegang.

Tips Prompting untuk Nano Banana Pro sebagai UI Designer

Beberapa tips singkat supaya hasil AI lebih dekat dengan ekspektasi kamu:

Selalu jelaskan konteks: jenis bisnis, siapa user utama, tujuan dashboard.
Sebutkan style yang jelas: glassmorphism, neumorphism, minimal, brutalist, dsb.
Jelaskan elemen UI yang wajib ada: cards, tabel, grafik, filter, search, quick actions.
Tambahkan info platform: web desktop, tablet, atau mobile.
Kalau hasil kurang pas, jangan ganti semuanya—refine prompt dengan menambah detail atau menghapus hal yang tidak kamu suka.

Penutup: AI sebagai Partner, Bukan Pengganti

Cara membuat UI design dengan Nano Banana Pro itu bukan soal “biar AI yang mendesain buat kita”, tapi bagaimana kita pakai AI sebagai partner untuk eksplorasi ide lebih cepat. Kamu tetap desainer yang mengerti user, bisnis, dan detail UI/UX; AI hanya bantu memvisualkan ide dalam hitungan menit.

Coba kamu ambil satu project kamu sekarang, pilih satu screen (misalnya dashboard utama), lalu test workflow ini: definisikan struktur di Perplexity, generate visual lewat Nano Banana Pro, dan refine di Figma. Setelah itu, kamu bisa bandingkan: seberapa banyak waktu yang bisa dihemat, dan bagian mana dari proses desain yang jadi terasa lebih ringan.