Kako napraviti efekt lebdenja u Figmi

Kako napraviti efekt lebdenja u Figmi

Figma omogućuje korisnicima da dizajniraju i prilagode mnoge značajke. Jedna od značajki koju možete koristiti za poboljšanje korisničkog iskustva je efekt lebdenja. Efekt lebdenja na gumbima znači da ćete vidjeti drugačiji dizajn kada pomaknete kursor prema njemu. Sam ovaj efekt može varirati, od standardnog koji mijenja boje do kompliciranijih metoda poput mijenjanja obruba ili isticanja.

Kako napraviti efekt lebdenja u Figmi

Čitajte dalje kako biste saznali kako dodati efekt lebdenja svojim komponentama u Figmi.

Stvaranje efekta lebdenja na gumbima

Možete postaviti efekt lebdenja ako želite da vaša komponenta ima određenu interakciju i prijelaz kada lebdite iznad nje. Najjednostavniji rezultat koji možete stvoriti je promjena boje gumba kako biste ga istaknuli za klikanje. Ovako možete stvoriti efekt lebdenja na komponenti gumba:

  1. Napravi gumb.
    Kako napraviti efekt lebdenja u Figmi
  2. Duplicirajte ga i pomaknite izvan okvira.
    Kako napraviti efekt lebdenja u Figmi
  3. Promijenite boju dupliciranog gumba.
    Kako napraviti efekt lebdenja u Figmi
  4. Stvorite komponente desnim klikom i odabirom "Create Component" iz izbornika ili pritiskom na "Ctrl + Alt + K" na tipkovnici.
    Kako napraviti efekt lebdenja u Figmi
  5. Kliknite na karticu "Prototip" na bočnoj traci.
    Kako napraviti efekt lebdenja u Figmi
  6. Spojite dvije komponente gumba.
    Kako napraviti efekt lebdenja u Figmi
  7. U padajućem izborniku "Detalji interakcije" odaberite "Dok lebdite."
    Kako napraviti efekt lebdenja u Figmi
  8. Kliknite opciju "Otvori preklapanje" u istom izborniku i postavite preklapanje na "Ručno".
    Kako napraviti efekt lebdenja u Figmi

Kada korisnik prijeđe pokazivačem iznad izvornog gumba, zamijenit će ga onaj druge boje. Također možete promijeniti tekst koji se prikazuje na gumbu na sličan način.

Ovo ćete morati ponoviti za svaki gumb.

Stvaranje efekta lebdenja na rubovima gumba

Drugi način korištenja efekta lebdenja na komponentama gumba je stvaranje obruba koji se mijenja kada kursorom prijeđete iznad gumba. Evo kako to možete učiniti:

  1. Napravite gumb s bilo kojim tekstom unutra.
    Kako napraviti efekt lebdenja u Figmi
  2. Umnoži ga.
    Kako napraviti efekt lebdenja u Figmi
  3. Dodajte crtu duplikatu, uklonite ispunu i promijenite boju.
    Kako napraviti efekt lebdenja u Figmi
  4. Kliknite na karticu "Prototip" na bočnoj traci.
    Kako napraviti efekt lebdenja u Figmi
  5. Spojite dvije komponente gumba.
    Kako napraviti efekt lebdenja u Figmi
  6. U padajućem izborniku "Detalji interakcije" odaberite "Dok lebdite."
    Kako napraviti efekt lebdenja u Figmi

Sada kada pregledate efekt gumba i zadržite pokazivač iznad njega, na njemu će se pojaviti obrubi u boji.

Korištenje dodatka Anima u Figmi

Drugi način dodavanja efekta lebdenja u Figmi je korištenje alata Anima za izradu koda. Ovaj dodatak ima jedinstvene značajke koje možete implementirati tijekom izrade web stranica, ikona aplikacija ili drugih web komponenti u Figmi. Vi samo trebate odabrati koju komponentu želite animirati i prilagoditi postavke u skladu s tim. Evo kako to učiniti:

  1. Odaberite komponentu.
    Kako napraviti efekt lebdenja u Figmi
  2. Otvorite dodatak Anima.
    Kako napraviti efekt lebdenja u Figmi
  3. Dodirnite opciju "Efekt lebdenja".
    Kako napraviti efekt lebdenja u Figmi
  4. Odaberite učinak (rast, smanjenje, sjaj sjene i više).
    Kako napraviti efekt lebdenja u Figmi
  5. Prilagodite efekte animacije kao što su "Trajanje" ili "Krivulja".
    Kako napraviti efekt lebdenja u Figmi
  6. Dodirnite gumb "Pregled" da vidite efekte.
    Kako napraviti efekt lebdenja u Figmi
  7. Kliknite na "Spremi".
    Kako napraviti efekt lebdenja u Figmi

