Desain aplikasi mobile figma untuk alur lokal

Desain aplikasi mobile figma untuk alur Indonesia perlu memakai nominal Rupiah seperti Rp25.000, pilihan metode lokal, dan state pembayaran yang jelas. Buat komponen pembayaran QRIS—standar QR code pembayaran nasional dari Bank Indonesia—serta varian e-wallet untuk GoPay, DANA, OVO, dan LinkAja agar layar mobile siap diuji.

Poin-poin utama

• •Gunakan token nominal dengan simbol Rp dan pemisah ribuan titik, misalnya Rp25.000.
• •Pisahkan alur bayar QRIS menjadi state memilih metode, menampilkan QR, menunggu pembayaran, berhasil, dan gagal atau kedaluwarsa.
• •Jadikan GoPay, DANA, OVO, dan LinkAja sebagai referensi cakupan state UI e-wallet, bukan sekadar daftar logo.
• •Bangun komponen dengan varian dan properti di Figma agar satu perubahan nominal atau status dapat dipakai ulang di banyak layar.

Isi halaman ini

• •Mulai dari fondasi nominal dan metode pembayaran
• •Rancang alur QRIS sebagai rangkaian state, bukan satu layar
• •Bangun komponen e-wallet yang mudah diuji dan dipelihara
• •Checklist sebelum membagikan prototype

Mulai dari fondasi nominal dan metode pembayaran

Dalam desain ui ux aplikasi menggunakan figma, nominal harus diperlakukan sebagai data, bukan teks yang diketik ulang di setiap layar. Buat satu komponen Price dengan properti nilai, ukuran teks, dan konteks: harga produk, total tagihan, biaya layanan, atau jumlah yang harus dibayar. Terapkan format Indonesia secara konsisten: simbol Rp di depan angka dan pemisah ribuan berupa titik, misalnya Rp25.000, bukan Rp 25,000 atau 25.000 IDR.

Di halaman checkout, susun metode pembayaran sebagai komponen baris yang memiliki varian terpilih, tidak terpilih, tersedia, dan tidak tersedia. Kelompokkan QRIS terpisah dari e-wallet agar pengguna memahami perbedaan cara bayar. Untuk e-wallet, siapkan slot ikon, nama metode, saldo atau keterangan bila memang tersedia, serta indikator pilihan. GoPay, DANA, OVO, dan LinkAja dapat dijadikan referensi untuk memetakan kebutuhan state UI lokal.

Jangan memasukkan angka statis ke frame final. Simpan contoh nominal seperti Rp25.000, Rp100.000, dan Rp1.250.000 sebagai konten uji agar panjang teks, perataan, dan pembulatan total tetap terbaca pada layar mobile.

Rancang alur QRIS sebagai rangkaian state, bukan satu layar

QRIS adalah standar QR code pembayaran nasional dari Bank Indonesia. Dalam prototipe mobile, jangan berhenti pada layar yang hanya memajang pola QR. Pengguna tetap membutuhkan konteks transaksi, instruksi, waktu atau indikator validitas bila produk Anda memilikinya, serta jalan keluar ketika pembayaran belum terkonfirmasi.

Buat komponen QRIS Payment dengan varian berikut: memuat, QR siap dipindai, menunggu pembayaran, berhasil, gagal, dan kedaluwarsa. Pada state QR siap dipindai, tampilkan merchant atau tujuan pembayaran, nominal seperti Rp25.000, dan tombol kembali ke metode pembayaran. Pada state menunggu, pertahankan nominal serta identitas transaksi agar pengguna tidak ragu apakah pembayaran sedang diproses. State berhasil perlu memuat status, total, dan tindakan lanjut yang relevan; state gagal atau kedaluwarsa perlu menjelaskan tindakan berikutnya tanpa menyalahkan pengguna.

Gunakan Auto Layout untuk area informasi transaksi dan tombol aksi bawah. Dengan begitu, layar tetap stabil saat nominal berubah dari Rp25.000 menjadi Rp1.250.000 atau ketika pesan status membutuhkan dua baris.

Bangun komponen e-wallet yang mudah diuji dan dipelihara

Untuk contoh desain aplikasi mobile figma, buat satu komponen dasar Payment Method Row, lalu turunkan properti: nama layanan, ikon, status ketersediaan, status pilihan, pesan bantuan, dan chevron atau indikator radio. Dengan struktur ini, GoPay, DANA, OVO, dan LinkAja tidak perlu dibuat sebagai empat layout terpisah yang sulit dipelihara.

Definisikan state yang benar-benar memengaruhi keputusan pengguna: metode belum dipilih, dipilih, koneksi atau otorisasi sedang diproses, pembayaran berhasil, pembayaran ditolak, dan pengguna membatalkan. Hindari mengandalkan perubahan warna saja. Tambahkan label status, ikon pendukung, dan tombol yang sesuai. Misalnya, pada pembayaran ditolak, tampilkan pilihan mencoba lagi atau kembali memilih metode; pada pembatalan, kembalikan pengguna ke checkout dengan metode yang masih dapat dipilih.

