Cara Membuat Efek Melayang di Figma

Cara Membuat Efek Melayang di Figma

Figma memungkinkan pengguna mendesain dan menyesuaikan banyak fitur. Salah satu fitur yang dapat Anda gunakan untuk meningkatkan pengalaman pengguna adalah efek hover. Efek hover pada tombol berarti Anda akan melihat desain yang berbeda saat Anda menggerakkan kursor ke arah tersebut. Efek ini sendiri dapat bervariasi, dari yang standar yang mengubah warna hingga metode yang lebih rumit seperti mengubah batas atau sorotan.

Baca terus untuk mempelajari cara menambahkan efek hover ke komponen Anda di Figma.

Membuat Efek Melayang pada Tombol

Anda dapat menyiapkan efek melayang jika ingin komponen Anda memiliki interaksi dan transisi tertentu saat Anda mengarahkan kursor ke atasnya. Hasil paling mudah yang dapat Anda buat adalah mengubah warna tombol untuk menyorotnya agar dapat diklik. Inilah cara membuat efek hover pada komponen tombol:

Buat tombolnya.
Gandakan dan pindahkan ke luar bingkai.
Ubah warna tombol duplikat.
Buat komponen dengan mengklik kanan dan memilih”Buat Komponen”dari menu, atau dengan menekan”Ctrl + Alt + K”di keyboard Anda.
Klik tab “Prototype”di sidebar.
Hubungkan kedua komponen tombol.
Di tarik-turun “Rincian Interaksi”, pilih “Saat Melayang.”
Klik opsi”Buka Overlay”di menu yang sama dan setel overlay ke”Manual”.

Saat pengguna mengarahkan kursor ke tombol asli, tombol tersebut akan digantikan oleh tombol dengan warna berbeda. Anda juga dapat mengubah teks yang ditampilkan pada tombol dengan cara yang sama.

Anda harus mengulangi ini untuk setiap tombol.

Membuat Efek Melayang di Perbatasan Tombol

Cara lain memanfaatkan efek hover pada komponen tombol adalah dengan membuat batas yang berubah saat Anda mengarahkan kursor ke atas tombol. Berikut cara melakukannya:

Buat tombol dengan teks apa pun di dalamnya.
Gandakan.
Tambahkan goresan ke duplikat, hapus isiannya, dan ubah warnanya.
Klik tab “Prototipe”di sidebar.
Hubungkan kedua komponen tombol.
Di tarik-turun “Detail Interaksi”, pilih “Saat Melayang.”

Sekarang saat Anda melihat pratinjau efek tombol dan mengarahkan kursor ke atasnya , batas berwarna akan muncul di atasnya.

Menggunakan Plugin Anima di Figma

Cara lain untuk menambahkan efek hover di Figma adalah dengan menggunakan alat desain-ke-kode Anima. Plugin ini memiliki fitur unik yang dapat Anda terapkan saat membuat situs web, ikon aplikasi, atau komponen web lainnya di Figma. Anda hanya perlu memilih komponen mana yang ingin Anda animasikan dan sesuaikan pengaturannya. Berikut cara melakukannya:

Pilih komponen.
Buka plugin Anima.
Ketuk opsi “Efek Arahkan Arah”.
Pilih efek (tumbuh, menyusut, bayangan bercahaya, dan lainnya).
Sesuaikan efek animasi seperti “Durasi”atau “Kurva.”
Ketuk tombol “Pratinjau”untuk melihat efeknya.
Klik “Simpan.”

Fitur lain dari plugin Anime adalah Anda dapat menyesuaikan Transisi CSS. Dengannya, Anda dapat mengontrol kecepatan animasi dan menyesuaikan pengaturannya sesuai preferensi Anda atau membuatnya lebih alami.

Manfaatkan Fitur Efek Hover Figma

Baik desainer profesional atau sebagai pemula, Anda memiliki banyak fitur di Figma untuk membuat desain dan animasi unik untuk komponen, ikon, dan objek Anda. Efek hover memungkinkan Anda mengubah teks atau menambahkan sorotan, warna berbeda, batas berbeda, dan banyak lagi. Mengetahui cara membuat efek ini sangat penting untuk membuat situs web pertama Anda interaktif dan menambahkan sentuhan pribadi padanya.

Efek hover mana yang Anda terapkan pada komponen Anda di Figma? Beri tahu kami di bagian komentar di bawah.

Penafian: Beberapa halaman di situs ini mungkin menyertakan tautan afiliasi. Hal ini tidak mempengaruhi editorial kami dengan cara apa pun.

Kirim Ke Seseorang

Perangkat Hilang