Još jedna značajka dodatka Anime je da možete prilagoditi CSS prijelaz. Pomoću njega možete preuzeti kontrolu nad brzinom animacije i prilagoditi njezine postavke svojim željama ili ih učiniti prirodnijima.

Iskoristite prednost Figmine značajke efekta lebdenja

Bilo da ste profesionalni dizajner ili početnik, u Figmi imate mnogo značajki za stvaranje jedinstvenog dizajna i animacija za svoje komponente, ikone i objekte. Efekt lebdenja omogućuje promjenu teksta ili dodavanje isticanja, različitih boja, različitih obruba i više. Znati kako stvoriti ove efekte od iznimne je važnosti kako biste svoju prvu web stranicu učinili interaktivnom i dodali joj osobni pečat.

Koji efekt lebdenja implementirate na svoje komponente u Figmi? Javite nam u odjeljku za komentare ispod.


Kako preimenovati Git granu

Kako preimenovati Git granu

Znati kako preimenovati granu u Gitu je zgodna vještina. Možda ste jedan od rijetkih ljudi koji ima nepokolebljiv plan kako bi trebala biti imena vaših podružnica

Kako promijeniti Git Commit poruku

Kako promijeniti Git Commit poruku

Promjena Git commit poruke može se činiti trivijalnom, ali vjerojatno ćete to činiti često. Vrlo je važno u kontroli verzija, jeste li pogriješili pri upisu,

Kako postaviti roditeljski nadzor Fire Tableta

Kako postaviti roditeljski nadzor Fire Tableta

Amazonov Fire tablet popularan je uređaj koji radi na vlastitom operativnom sustavu povezanom s Androidom koji se zove Fire OS. Možete koristiti Fire tablet za surfanje

Kako postaviti e-poštu s GoDaddyjem

Kako postaviti e-poštu s GoDaddyjem

Ako imate GoDaddy radni prostor i vlastitu domenu, ima smisla postaviti odgovarajuću adresu e-pošte. Zbog toga vaše poslovanje izgleda profesionalno i

Kako dodati ime u WhatsApp

Kako dodati ime u WhatsApp

Mnogi od nas bili su u toj neugodnoj situaciji kada nekome pošaljete poruku i dobijete čudan odgovor. Ispostavilo se da osoba kojoj šaljete poruku nije spasila

Najbolji fontovi za MIUI uređaje

Najbolji fontovi za MIUI uređaje

Ako tražite najbolje fontove za korištenje na svojim MIUI uređajima, Xiaomi to čini super jednostavnim. Sve što trebate učiniti je preuzeti font koji želite i spremiti ga

Kako popraviti Microsoftove timove koji ne rade

Kako popraviti Microsoftove timove koji ne rade

Microsoft Teams postao je najpopularniji alat za radnu komunikaciju nadmašivši čak i Skype i Slack. Ali ne može vam pomoći ako ne radi. Ako

Kako dodati zvučnu ploču u Discord

Kako dodati zvučnu ploču u Discord

Soundboard je računalni program koji pomaže aplikacijama poput Discorda u stvaranju cool zvučnih efekata. Također vam omogućuje učitavanje različitih zvukova na

Git: Kako ukloniti datoteku iz commita

Git: Kako ukloniti datoteku iz commita

Nesreće se događaju ako radite u Gitu. Možda ste slučajno uključili datoteku koja ne bi trebala biti tamo, ili vaš commit nije baš jasan. Ovo su samo

Procreate: Kako promijeniti boju linije

Procreate: Kako promijeniti boju linije

Naučite kako jednostavno promijeniti boje linija u Procreateu u nekoliko koraka da svoju digitalnu umjetnost podignete na višu razinu.