Hubungkan varian tersebut di Prototype Figma untuk menguji urutan interaksi dengan tim produk dan riset. Setelah alur disetujui, masukkan brief Figma Anda ke floow.design untuk menghasilkan set layar mobile dengan state pembayaran lokal. Brief yang baik menyebut format Rp, QRIS, metode e-wallet, serta daftar state yang harus dibuat.

Checklist sebelum membagikan prototype

Sebelum prototype dikirim, periksa setiap layar pembayaran pada ukuran perangkat mobile yang menjadi target produk. Pastikan nominal tidak terpotong, terutama untuk angka besar; simbol Rp harus selalu menempel pada nilai seperti Rp25.000. Uji juga perpindahan dari checkout ke QRIS, lalu ke status menunggu dan hasil pembayaran.

Di Figma, beri nama varian berdasarkan makna produk, misalnya status=menunggu atau status=gagal, bukan nama visual seperti kuning dan merah. Nama semacam itu membuat handoff ke pengembang lebih jelas ketika warna status berubah. Sertakan catatan singkat untuk kondisi yang belum diputuskan, seperti apakah pengguna dapat mengganti metode saat proses pembayaran berjalan.

Terakhir, cek aksesibilitas dasar: teks status tidak hanya dibedakan lewat warna, tombol utama mudah dijangkau ibu jari, dan informasi transaksi tetap terbaca ketika konten bertambah. Prototype yang baik bukan yang memiliki paling banyak frame, melainkan yang memperlihatkan keputusan, kegagalan, dan pemulihan dengan jelas.

Referensi komponen pembayaran lokal untuk file Figma

Kesalahan yang sering terjadi

Menulis nominal dengan format campuran seperti IDR 25,000 pada layar berbahasa Indonesia.

Gunakan token format Rupiah yang konsisten: Rp25.000. Uji token itu pada nominal pendek dan panjang.

Membuat QRIS hanya sebagai gambar QR tanpa state proses dan hasil.

Rancang varian memuat, QR siap dipindai, menunggu pembayaran, berhasil, gagal, dan kedaluwarsa.

Menduplikasi frame untuk tiap e-wallet dan tiap status.

Gunakan satu komponen dasar dengan properti nama layanan dan varian status untuk GoPay, DANA, OVO, serta LinkAja.

Mengandalkan warna hijau atau merah saja untuk hasil pembayaran.

Tambahkan teks status, ikon, nominal transaksi, dan tindakan lanjut yang eksplisit.

Pertanyaan yang sering diajukan

Bagaimana membuat format Rupiah di Figma?

Buat komponen teks nominal di Figma dengan aturan konten tetap: simbol Rp ditempatkan sebelum angka dan ribuan memakai titik, misalnya Rp25.000. Simpan nominal sebagai contoh konten atau variabel teks bila alur kerja tim mendukungnya. Uji juga nilai panjang seperti Rp1.250.000 agar Auto Layout, perataan, dan ukuran huruf tidak rusak.

Komponen apa yang dibutuhkan untuk pembayaran QRIS?

Komponen pembayaran QRIS di aplikasi mobile setidaknya membutuhkan ringkasan merchant atau tujuan, nominal Rupiah, area QR, instruksi pemindaian, dan tombol kembali. Karena QRIS adalah standar QR code pembayaran nasional dari Bank Indonesia, tambahkan varian state memuat, QR siap dipindai, menunggu pembayaran, berhasil, gagal, dan kedaluwarsa untuk menguji alur lengkap.

Bagaimana membuat varian status pembayaran e-wallet?

Buat satu komponen metode pembayaran e-wallet dengan properti nama, ikon, status pilihan, dan pesan bantuan. Sediakan varian tidak dipilih, dipilih, diproses, berhasil, ditolak, serta dibatalkan. Terapkan struktur yang sama untuk GoPay, DANA, OVO, dan LinkAja agar perubahan layout atau status dapat diperbarui dari satu komponen Figma.

Apakah QRIS dan e-wallet perlu ditampilkan dalam kelompok berbeda?

Ya, QRIS dan e-wallet sebaiknya dikelompokkan berbeda pada layar metode pembayaran karena cara pengguna menyelesaikan transaksi tidak sama. QRIS mengarahkan pengguna untuk memindai atau menggunakan QR dalam alur pembayaran, sedangkan GoPay, DANA, OVO, dan LinkAja dapat ditampilkan sebagai pilihan e-wallet dengan state pemilihan dan otorisasi masing-masing.

Langkah selanjutnya

Mulailah dari komponen nominal Rp, lalu petakan state QRIS dan e-wallet sebelum memperindah layar. File Figma yang memakai varian status akan lebih cepat diuji, lebih mudah diubah, dan lebih siap untuk handoff. Masukkan brief Figma Anda ke floow.design untuk menghasilkan set layar mobile dengan state pembayaran lokal.

---

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 — Variants
• •Google Play — GoPay
• •Google Play — DANA
• •Google Play — OVO