Як зробити ефект наведення в Figma

Figma дозволяє користувачам розробляти та налаштовувати багато функцій. Однією з функцій, які можна використовувати для покращення взаємодії з користувачем, є ефект наведення. Ефект наведення курсора на кнопки означає, що ви побачите інший дизайн, коли наведете курсор на них. Цей ефект сам по собі може бути різним: від стандартного, який змінює кольори, до більш складних методів, як-от зміна рамок або відблисків.

Читайте далі, щоб дізнатися, як додати ефект наведення до ваших компонентів у Figma.

Створення ефекту наведення на кнопки

Ви можете налаштувати ефект наведення, якщо хочете, щоб ваш компонент мав певну взаємодію та перехід, коли ви наводите на нього курсор. Найпростіший результат, який ви можете створити, це змінити колір кнопки, щоб виділити її для натискання. Ось як ви можете створити ефект наведення на компонент кнопки:

1. Зробіть кнопку.
   
2. Скопіюйте його та перемістіть за межі кадру.
   
3. Змініть колір дубльованої кнопки.
   
4. Створіть компоненти, клацнувши правою кнопкою миші та вибравши «Створити компонент» у меню або натиснувши «Ctrl + Alt + K» на клавіатурі.
   
5. Натисніть вкладку «Прототип» на бічній панелі.
   
6. З’єднайте два компоненти кнопки.
   
7. У спадному меню «Деталі взаємодії» виберіть «Під час наведення».
   
8. Натисніть опцію «Відкрити накладення» в тому ж меню та встановіть для накладання значення «Вручну».
   

Коли користувач наводить курсор на оригінальну кнопку, її замінює кнопка іншого кольору. Ви також можете змінити текст, який відображається на кнопці, подібним чином.

Вам доведеться повторити це для кожної кнопки.

Створення ефекту наведення на межі кнопок

Ще один спосіб використання ефекту наведення курсора на компоненти кнопок — створити рамку, яка змінюється, коли ви наводите курсор на кнопку. Ось як ви можете це зробити:

1. Створіть кнопку з будь-яким текстом всередині.
   
2. Продублюйте його.
   
3. Додайте обведення до дублікату, видаліть заливку та змініть колір.
   
4. Натисніть вкладку «Прототип» на бічній панелі.
   
5. З’єднайте два компоненти кнопки.
   
6. У спадному меню «Деталі взаємодії» виберіть «Під час наведення».
   

Тепер, коли ви переглядаєте ефект кнопки та наводите на нього курсор, на ньому з’являться кольорові рамки.

Використання плагіна Anima у Figma

Ще один спосіб додати ефект наведення в Figma — це використовувати інструмент Anima для створення коду. Цей плагін має унікальні функції, які можна застосувати під час створення веб-сайтів, піктограм програм або інших веб-компонентів у Figma. Вам потрібно лише вибрати, який компонент ви хочете анімувати, і відповідно налаштувати параметри. Ось як це зробити:

1. Виберіть компонент.
   
2. Відкрийте плагін Anima.
   
3. Торкніться опції «Ефект наведення».
   
4. Виберіть ефект (зростання, зменшення, тіньове світіння тощо).
   
5. Налаштуйте ефекти анімації, наприклад «Тривалість» або «Крива».
   
6. Натисніть кнопку «Попередній перегляд», щоб побачити ефекти.
   
7. Натисніть «Зберегти».
   

Ще одна особливість плагіна Anime полягає в тому, що ви можете налаштувати CSS Transition. З його допомогою ви можете керувати швидкістю анімації та налаштувати її параметри відповідно до своїх уподобань або зробити їх більш природними.

Скористайтеся перевагами функції ефекту наведення Figma

Незалежно від того, чи є ви професійним дизайнером чи початківцем, у Figma ви маєте багато функцій для створення унікальних дизайнів та анімації для своїх компонентів, значків і об’єктів. Ефект наведення дозволяє змінювати текст або додавати виділення, різні кольори, різні рамки тощо. Знання того, як створювати ці ефекти, є надзвичайно важливим для того, щоб зробити ваш перший веб-сайт інтерактивним і додати йому індивідуальності.

Який ефект наведення ви використовуєте на своїх компонентах у Figma? Повідомте нам у розділі коментарів нижче.