Pada Mei 2020 saya mendapatkan project design UI/UX untuk web aplikasi e-learning. Projectnya cukup besar dan membuat saya lumayan kewalahan.
Ketika saya membagikan link prototype design ke client, mereka meminta saya untuk membuat efek hover pada button. Dengan begitu mereka bisa mengetahui bagaimana interaksi langsung ketika user mengarahkan cursor mereka ke salah satu button yang ada di website tersebut.
Awalnya saya sempat bingung, karena saya belum pernah membuat efek seperti itu. Setelah saya browsing-browsing, syukur alhamdulillah saya mendapatkan panduan dari medium yang ditulis oleh Guus Baggermans.
Efek ini menurut saya sangat berguna untuk diaplikasikan ke design. Karena dengan begitu kita bisa lebih menghidupkan presentasi dari hasil kerja kita serta kita bisa lebih teliti terhadap bagaimana nanti ketika user berinteraksi dengan website atau mobile aplikasi.
Baca Juga : 7 Rekomendasi Font Untuk Design Mobile App
Pada tulisan kali ini saya akan membagikan panduan membuat button hover di Figma. Dengan begitu, anda bisa menerapkan cara ini di design atau project anda selanjutnya.
Cara membuat efek button hover di figma
1. Siapkan Design
Untuk membuat efek button hover di Figma pastikan anda sudah menyiapkan designnya terlebih dahulu.
Kali ini saya akan mencontohkannya dengan design yang sederhana, yaitu tombol subscribe di box newsletter.
Seperti yang anda lihat pada gambar di atas, saya membuat dua design sederhana. Satu untuk user memasukan email mereka, dan satunya lagi pesan sukses bahwa user telah berhasil berlangganan newsletter.
2. Buat komponen tombol
Langkah selanjutnya adalah membuat button yang memiliki warna berbeda dengan button utama.
Silahkan duplikat button utama, pastikan kamu tidak meletakannya di dalam frame. Kemudian ubah warna, misalnya disini saya merubahnya menjadi lebih gelap, lalu klik kanan dan pilih “Create Component”.
Warna yang saya pakai
Main button : #0E9AA7
Second button : #334142
Kamu juga bisa membuat komponen dengan menggunakan shortcut keyboard: Ctrl + Alt + K
3. Prototyping
Berikut langkah-langkah untuk pembuatan prototype efek button hover di figma:
- Setelah masuk di menu prototype, tarik garis interaksi dari button utama ke button hover
- Pada bagian Interaction pilih While Hovering
- Untuk tipe interaksi pilih Open Overlay
- Pilih Manual untuk bagian overlay
- Kemudian tarik garis interaksi dari button hover ke frame selanjutnya, dalam kasus saya frame “Thank You”
Sekarang anda sudah bisa mempraktekannya di design kalian masing-masing. Semoga ini bisa bermanfaat dan membantu anda dalam mendesign UI/UX. Semoga bermanfaat!
