Desain ui ux aplikasi menggunakan figma untuk transaksi

Desain ui ux aplikasi menggunakan figma untuk pasar Indonesia perlu memprioritaskan alur transaksi yang akrab: pembayaran QRIS, transfer bank, dan top-up e-wallet. Buat data contoh dengan nominal Rp50.000, rekening BCA atau BRI, lalu prototipekan status pembayaran seperti diproses, berhasil, dan gagal agar setiap layar dapat diuji sebagai satu perjalanan pengguna.

Poin-poin utama

• •Gunakan format nominal Indonesia yang konsisten, misalnya Rp50.000, pada saldo, input nominal, ringkasan, dan bukti transaksi.
• •Rancang QRIS sebagai alur berstatus, bukan hanya layar kode: pengguna harus memahami apakah pembayaran masih diproses, berhasil, gagal, atau melewati batas waktu.
• •Pakai BCA, BRI, Mandiri, dan BNI sebagai data contoh transfer lokal agar pilihan bank dan detail rekening terasa relevan saat pengujian.
• •Susun komponen, varian, dan prototipe interaktif di Figma setelah arah layar awal dibuat di floow.design.

Isi halaman ini

• •Mulai dari alur transaksi, bukan dari kartu UI
• •Bangun fondasi file Figma yang mudah diprototipekan
• •Rancang QRIS sebagai rangkaian status yang jelas
• •Atur nominal IDR dan alur transfer serta top-up

Mulai dari alur transaksi, bukan dari kartu UI

Untuk desain aplikasi mobile Figma, tetapkan satu tugas utama sebelum menggambar komponen: pengguna ingin membayar, mengirim uang, atau mengisi saldo. Buat peta alur pendek untuk masing-masing tugas.

Contoh alur QRIS: pilih bayar QRIS → pindai atau tampilkan kode → konfirmasi nominal → pembayaran diproses → berhasil atau gagal. Pada konteks merchant Indonesia, QRIS memiliki status transaksi yang perlu dimodelkan di prototipe. Jangan berhenti pada layar kode QR; siapkan layar status agar kasir dan pelanggan tidak menebak apakah pembayaran sudah diterima.

Untuk transfer, alurnya dapat berupa pilih bank → masukkan rekening → isi nominal → tinjau transaksi → masukkan PIN → bukti transfer. Tambahkan keadaan kosong, validasi nomor rekening, nominal melebihi saldo, koneksi bermasalah, dan transaksi tertunda. Keadaan ini sering menentukan apakah UX transaksi dapat dipahami ketika diuji.

Buat konsep layar lebih dahulu dengan floow.design, lalu ekspor arahnya untuk diprototipekan di Figma. Dengan cara ini, Figma dipakai untuk merapikan sistem komponen dan menguji perpindahan layar, bukan untuk mencari struktur produk dari nol.

Bangun fondasi file Figma yang mudah diprototipekan

Pisahkan halaman file menjadi Fondasi, Komponen, Layar, dan Prototipe. Di halaman Fondasi, tetapkan warna status, tipografi, grid, radius, dan jarak. Warna status sebaiknya tidak menjadi satu-satunya penanda: sertakan ikon dan teks seperti “Pembayaran berhasil” atau “Pembayaran sedang diproses”.

Di halaman Komponen, buat komponen untuk kolom nominal, baris rekening tujuan, pilihan bank, tombol utama, lembar bawah, notifikasi, dan kartu bukti transaksi. Gunakan varian untuk kondisi normal, terpilih, tidak aktif, galat, dan memuat. Dengan varian, satu perubahan label atau ukuran dapat diterapkan ke banyak layar tanpa pengeditan manual.

Untuk contoh desain aplikasi figma, buat layar transfer dengan daftar bank lokal. BCA, BRI, Mandiri, dan BNI dapat dipakai sebagai data contoh pada pilihan bank, lalu gunakan nama penerima fiktif dan nomor rekening yang tidak menyerupai data sungguhan. Hindari menyalin identitas visual bank jika produk Anda tidak memiliki izin; teks nama bank sudah cukup untuk menguji struktur pilihan dan pencarian.

Beri nama layer berdasarkan fungsi, misalnya Transfer/Review, QRIS/Processing, dan TopUp/Success. Nama ini mempercepat pemasangan koneksi prototipe dan handoff ke tim pengembang.

Rancang QRIS sebagai rangkaian status yang jelas

Pembayaran QRIS perlu diperlakukan sebagai proses dengan hasil yang bisa berubah. Bank Indonesia menjelaskan QRIS sebagai standar kode QR pembayaran Indonesia; dalam produk merchant, layar prototipe perlu menjawab pertanyaan operasional: apakah kode masih aktif, apakah pembayaran diterima, dan apa tindakan berikutnya.

Mulai dengan layar pemindaian atau kode QR. Tampilkan nama merchant, nominal bila transaksi nominal tetap, serta tombol bantuan atau batal. Setelah pengguna menekan bayar, arahkan ke layar Pembayaran diproses dengan indikator aktivitas dan keterangan bahwa status sedang diperiksa. Jangan langsung memindahkan pengguna ke halaman sukses hanya karena tombol ditekan.

Siapkan sedikitnya empat varian status: diproses, berhasil, gagal, dan melewati batas waktu. Pada status berhasil, tampilkan nominal, nama merchant, waktu, dan ID referensi sebagai placeholder. Pada status gagal atau melewati batas waktu, jelaskan tindakan yang dapat dilakukan: coba lagi, kembali ke pemindaian, atau hubungi merchant. Pada sisi merchant, buat pula status menunggu pembayaran dan pembayaran diterima agar demonstrasi alur tidak hanya berpusat pada pelanggan.

