Dalam tahapan pembuatan prototype suatu sistem, pemberian animasi bisa menjadi suatu hal yang dapat dilakukan untuk membuat protoype lebih menarik. Berikut tahapan yang dapat dilakukan untuk membuat animasi pada tombol yang dibuat menggunakan aplikasi FIGMA.
1. Pilih Tombol yang Akan Dianimasikan
Pada jendela projek yang sedang dibuat, silahkan pilih elemen tombol yang ingin dianimasikan.
2. Duplikat Elemen yang Akan Dianimasikan
Silahkan duplikat elemen yang akan dianimasikan, kemudian hasil duplikatnya jadikan satu frame baru dengan cara klik kanan pada elemen yang telah diduplikat, lalu pilih frame selection atau dengan menekan kombinasi tombol ctrl+Alt+G
3. Desain Variasi Pada Tombol
Pada frame yang telah diduplikat, silahkan beri varian desain tombol sesuai keinginan. Misalnya, jika kalian ingin tombol berubah warna ketika cursor diarahkan ke tombol, maka terlebih dahulu kalianmemberi varian warna pada tombol yang telah diduplikat.
4. Buat Prototype
Selanjutnya, kalian dapat membuat prototype animasi dengan Klik pada elemen yang asli kemudian pada side bar kanan Klik prototype lalu tarik panah dari frame asli ke frame duplikat.
5. Atur Trigger dan Aksi
Setelah panah ditarik ke frame duplikat, akan muncul pop up untuk mengatur trigger dan aksi dari tombol. Kalian dapat mengatur tombolnya seperti berikut.
Ubah pengaturan trigger dari On Click menjadi While Hovering. Kemudian untuk navigasi ubah menjadi Open Overlay, animasi ubah menjadi Dissolve dengan kecepatan 150ms. Untuk Overlay Setting kalian dapat pilih manual lalu atur posisi tombol sesuai dengan posisi tombol asli.
6. Uji Prototype
Untuk menguji prototype, kalian dapat menekan tombol present di pojok kanan atas sidebar sebelah kanan.
SEBELUM
SESUDAH
Sekian tutorial kali ini, semoga bermanfaat.
Thanks & have a nice day 😉
