Фигма позволяет пользователям проектировать и настраивать множество функций. Одной из функций, которую вы можете использовать для улучшения пользовательского опыта, является эффект наведения. Эффект наведения на кнопки означает, что вы увидите другой дизайн, когда подведете к ним курсор. Сам этот эффект может варьироваться: от стандартного, меняющего цвета, до более сложных методов, таких как изменение рамки или выделения.
Читайте дальше, чтобы узнать, как добавить эффект наведения к вашим компонентам в Figma.
Создание эффекта наведения на кнопках
Вы можете настройте эффект наведения, если вы хотите, чтобы при наведении на него вашего компонента происходило определенное взаимодействие и переход. Самый простой результат, который вы можете получить, — это изменить цвет кнопки, чтобы выделить ее при нажатии. Вот как можно создать эффект наведения на компонент кнопки:
- Создайте кнопку.
- Дублируйте его и переместите за пределы рамки.
- Измените цвет дублированной кнопки.
- Создайте компоненты, щелкнув правой кнопкой мыши и выбрав «Создать компонент». из меню или нажав “Ctrl + Alt + K” на клавиатуре.
- Нажмите кнопку “Прототип” вкладка на боковой панели.
- Соедините два компонента кнопки.
- В разделе “Сведения о взаимодействии” в раскрывающемся списке выберите «При наведении».
- Нажмите кнопку «Открыть наложение»; в том же меню и установите наложение на “Manual.”
< p>Когда пользователь наводит курсор на исходную кнопку, она заменяется кнопкой другого цвета. Вы также можете изменить текст, отображаемый на кнопке, аналогичным образом.
Вам придется повторить это для каждой кнопки.
Создание эффекта наведения на границы кнопок
Другой способ использования эффекта наведения на компонентах кнопок — создать границу, которая изменяется при наведении курсора на кнопку с помощью курсор. Вот как это можно сделать:
- Создайте кнопку с любым текстом внутри.
- Создайте дубликат.
- Добавьте обводку к дубликату, удалите заливку и измените цвет.
- Нажмите “Прототип” вкладка на боковой панели.
- Соедините два компонента кнопки.
- В “Детали взаимодействия” в раскрывающемся списке выберите «При наведении».
Теперь при предварительном просмотре эффект кнопки и наведите на нее курсор, на ней появятся цветные рамки.
Использование плагина Anima в Figma
Еще один способ добавить эффект наведения в Figma — использовать инструмент проектирования кода Anima. Этот плагин обладает уникальными функциями, которые вы можете реализовать при создании веб-сайтов, значков приложений или других веб-компонентов в Figma. Вам нужно только выбрать, какой компонент вы хотите анимировать, и соответствующим образом настроить параметры. Вот как это сделать:
- Выберите компонент.
- Откройте плагин Anima.
- Нажмите кнопку “Наведите указатель мыши. Эффект” вариант.
- Выберите эффект (увеличение, сжатие, свечение теней и т. д.).
- Настройте эффекты анимации например “Продолжительность” или “Кривая.”
- Нажмите кнопку “Предварительный просмотр” кнопку, чтобы увидеть эффект.
- Нажмите “Сохранить”
Еще одна особенность плагина Anime — возможность настройки CSS-перехода. С его помощью вы можете контролировать скорость анимации и настраивать ее параметры в соответствии со своими предпочтениями или делать их более естественными.
Воспользуйтесь преимуществами функции эффекта наведения Figma< /h2>
Будь то профессиональный дизайнер или новичок, в Figma есть множество функций для создания уникального дизайна и анимации для ваших компонентов, значков и объектов. Эффект наведения позволяет изменять текст или добавлять выделения, разные цвета, разные границы и многое другое. Знание того, как создавать эти эффекты, имеет первостепенное значение для того, чтобы сделать ваш первый веб-сайт интерактивным и придать ему индивидуальность.
Какой эффект при наведении вы реализуете в своих компонентах в Figma? Дайте нам знать в разделе комментариев ниже.