Di Figma, hubungkan tombol bayar ke varian diproses dengan Smart Animate, lalu buat tombol simulasi untuk berpindah ke berhasil atau gagal. Ini cukup untuk uji kegunaan tanpa mengklaim ada pemrosesan pembayaran nyata.

Atur nominal IDR dan alur transfer serta top-up

Gunakan nominal prototipe dalam IDR sejak layar pertama. Misalnya, saldo Rp250.000, nominal transfer Rp50.000, dan biaya administrasi bila memang relevan bagi skenario produk. Konsistensi ini penting: jangan campurkan IDR 50,000, Rp 50.000, dan 50.000 Rupiah dalam satu alur.

Untuk komponen nominal Figma, buat satu teks contoh Rp50.000 lalu jadikan bagian dari komponen input. Varian dapat mencakup kosong, terisi, fokus, galat, dan saldo tidak cukup. Pada layar tinjauan, ulangi nominal dengan hirarki terbesar; nama penerima, bank, dan nomor rekening menjadi informasi pendukung. Hal ini membantu pengguna mendeteksi kesalahan sebelum konfirmasi.

Top-up e-wallet juga memerlukan langkah yang eksplisit: pilih e-wallet → pilih atau masukkan nominal → pilih sumber dana → tinjau → status transaksi. Bedakan top-up yang masih diproses dari yang selesai. Jika Anda menggunakan data contoh, gunakan label generik untuk e-wallet kecuali ada kebutuhan dan izin untuk menampilkan merek tertentu.

Uji prototipe pada bingkai perangkat seluler yang sesuai. Pastikan tombol konfirmasi mudah dijangkau, angka tidak terpotong pada layar kecil, dan bukti transaksi dapat kembali ke beranda tanpa membuat pengguna kehilangan konteks.

Data contoh lokal untuk isi layar prototipe transaksi

Kesalahan yang sering terjadi

Hanya membuat layar kode QR dan halaman sukses.

Tambahkan status diproses, gagal, dan melewati batas waktu. Sertakan tindakan lanjutan yang jelas pada tiap status.

Menulis nominal dengan format berbeda di setiap layar.

Tentukan satu pola, misalnya Rp50.000, lalu gunakan dalam komponen input, ringkasan, riwayat, dan bukti transaksi.

Membuat pilihan bank sebagai daftar teks statis.

Jadikan baris bank sebagai komponen dengan varian terpilih, pencarian, dan keadaan kosong agar alur transfer dapat diuji.

Menghubungkan prototipe langsung dari tombol bayar ke sukses.

Sisipkan layar atau varian pembayaran diproses sebelum hasil transaksi untuk menunjukkan ketidakpastian proses pembayaran.

Pertanyaan yang sering diajukan

Bagaimana membuat prototipe pembayaran QRIS di Figma?

Buat rangkaian layar QRIS di Figma: pemindaian atau kode QR, konfirmasi nominal, pembayaran diproses, lalu hasil berhasil, gagal, atau melewati batas waktu. Hubungkan tombol dengan prototipe interaktif dan gunakan varian komponen status. Untuk konteks merchant Indonesia, tampilkan nama merchant, nominal seperti Rp50.000, serta tindakan coba lagi atau kembali ke pemindaian.

Bank apa yang bisa dipakai sebagai data contoh lokal?

BCA, BRI, Mandiri, dan BNI dapat dipakai sebagai data contoh lokal pada prototipe transfer bank di Figma. Gunakan nama penerima fiktif dan nomor rekening placeholder yang tidak menyerupai data pribadi. Nama bank membantu menguji pencarian, pemilihan tujuan, ringkasan transfer, dan tampilan bukti transaksi tanpa memakai data pengguna nyata.

Bagaimana membuat format IDR di komponen Figma?

Buat komponen nominal dengan teks berformat Rp50.000, lalu sediakan varian kosong, fokus, terisi, galat, dan saldo tidak cukup. Pakai pemisah ribuan titik serta awalan Rp secara konsisten pada input, ringkasan, riwayat, dan bukti transaksi. Jika prototipe hanya untuk demonstrasi, nilai nominal dapat diganti manual pada setiap instance komponen.

Mengapa status transaksi perlu ada dalam prototipe QRIS?

Status transaksi perlu ada dalam prototipe QRIS karena pengguna dan merchant harus mengetahui apakah pembayaran masih diproses, sudah berhasil, gagal, atau melewati batas waktu. Layar status mencegah asumsi bahwa pembayaran berhasil hanya karena pengguna sudah menekan tombol bayar. Di Figma, status ini dapat diuji sebagai varian tanpa integrasi pembayaran nyata.

Langkah selanjutnya

Prototipe transaksi yang baik tidak dinilai dari banyaknya layar, melainkan dari kejelasan keputusan pengguna pada setiap status. Mulai dari konsep di floow.design, kemudian gunakan Figma untuk membangun komponen, format Rp50.000, alur transfer bank lokal, top-up e-wallet, dan status QRIS yang dapat diuji.

---

Rancang layarnya terlebih dahulu

Jelaskan aplikasi Anda dengan bahasa sederhana, lalu floow.design akan membuatkan layar iOS dan Android yang siap Anda sempurnakan dan serahkan ke tim pengembang.

Mulai desain gratis →

---

Sumber

• •Bank Indonesia — QRIS
• •Figma Help Center — Prototyping
• •Figma Help Center — Components and variants