Как создать эффект наведения в 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-переход. С его помощью вы можете взять под контроль скорость анимации и настроить ее параметры в соответствии со своими предпочтениями или сделать их более естественными.

Воспользуйтесь преимуществами функции эффекта наведения Figma

Независимо от того, являетесь ли вы профессиональным дизайнером или новичком, в Figma есть множество функций для создания уникального дизайна и анимации для ваших компонентов, значков и объектов. Эффект наведения позволяет изменять текст или добавлять выделения, разные цвета, разные границы и многое другое. Знание того, как создавать эти эффекты, имеет первостепенное значение для того, чтобы сделать ваш первый веб-сайт интерактивным и придать ему индивидуальность.

Какой эффект наведения вы реализуете в своих компонентах в Figma? Дайте нам знать в разделе комментариев ниже.