Tutorial Figma — Pindah Halaman
Hai. Kali ini kita akan belajar bareng tentang Prototyping, kita akan belajar cara pindah antar halaman menggunakan Figma.
Intro
Didalam dunia UI/UX ada istilah prototype. Prototype ini sangat penting untuk diketahui oleh UI/UX Designer, kenapa sangat penting? karena prototype sendiri selain untuk menguji jalan nya aplikasi sebelum di develop, prototype juga bisa sebagai bahan untuk demo ke klien.
Prototype ada dua metode, yaitu:
- Paper Prototyping, di dalam metode ini kertas menjadi alat penting, dimana metode ini menggunakan kertas sebagai wadah untuk desain kita. Biasanya butuh 1 kertas untuk 1 desain halaman, jadi untuk melakukan perpindahan halaman dengan cara mengganti kertas tersebut
- Digital Prototyping, metode ini tidak jauh beda dengan Paper Prototyping, bedanya hanya di cara mengaplikasikan desain kita tidak menggunakan kertas, melainkan sudah dengan Tools yang memang bisa di gunakan untuk melakukan prototype. Ada beberapa Tools yang mendukung untuk melakukan prototyping yaitu: Zeplin, Invision, Figma, Adobe XD, dll.
Untuk lebih jelasnya tentang apa itu prototyping, saya menyarankan untuk membaca artikel dari mas Dwinawan yang berjudul “Selalu Uji Designmu dengan Prototyping”
Oke, kali ini kita akan belajar Digital Prototyping menggunakan Figma, kita coba step by step ya biar mudah untuk dipahami.
1. Buka project yang akan kita aplikasikan ke prototyping
Pastikan page yang akan kita aplikasikan terbentuk dari frame yang berbeda, karena prototype di figma membutuhkan frame agar bisa berjalan.
2. Pindah ke menu “Prototyping”
Menu nya terletak di bagian atas sebelah kanan.
Nah disini nantinya proses prototyping akan berjalan, kita bisa memilih template device, merubah warna background dan menentukan mulai dari halaman mana prototyping akan berjalan.
3. Pilih Point dan Arahkan
Point disini biasanya berada disebelah kanan dari Item, bentuknya lingkaran warna putih.
Kita berasumsi bahwa ketika menekan tombol start yang berada dihalaman Landing Page akan berpindah ke halaman Dashboard, dan saat kita click icon transaction yang ada dibagian bawah akan berpindah ke halaman Transaction.
Oke, kita coba yang pertama, Pilih Point yang ada tombol start, kita tarik dan arahkan ke halaman Dashboard. Seperti gambar dibawah ini.
Yang kedua, prosesnya sama, kita pilih Point yang ada pada icon Transaction yang ada dibagian bawah halaman dashboard, kita tarik dan arahkan ke halaman Transaction. Seperti gambar dibawah ini.
4. Custom Prototype
Setelah kita point untuk perpindahan halaman, kita bisa custom prototype agar sesuai dengan yang kita inginkan, mulai dari interaksi, Destinasi sampai Transisi (tipe perpindahan, durasi dan arah)
Oke disini kita coba dengan spesifikasi :
- Interaction : On click
Jadi, perpindahan halaman akan berjalan saat kita menekan point tersebut - Destination : Transaction Page
Jadi, tujuan saat kita menekan point tersebut akan mengarah ke halaman Transaksi. - Behavior : Slide
Jadi, ketika berpindah dari halaman landing page ke halaman transaksi akan menggunakan tipe slide. - Duration : 300ms
Jadi, ketika berpindah dari halaman landing page ke halaman transaksi akan memakan waktu 300ms. - Slide : ←
Jadi, ketika saat proses slide perpindahan halaman akan bergerak dari kanan ke kiri.
5. Play !
Kita sampai di step terakhir yaitu mencoba prototype dengan spesifikasi yang sudah kita tentukan. Tekan tombol Present yang berada di sebeh atas.
Maka secara otomatis akan diarahkan ke halaman baru, dimana halaman ini dikhususkan untuk mencoba hasil dari prototype.
Okey selamat mencoba, Semoga Bermanfaat :)
