Как да направите ефект на задържане във Figma

Figma позволява на потребителите да проектират и персонализират много функции. Една от функциите, които можете да използвате, за да подобрите потребителското изживяване, е ефект на задържане. Ефектът на курсора върху бутоните означава, че ще видите различен дизайн, когато преместите курсора към него. Самият ефект може да варира от стандартен, който променя цветовете, до по-сложни методи, като промяна на рамката или акцентите.

Прочетете, за да научите как да добавите ефект на задържане към вашите компоненти във Figma.

Създаване на Hover Effect върху бутони

Можете да настроите ефект на задържане, ако искате вашият компонент да има конкретно взаимодействие и преход, когато задържите курсора на мишката върху него. Най-простият резултат, който можете да създадете, е да промените цвета на бутона, за да го подчертаете за щракване. Ето как можете да създадете ефект на задържане върху компонент на бутон:

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. Докоснете опцията „Hover Effect“.
   
4. Изберете ефекта (растеж, свиване, сияние в сенки и други).
   
5. Персонализирайте анимационни ефекти като „Продължителност“ или „Крива“.
   
6. Докоснете бутона „Преглед“, за да видите ефектите.
   
7. Кликнете върху „Запазване“.
   

Друга функция на плъгина Anime е, че можете да персонализирате CSS прехода. С него можете да контролирате скоростта на анимацията и да коригирате настройките й според вашите предпочитания или да ги направите по-естествени.

Възползвайте се от функцията Hover Effect на Figma

Независимо дали сте професионален дизайнер или начинаещ, имате много функции във Figma за създаване на уникални дизайни и анимации за вашите компоненти, икони и обекти. Ефектът при задържане на мишката ви позволява да променяте текст или да добавяте акценти, различни цветове, различни рамки и други. Да знаете как да създадете тези ефекти е от изключителна важност, за да направите първия си уебсайт интерактивен и да добавите личен щрих към него.

Кой ефект на задържане прилагате върху компонентите си във Figma? Уведомете ни в секцията за коментари по-долу.