Ховери у Figma: як зібрати, щоб їх було видно у відео

Ховер — це частина дизайну, а на скріншоті його просто немає. Якщо ваші кнопки й картки зібрані як компоненти з варіантами, відео-кейс може показати саме той стан, який ви намалювали.

Безкоштовно у Figma Community · 3 безкоштовні експорти щотижня · без водяного знака

Зберіть стан як варіант

1. Зробіть кнопку компонентом. Виділіть її і створіть компонент.
2. Додайте варіант. Назвіть властивість State, а значення — Default і Hover.
3. Намалюйте ховер. Змініть заливку, контур, стрілку — усе, що робить ваш ховер.
4. Ставте на сторінку екземпляри. Кожна кнопка на сторінці — екземпляр цього компонента у стані Default.

Якщо ви ще й пов’яжете варіанти в прототипі — взаємодією While hovering, яка перемикає на варіант Hover, — намір буде названо двічі, і вгадувати нічого не доведеться.

Тримайте обидва стани одного розміру

Ховер, який змінює колір, контур чи іконку, підміняється чисто. Ховер, який робить компонент більшим, штовхає сусідів в автолейауті, і сторінка довкола зсувається. Якщо ховер має рости, дайте компоненту фіксований фрейм із запасом усередині, щоб зовнішній розмір лишався однаковим в обох станах.

З картками так само

Картка товару, яка на ховері показує кнопку «Швидка покупка», — це компонент із двома варіантами, Normal і Hover. Лишіть одну картку на сторінці у стані Hover, якщо хочете, щоб статичний макет це показував; решта карток усе одно набуватимуть цього вигляду під курсором.

Що відбувається у відео

Коли плагін Casecut надсилає фрейм, він також рендерить інший стан компонентів, які його мають. У відео курсор підходить до кнопки, увесь компонент змінюється на ваш ховер саме так, як ви намалювали, і повертається назад, коли курсор іде. Кнопка з кількох частин — наприклад, пігулка з кружком-стрілкою — змінюється як одне ціле.

Та сама ідея для табів, акордеонів і слайдерів

• Таби й перемикачі: варіанти, названі за активним станом. Клік перемикає їх, і вони лишаються перемкненими.
• Акордеони: варіанти Open і Closed.
• Слайдери: поставте всі слайди в один ряд усередині фрейму з увімкненим обрізанням. Натиск на стрілку гортає до наступного.

Спробуйте на власному фреймі

Анімовані макетиШари з’являються, сторінка гортається, курсор клікає. Без кейфреймів.ВідкритиВідео з FigmaФрейм стає MP4 без запису екрана.Відкрити

Ще з блогу

7 жовтня 20262 хв читанняВідео з прототипу Figma: чотири способиЗапис екрана, After Effects, моушен-інструменти й автоматичний проліт.Читати7 жовтня 20262 хв читанняЯк показати дизайн лендінгуПрактична структура для Behance, Dribbble, X і LinkedIn.Читати7 жовтня 20262 хв читання16:9, 4:5 чи 9:16 для відео-кейсуЯкий формат куди йде і чому обрізки недостатньо.Читати