Dalam proses pembuatan website atau aplikasi, desain tidak selalu langsung diwujudkan menjadi program yang bisa digunakan. Sebelum masuk ke tahap coding, desainer biasanya membuat rancangan dan simulasi interaksi terlebih dahulu. Salah satu cara yang paling praktis adalah menggunakan prototype UI/UX.
Dengan prototype, kita dapat melihat gambaran bagaimana sebuah website atau aplikasi akan bekerja sebelum benar-benar dikembangkan. Bahkan, kita bisa mencoba perpindahan halaman, menekan tombol, membuka menu, hingga melakukan simulasi alur tertentu.
Salah satu tools yang banyak digunakan untuk kebutuhan tersebut adalah Figma. Tools ini cukup ramah untuk pemula dan menyediakan berbagai fitur yang mendukung proses UI/UX Design.
Lalu, bagaimana cara membuat prototype UI/UX dengan Figma? Mari ikuti panduan berikut dari awal sampai prototype siap diuji.
Apa Itu Prototype UI/UX?
Prototype UI/UX adalah rancangan interaktif yang digunakan untuk mensimulasikan bagaimana pengguna berinteraksi dengan sebuah website atau aplikasi.
Berbeda dengan desain statis yang hanya menampilkan tampilan halaman, prototype memungkinkan kita membuat hubungan antarhalaman.
Contohnya:
Halaman Login → Dashboard → Detail Produk → Keranjang → Checkout
Dengan prototype, kita dapat mencoba alur tersebut seolah-olah sedang menggunakan aplikasi sungguhan.
Prototype juga dapat digunakan untuk mengetahui apakah navigasi dan alur yang dirancang sudah mudah dipahami sebelum developer mulai melakukan coding.
Apa Itu Figma?
Figma adalah tools desain berbasis digital yang dapat digunakan untuk membuat berbagai kebutuhan desain, termasuk UI Design, wireframe, mockup, dan prototype.
Figma banyak digunakan dalam proses UI/UX karena memungkinkan desainer membuat desain sekaligus menghubungkan antarhalaman untuk menghasilkan prototype interaktif.
Beberapa hal yang dapat dilakukan di Figma antara lain:
- Membuat wireframe.
- Mendesain interface website.
- Mendesain aplikasi mobile.
- Membuat prototype interaktif.
- Membuat komponen UI.
- Berkolaborasi dalam satu file.
- Memberikan komentar pada desain.
- Membagikan prototype untuk pengujian.
Bagi pemula yang ingin belajar UI/UX Design, Figma bisa menjadi salah satu tools yang menarik untuk dipelajari.
Mengapa Prototype UI/UX Penting?
Sebelum masuk ke tutorial, penting untuk memahami mengapa prototype diperlukan.
1. Memvisualisasikan Ide
Ide yang masih berupa gambaran di kepala dapat divisualisasikan menjadi desain yang lebih nyata.
2. Menguji Alur Pengguna
Prototype membantu melihat apakah pengguna dapat berpindah dari satu halaman ke halaman lain dengan mudah.
3. Menemukan Masalah Lebih Awal
Kesalahan navigasi atau alur dapat ditemukan sebelum website atau aplikasi masuk ke tahap pengembangan.
4. Memudahkan Komunikasi dengan Developer
Prototype dapat membantu developer memahami bagaimana tampilan dan interaksi yang diinginkan.
5. Menghemat Waktu Pengembangan
Menemukan kesalahan saat masih berada pada tahap desain biasanya lebih mudah dibandingkan memperbaikinya setelah aplikasi selesai dibuat.
Cara Membuat Prototype UI/UX dengan Figma
Sekarang kita masuk ke bagian utama, yaitu cara membuat prototype UI/UX dengan Figma.
Untuk latihan, kita akan membuat prototype sederhana berupa aplikasi atau website dengan beberapa halaman.
1. Buat Akun dan Buka Figma
Langkah pertama adalah membuka Figma dan masuk menggunakan akun yang tersedia.
Setelah berhasil masuk, buat file desain baru.
Kamu akan melihat area kerja atau canvas yang menjadi tempat untuk membuat desain.
Jika masih pemula, jangan khawatir dengan banyaknya menu. Untuk membuat prototype sederhana, kita hanya perlu memahami beberapa fitur utama terlebih dahulu.
2. Tentukan Ide dan Tujuan Prototype
Sebelum membuat desain, tentukan terlebih dahulu apa yang ingin dibuat.
Misalnya kita ingin membuat prototype website toko komputer.
Tentukan halaman yang diperlukan, seperti:
- Halaman Home.
- Halaman Produk.
- Halaman Detail Produk.
- Halaman Keranjang.
- Halaman Checkout.
Tujuannya adalah membuat pengguna dapat memilih produk hingga menuju halaman checkout.
Dengan menentukan alur sejak awal, proses pembuatan prototype akan menjadi lebih terarah.
3. Buat Frame
Di Figma, halaman desain biasanya dibuat menggunakan Frame.
Frame dapat digunakan sebagai representasi layar website atau aplikasi.
Untuk membuatnya:
- Pilih tool Frame.
- Pilih ukuran layar yang sesuai.
- Buat frame untuk halaman pertama.
- Beri nama frame sesuai halaman.
Misalnya:
- Home
- Produk
- Detail Produk
- Keranjang
- Checkout
Jika membuat aplikasi mobile, pilih ukuran frame yang sesuai dengan perangkat yang ingin disimulasikan.
4. Buat Tampilan UI
Setelah frame tersedia, mulai buat tampilan antarmuka.
Tambahkan beberapa elemen seperti:
- Logo.
- Navigation bar.
- Heading.
- Gambar produk.
- Tombol.
- Card.
- Icon.
- Input.
- Footer.
Tidak perlu langsung membuat desain yang sangat kompleks.
Untuk pemula, lebih baik mulai dari desain sederhana sehingga kamu dapat fokus memahami cara kerja prototype.
5. Buat Tombol dan Elemen Interaktif
Setelah tampilan selesai, siapkan elemen yang ingin dibuat interaktif.
Misalnya terdapat tombol:
Lihat Produk
Tombol tersebut nantinya akan diarahkan ke halaman Produk.
Contoh lainnya:
Tambah ke Keranjang → menuju halaman Keranjang.
Checkout → menuju halaman Checkout.
Pada tahap ini, kamu mulai mengubah desain statis menjadi prototype interaktif.
6. Masuk ke Tab Prototype
Di bagian panel kanan Figma, kamu akan menemukan beberapa pilihan seperti Design dan Prototype.
Pilih tab Prototype.
Di sinilah koneksi antarframe dibuat.
Misalnya kita ingin membuat tombol Lihat Produk menuju halaman Produk.
Pilih tombol tersebut, kemudian buat koneksi menuju frame Produk.
Figma akan membuat hubungan antara kedua elemen tersebut.
7. Atur Interaction
Setelah menghubungkan tombol dengan halaman tujuan, kamu dapat menentukan bagaimana interaksi tersebut terjadi.
Beberapa pengaturan yang dapat digunakan antara lain:
- On click – aksi terjadi ketika elemen diklik.
- On drag – aksi terjadi ketika elemen digeser.
- While hovering – aksi terjadi ketika pointer berada di atas elemen.
- After delay – aksi berjalan setelah waktu tertentu.
Untuk prototype sederhana, On click biasanya sudah cukup.
Contohnya:
On click → Navigate to → Produk
Artinya ketika pengguna mengklik tombol, Figma akan berpindah ke halaman Produk.
8. Atur Animation
Figma juga menyediakan pengaturan animasi untuk perpindahan halaman.
Beberapa pilihan animasi dapat membuat prototype terasa lebih natural.
Misalnya:
- Instant.
- Dissolve.
- Smart Animate.
- Move In.
- Move Out.
- Push.
- Slide In.
Untuk pemula, gunakan animasi sederhana terlebih dahulu.
Jangan menggunakan terlalu banyak efek hanya agar prototype terlihat menarik. Animasi sebaiknya membantu memperjelas interaksi, bukan mengganggu pengguna.
9. Hubungkan Semua Halaman
Setelah satu tombol berhasil dibuat, lanjutkan dengan elemen lainnya.
Contohnya:
Home
↓
Klik “Produk”
↓
Produk
↓
Klik salah satu produk
↓
Detail Produk
↓
Klik “Tambah ke Keranjang”
↓
Keranjang
↓
Klik “Checkout”
↓
Checkout
Alur seperti ini disebut user flow.
Dengan menghubungkan setiap halaman, prototype akan terasa seperti aplikasi atau website yang benar-benar dapat digunakan.
10. Tentukan Starting Point
Prototype membutuhkan halaman awal ketika pertama kali dijalankan.
Pilih frame yang ingin dijadikan halaman awal, kemudian atur sebagai starting point.
Misalnya:
Home → Starting Point
Dengan begitu, ketika prototype dijalankan, pengguna akan memulai dari halaman Home.
11. Jalankan Prototype
Setelah semua koneksi selesai, saatnya melakukan pengujian.
Gunakan tombol Present/Play pada Figma untuk menjalankan prototype.
Coba lakukan beberapa aktivitas:
- Klik menu.
- Klik tombol.
- Berpindah halaman.
- Kembali ke halaman sebelumnya.
- Mencoba alur pembelian.
- Menguji form.
Perhatikan apakah semua interaksi berjalan sesuai rencana.
Jika tombol tidak berfungsi atau mengarah ke halaman yang salah, kembali ke mode Prototype dan perbaiki koneksinya.
12. Uji Prototype dengan Pengguna
Prototype akan menjadi lebih bermanfaat jika diuji kepada orang lain.
Misalnya, berikan tugas sederhana:
“Coba cari produk laptop dan masukkan ke keranjang.”
Kemudian perhatikan bagaimana pengguna menjalankan tugas tersebut.
Apakah mereka langsung menemukan menu produk?
Apakah tombolnya mudah ditemukan?
Apakah mereka bingung ketika berpindah halaman?
Dari pengujian tersebut, kamu dapat mengetahui bagian desain yang masih perlu diperbaiki.
Contoh Sederhana Alur Prototype di Figma
Agar lebih mudah dipahami, berikut contoh alur yang dapat kamu gunakan untuk latihan:
Home
↓ Klik “Lihat Produk”
Halaman Produk
↓ Klik salah satu produk
Detail Produk
↓ Klik “Tambah ke Keranjang”
Keranjang
↓ Klik “Checkout”
Checkout
↓ Klik “Bayar”
Pesanan Berhasil
Alur tersebut sudah cukup untuk menjadi latihan pertama membuat prototype UI/UX dengan Figma.
Tips Membuat Prototype Figma yang Baik
Membuat prototype tidak berarti harus membuat desain yang sangat rumit. Justru, prototype yang baik harus fokus pada kebutuhan pengguna.
Berikut beberapa tips yang dapat diterapkan.
Gunakan Navigasi yang Jelas
Pastikan pengguna tahu bagaimana berpindah dari satu halaman ke halaman lain.
Gunakan menu, tombol, dan label yang mudah dipahami.
Jangan Terlalu Banyak Animasi
Animasi dapat mempercantik prototype, tetapi penggunaan berlebihan dapat membuat interaksi terasa mengganggu.
Gunakan animasi ketika memang memberikan manfaat.
Fokus pada User Flow
Sebelum menghubungkan halaman, tentukan terlebih dahulu alur pengguna.
Dengan begitu, prototype tidak hanya terlihat bagus tetapi juga memiliki struktur yang jelas.
Gunakan Komponen yang Konsisten
Jika tombol “Simpan” memiliki desain tertentu, gunakan gaya yang sama pada bagian lain yang memiliki fungsi serupa.
Konsistensi akan membuat interface lebih mudah dipahami.
Uji Prototype Berkali-kali
Jangan hanya mencoba prototype sekali.
Lakukan pengujian berulang untuk menemukan masalah yang mungkin terlewat.
Kesalahan yang Harus Dihindari Saat Membuat Prototype
Ada beberapa kesalahan yang sering dilakukan pemula ketika membuat prototype.
1. Langsung Membuat Desain Tanpa User Flow
Sebaiknya tentukan alur terlebih dahulu agar desain lebih terarah.
2. Terlalu Fokus pada Tampilan
Prototype bukan hanya tentang membuat desain terlihat bagus. Interaksi dan kemudahan penggunaan juga harus diperhatikan.
3. Menghubungkan Tombol Secara Asal
Pastikan setiap tombol mengarah ke halaman yang benar.
4. Tidak Menguji Prototype
Prototype yang tidak diuji berisiko menyimpan masalah yang baru diketahui ketika produk sudah dikembangkan.
5. Membuat Prototype Terlalu Kompleks
Untuk latihan pertama, tidak perlu membuat puluhan halaman. Mulailah dari beberapa halaman dengan alur yang jelas.
Prototype, Wireframe, dan Mockup: Apa Bedanya?
Ketiga istilah ini sering muncul dalam proses UI/UX Design.
| Istilah | Fungsi |
|---|---|
| Wireframe | Menentukan struktur dasar halaman |
| Mockup | Menampilkan desain visual secara lebih lengkap |
| Prototype | Mensimulasikan interaksi dan alur pengguna |
Sederhananya, prosesnya dapat digambarkan seperti:
Wireframe → Mockup → Prototype → Testing → Development
Namun, dalam praktiknya proses desain dapat berjalan secara iteratif dan tidak selalu mengikuti urutan yang benar-benar kaku.
Apakah Figma Cocok untuk Pemula?
Ya, Figma cukup cocok untuk pemula yang ingin belajar UI/UX Design.
Kamu tidak harus langsung menguasai semua fitur yang tersedia. Mulailah dengan memahami beberapa kemampuan dasar:
- Membuat Frame.
- Membuat bentuk dan teks.
- Mengatur layout.
- Membuat komponen sederhana.
- Menggunakan Auto Layout.
- Menghubungkan frame.
- Mengatur prototype.
- Melakukan testing.
Setelah terbiasa, kamu dapat mempelajari fitur Figma lainnya secara bertahap.
Kesimpulan
Cara membuat prototype UI/UX dengan Figma sebenarnya tidak terlalu sulit, terutama jika kamu memulainya dari proyek sederhana.
Kamu hanya perlu menentukan ide, membuat frame, mendesain interface, menghubungkan antarhalaman, mengatur interaction, kemudian menjalankan prototype untuk melakukan pengujian.
Hal terpenting bukan membuat prototype yang penuh efek, tetapi memastikan alur pengguna jelas dan mudah digunakan.
Jika kamu sedang belajar UI/UX Design, cobalah membuat prototype sederhana seperti website sekolah, aplikasi kasir, toko online, perpustakaan, atau sistem informasi. Semakin sering berlatih, semakin mudah kamu memahami bagaimana desain dan pengalaman pengguna saling berkaitan.
Jadi, jangan hanya melihat tutorial. Buka Figma, buat proyek sederhana, dan mulai praktik. Dari satu prototype kecil, kamu bisa mulai membangun kemampuan UI/UX yang lebih kuat.
