Skip to main content
Saat ini Anda telah memiliki desain mockup yang sudah keren. Namun, pada tahap selanjutnya, Anda akan membuat sesuatu yang jauh lebih keren, yaitu Prototype. Untuk Anda yang lupa dengan apa itu Prototype, mari kita ingat kembali pengertiannya. Prototype adalah rancangan desain yang dapat diuji coba berdasarkan ide yang sudah dibuat. Prototipe ini diharapkan dapat mendemonstrasikan bagaimana alur dan experience dari produk yang akan dibuat. Pada tahap ini, kita akan menambahkan aksi pada desain seperti scroll maupun tap untuk bisa berpindah antar halaman. Sehingga, desain yang Anda buat akan benar-benar seperti produk aslinya. Keren, bukan? Lalu bagaimana caranya? Kita akan menggunakan tool yang sama, yaitu Figma. Berikut ini adalah langkah-langkahnya:

​
Menambahkan Interaksi Tap

  1. Buka Project Mockup Anda yang sudah berisi berbagai macam halaman. Anda juga bisa menggunakan project aplikasi kedai kopi berikut sebagai latihan:
    Mockup Aplikasi Pemesanan Kopi
  2. Klik tab Prototype pada panel sebelah kiri atas dan pilih Device yang diinginkan.
    dos:afb8572829429ac9055782461001798f20211007144231.jpeg
  3. Pada mode ini, Anda dapat menambahkan interaksi pada elemen apa pun yang Anda pilih. Caranya yaitu pilih elemen yang ingin diberikan interaksi → drag dari lingkaran yang ada di sebelah kanan ke arah halaman tujuan.
    dos:a05aae90a02e9632c3a60b4050979f8320211007144740.gif
    Jika Anda lihat pada pengaturan Interaction Detail, terdapat jenis aksi Navigate to yang artinya berpindah ke halaman lain.
  4. Lakukan hal yang sama pada halaman lainnya seperti ini:
    dos:8af062e5efc5dbb195c738c0d2b4a71720211007144232.jpeg
  5. Untuk menjalankan prototype, klik ikon Present yang ada di sebelah kanan atas.dos:b501d55a274feb325151cf9e50ad717320211007144231.jpeg
    Setelah ditekan akan muncul tab baru yang berisi Prototype yang bisa Anda uji coba. Berikut ini adalah hasil jadi dari prototype tersebut:
    dos:7197ba53ab534058e95f53b1f44340e820211007144948.gif
    Seperti yang Anda lihat, apabila Anda menekan bagian yang tidak ada interaksinya, ia akan memberi tahu Anda bagian mana yang bisa ditekan.
    dos:334ed505604b41ae23f48e5e2100340c20211007144232.jpeg

​
Memunculkan Pop Up dengan Menggunakan Overlay

  1. Jika dilihat, ada yang aneh pada bagian pop up sukses ketika selesai mengonfirmasi makanan seperti ini:
    dos:558dc1c00f73786d03e0552a6ef69f0e20211007144232.jpeg
    Seharusnya halaman pop up tampil di atas halaman sebelumnya. Untuk membuat interaksi seperti itu, kita akan menggunakan Overlay. Ia adalah penambahan halaman lain di atas halaman yang sudah ada.
  2. Klik garis yang menghubungkan halaman Konfirmasi Pesanan dan Pop up Success. Kemudian, ubah properti aksi yang sebelumnya Navigate to menjadi Open overlay. Centang juga bagian Add background behind overlay untuk memberikan warna background transparan.
    dos:49bc104b20928dd94f936e51c8156db820211007144232.jpeg
    Pengaturan di atas juga sudah menunjukkan lokasi pop up ada di tengah (Centered) sesuai dengan keinginan, tidak di samping maupun bawah.
  3. Jalankan kembali prototype Anda dan lihat hasilnya.
    dos:07037af468881e6839eff6858ef6a6ab20211007144232.jpeg
    Keren ya! Selain aksi Navigate to dan Open overlay, juga terdapat aksi Scroll to untuk menggeser halaman ke titik tertentu dan Swap overlay untuk mengganti overlay. Aksi lain yang sering digunakan adalah Back untuk navigasi ke halaman sebelumnya. Berikut ini adalah contohnya:dos:4332d5def1426e27852a4dc122f05fad20211007144233.jpeg

​
Membuat Lokasi Bottom Navigation Tetap

  1. Jika Anda perhatikan, menu Navigation Bottom ada di bawah, sehingga Anda harus scroll layar ke paling bawah dulu ini melihat menu. Padahal pada kenyataannya, menu ini seharusnya selalu terlihat.
    dos:8b67fc78e060821c8ba45af6e2848d0220211007153127.gif
  2. Lalu, bagaimana cara untuk mengatasinya? Tenang, berikut ini adalah caranya. Kembali ke tab Design dan pilih elemen Bottom Navigation. Selanjutnya, ubah Constraint menjadi Left dan Bottom serta beri tanda centang pada properti Fix position when scrolling pada properti Constraint and resizing.
    dos:87143c5a985069af9d832fe188c98bf520211007144234.jpeg
  3. Jalankan kembali prototype dan lihat hasilnya.
    dos:787d11691c3ea10baaa1cb25af0f055420211007153344.gif