Figma membolehkan pengguna mereka bentuk dan menyesuaikan banyak ciri. Salah satu ciri yang boleh anda gunakan untuk meningkatkan pengalaman pengguna ialah kesan hover. Kesan hover pada butang bermakna anda akan melihat reka bentuk yang berbeza apabila anda menggerakkan kursor anda ke arahnya. Kesan ini sendiri boleh berbeza-beza, daripada yang standard yang menukar warna kepada kaedah yang lebih rumit seperti menukar sempadan atau sorotan.
Teruskan membaca untuk mengetahui cara menambah kesan tuding pada komponen anda dalam Figma.
Mencipta Kesan Hover pada Butang
Anda boleh menyediakan kesan tuding jika anda mahu komponen anda mempunyai interaksi dan peralihan tertentu apabila anda menuding di atasnya. Hasil paling mudah yang boleh anda buat ialah menukar warna butang untuk menyerlahkannya untuk diklik. Beginilah cara anda boleh mencipta kesan tuding pada komponen butang:
- Buat butang.
- Duplikasikannya dan alihkannya ke luar bingkai.
- Tukar warna butang pendua.
- Buat komponen dengan mengklik kanan dan memilih “Buat Komponen” dari menu, atau dengan menekan “Ctrl + Alt + K” pada papan kekunci anda.
- Klik pada tab “Prototaip” di bar sisi.
- Sambungkan dua komponen butang.
- Dalam menu lungsur “Butiran Interaksi”, pilih “Semasa Melayang.”
- Klik pada pilihan “Open Overlay” dalam menu yang sama dan tetapkan tindanan kepada “Manual.”
Apabila pengguna menuding pada butang asal, ia akan digantikan dengan butang dengan warna yang berbeza. Anda juga boleh menukar teks yang ditunjukkan pada butang dengan cara yang sama.
Anda perlu mengulangi ini untuk setiap butang.
Mencipta Kesan Tuding pada Sempadan Butang
Satu lagi cara untuk menggunakan kesan tuding pada komponen butang ialah membuat sempadan yang berubah apabila anda menuding pada butang dengan kursor. Berikut ialah cara anda boleh melakukannya:
- Buat butang dengan sebarang teks di dalamnya.
- Duplikatnya.
- Tambahkan pukulan pada pendua, keluarkan isian dan tukar warna.
- Klik pada tab “Prototaip” di bar sisi.
- Sambungkan dua komponen butang.
- Dalam menu lungsur “Butiran Interaksi”, pilih “Semasa Melayang.”
Sekarang apabila anda pratonton kesan butang dan tuding di atasnya, sempadan berwarna akan muncul padanya.
Menggunakan Pemalam Anima dalam Figma
Satu lagi cara untuk menambah kesan hover dalam Figma ialah dengan menggunakan alat reka bentuk kepada kod Anima. Pemalam ini mempunyai ciri unik yang boleh anda laksanakan semasa membuat tapak web, ikon aplikasi atau komponen web lain dalam Figma. Anda hanya perlu memilih komponen yang ingin anda hidupkan dan laraskan tetapan dengan sewajarnya. Ini adalah cara melakukan ini:
- Pilih komponen.
- Buka pemalam Anima.
- Ketik pilihan “Kesan Hover”.
- Pilih kesan (tumbuh, mengecut, cahaya bayang-bayang dan banyak lagi).
- Sesuaikan kesan animasi seperti “Tempoh” atau “Keluk”.
- Ketik butang “Pratonton” untuk melihat kesannya.
- Klik pada “Simpan.”
Satu lagi ciri pemalam Anime ialah anda boleh menyesuaikan Peralihan CSS. Dengan itu, anda boleh mengawal kelajuan animasi dan melaraskan tetapannya mengikut keutamaan anda atau menjadikannya lebih semula jadi.
Manfaatkan Ciri Kesan Hover Figma
Sama ada pereka profesional atau pemula, anda mempunyai banyak ciri dalam Figma untuk mencipta reka bentuk dan animasi unik untuk komponen, ikon dan objek anda. Kesan tuding membolehkan anda menukar teks atau menambah sorotan, warna berbeza, sempadan berbeza dan banyak lagi. Mengetahui cara mencipta kesan ini adalah sangat penting untuk menjadikan tapak web pertama anda interaktif dan menambah sentuhan peribadi padanya.
Kesan hover yang manakah anda laksanakan pada komponen anda dalam Figma? Beritahu kami di bahagian komen di bawah.