Kako narediti učinek lebdenja v Figmi

Figma uporabnikom omogoča oblikovanje in prilagajanje številnih funkcij. Ena od funkcij, ki jo lahko uporabite za izboljšanje uporabniške izkušnje, je učinek lebdenja. Učinek lebdenja na gumbih pomeni, da boste videli drugačen dizajn, ko premaknete kazalec proti njim. Sam učinek je lahko različen, od standardnega, ki spreminja barve, do bolj zapletenih metod, kot je spreminjanje obrobe ali poudarkov.

Preberite, če želite izvedeti, kako dodati učinek lebdenja svojim komponentam v Figmi.

Ustvarjanje učinka lebdenja na gumbih

Učinek lebdenja lahko nastavite, če želite, da ima vaša komponenta določeno interakcijo in prehod, ko miškin kazalec premaknete nad njo. Najpreprostejši rezultat, ki ga lahko ustvarite, je spreminjanje barve gumba, da ga označite za klikanje. Tako lahko ustvarite učinek lebdenja na komponenti gumba:

1. Naredite gumb.
   
2. Podvojite ga in premaknite izven okvirja.
   
3. Spremenite barvo podvojenega gumba.
   
4. Komponente ustvarite tako, da z desno tipko miške kliknete in v meniju izberete »Ustvari komponento« ali pritisnete »Ctrl + Alt + K« na tipkovnici.
   
5. V stranski vrstici kliknite zavihek »Prototip«.
   
6. Povežite obe komponenti gumba.
   
7. V spustnem meniju »Podrobnosti interakcije« izberite »Med lebdenjem«.
   
8. V istem meniju kliknite možnost »Odpri prekrivanje« in nastavite prekrivanje na »Ročno«.
   

Ko uporabnik premakne miškin kazalec nad izvirni gumb, ga bo zamenjal gumb druge barve. Na podoben način lahko spremenite tudi besedilo, ki je prikazano na gumbu.

To boste morali ponoviti za vsak gumb.

Ustvarjanje učinka lebdenja na obrobah gumbov

Drug način za uporabo učinka lebdenja na komponentah gumbov je ustvarjanje obrobe, ki se spremeni, ko s kazalcem premaknete miškin kazalec nad gumb. Tukaj je, kako lahko to storite:

1. Ustvarite gumb s poljubnim besedilom znotraj.
   
2. Podvoji ga.
   
3. Dodajte potezo dvojniku, odstranite polnilo in spremenite barvo.
   
4. V stranski vrstici kliknite zavihek »Prototip«.
   
5. Povežite obe komponenti gumba.
   
6. V spustnem meniju »Podrobnosti interakcije« izberite »Med lebdenjem«.
   

Zdaj, ko si predogledate učinek gumba in premaknete miškin kazalec nad njim, se bodo na njem pojavile barvne obrobe.

Uporaba vtičnika Anima v Figmi

Drug način za dodajanje učinka lebdenja v Figmi je uporaba orodja za oblikovanje kode Anima. Ta vtičnik ima edinstvene funkcije, ki jih lahko uporabite med ustvarjanjem spletnih mest, ikon aplikacij ali drugih spletnih komponent v Figmi. Izbrati morate le, katero komponento želite animirati, in ustrezno prilagoditi nastavitve. To storite tako:

1. Izberite komponento.
   
2. Odprite vtičnik Anima.
   
3. Dotaknite se možnosti »Učinek lebdenja«.
   
4. Izberite učinek (rast, krčenje, senčni sijaj in drugo).
   
5. Prilagodite učinke animacije, kot sta »Trajanje« ali »Krivulja«.
   
6. Za ogled učinkov tapnite gumb »Predogled«.
   
7. Kliknite »Shrani«.
   

Druga značilnost vtičnika Anime je, da lahko prilagodite prehod CSS. Z njim lahko prevzamete nadzor nad hitrostjo animacije in prilagodite njene nastavitve svojim željam ali jih naredite bolj naravne.

Izkoristite Figmino funkcijo učinka lebdenja

Ne glede na to, ali ste profesionalni oblikovalec ali začetnik, imate v Figmi veliko funkcij za ustvarjanje edinstvenih dizajnov in animacij za svoje komponente, ikone in predmete. Učinek lebdenja vam omogoča spreminjanje besedila ali dodajanje poudarkov, različnih barv, različnih obrob in več. Znanje ustvariti te učinke je izjemnega pomena za to, da bo vaše prvo spletno mesto postalo interaktivno in mu dodali osebno noto.

Kateri učinek lebdenja izvajate na svojih komponentah v Figmi? Sporočite nam v spodnjem oddelku za komentarje.