Jak zrobić efekt najechania w Figmie

Figma pozwala użytkownikom projektować i dostosowywać wiele funkcji. Jedną z funkcji, których możesz użyć do poprawy komfortu użytkowania, jest efekt najechania myszką. Efekt najechania przyciskami oznacza, że ​​po przesunięciu kursora w ich stronę zobaczysz inny projekt. Sam efekt może być różny, od standardowego, który zmienia kolory, po bardziej skomplikowane metody, takie jak zmiana obramowania lub podświetlenia.

Czytaj dalej, aby dowiedzieć się, jak dodać efekt najechania do komponentów w Figmie.

Tworzenie efektu najechania na przyciskach

Możesz ustawić efekt najechania, jeśli chcesz, aby po najechaniu na komponent komponentem wywoływała określoną interakcję i przejście. Najprostszym rezultatem, jaki można uzyskać, jest zmiana koloru przycisku w celu podświetlenia go w celu kliknięcia. Oto jak możesz stworzyć efekt najechania na komponent przycisku:

1. Zrób przycisk.

   

2. Zduplikuj go i przenieś poza ramkę.

   

3. Zmień kolor zduplikowanego przycisku.

   

4. Utwórz komponenty, klikając prawym przyciskiem myszy i wybierając „Utwórz komponent” z menu lub naciskając „Ctrl + Alt + K” na klawiaturze.

   

5. Kliknij zakładkę „Prototyp” na pasku bocznym.

   

6. Połącz dwa elementy przycisku.

   

7. Z menu rozwijanego „Szczegóły interakcji” wybierz „Podczas najechania”.

   

8. Kliknij opcję „Otwórz nakładkę” w tym samym menu i ustaw nakładkę na „Ręcznie”.

   

Kiedy użytkownik najedzie kursorem na oryginalny przycisk, zostanie on zastąpiony przyciskiem o innym kolorze. W podobny sposób możesz także zmienić tekst wyświetlany na przycisku.

Będziesz musiał powtórzyć tę czynność dla każdego przycisku.

Tworzenie efektu najechania na krawędziach przycisków

Innym sposobem wykorzystania efektu najechania na komponenty przycisku jest utworzenie obramowania, które zmienia się po najechaniu kursorem na przycisk. Oto jak możesz to zrobić:

1. Utwórz przycisk z dowolnym tekstem w środku.

   

2. Zduplikuj to.

   

3. Dodaj obrys do duplikatu, usuń wypełnienie i zmień kolor.

   

4. Kliknij zakładkę „Prototyp” na pasku bocznym.

   

5. Połącz dwa elementy przycisku.

   

6. Z menu rozwijanego „Szczegóły interakcji” wybierz „Podczas najechania”.

   

Teraz, gdy zobaczysz podgląd efektu przycisku i najedziesz na niego kursorem, pojawią się na nim kolorowe ramki.

Korzystanie z wtyczki Anima w Figmie

Innym sposobem na dodanie efektu najechania w Figmie jest użycie narzędzia Anima do projektowania i kodowania. Ta wtyczka ma unikalne funkcje, które możesz wdrożyć podczas tworzenia stron internetowych, ikon aplikacji lub innych komponentów internetowych w Figmie. Musisz tylko wybrać komponent, który chcesz animować i odpowiednio dostosować ustawienia. Oto jak to zrobić:

1. Wybierz komponent.
2. Otwórz wtyczkę Anima.

   

3. Stuknij opcję „Efekt najechania”.

   

4. Wybierz efekt (wzrost, kurczenie się, blask cienia i inne).

   

5. Dostosuj efekty animacji, takie jak „Czas trwania” lub „Krzywa”.

   

6. Naciśnij przycisk „Podgląd”, aby zobaczyć efekty.

   

7. Kliknij „Zapisz”.

   

Kolejną cechą wtyczki Anime jest możliwość dostosowania przejścia CSS. Dzięki niemu możesz przejąć kontrolę nad szybkością animacji i dostosować jej ustawienia do swoich preferencji lub uczynić je bardziej naturalnymi.

Skorzystaj z funkcji efektu najechania Figma

Niezależnie od tego, czy jesteś profesjonalnym projektantem, czy początkującym, Figma oferuje wiele funkcji umożliwiających tworzenie unikalnych projektów i animacji komponentów, ikon i obiektów. Efekt najechania umożliwia zmianę tekstu lub dodanie wyróżnień, różnych kolorów, różnych obramowań i nie tylko. Wiedza o tym, jak stworzyć te efekty, ma ogromne znaczenie, jeśli chcesz, aby Twoja pierwsza witryna internetowa była interaktywna i dodała jej osobistego charakteru.

Który efekt najechania wdrażasz na swoich komponentach w Figmie? Daj nam znać w sekcji komentarzy poniżej.