Kaip sukurti užvedimo efektą „Figma“.

Figma leidžia vartotojams kurti ir pritaikyti daugybę funkcijų. Viena iš funkcijų, kurias galite naudoti norėdami pagerinti vartotojo patirtį, yra užvedimo efektas. Mygtukų užvedimo efektas reiškia, kad perkeldami žymeklį link jo pamatysite skirtingą dizainą. Pats efektas gali skirtis – nuo ​​standartinio, keičiančio spalvas iki sudėtingesnių metodų, tokių kaip kraštinės ar paryškinimų keitimas.

Kaip sukurti užvedimo efektą „Figma“.

Skaitykite toliau, kad sužinotumėte, kaip pridėti pelės žymeklio efektą prie „Figma“ komponentų.

Užvedimo efekto kūrimas ant mygtukų

Galite nustatyti užvedimo efektą, jei norite, kad komponentas veiktų tam tikra sąveika ir perėjimas, kai užvedate pelės žymeklį virš jo. Paprasčiausias rezultatas, kurį galite sukurti, yra pakeisti mygtuko spalvą, kad būtų paryškintas spustelėjimas. Taip galite sukurti mygtuko komponento užvedimo efektą:

  1. Padarykite mygtuką.
    Kaip sukurti užvedimo efektą „Figma“.
  2. Kopijuokite jį ir perkelkite už kadro.
    Kaip sukurti užvedimo efektą „Figma“.
  3. Pakeiskite pasikartojančio mygtuko spalvą.
    Kaip sukurti užvedimo efektą „Figma“.
  4. Sukurkite komponentus dešiniuoju pelės mygtuku spustelėdami ir meniu pasirinkę „Sukurti komponentą“ arba klaviatūroje paspausdami „Ctrl + Alt + K“.
    Kaip sukurti užvedimo efektą „Figma“.
  5. Šoninėje juostoje spustelėkite skirtuką „Prototipas“.
    Kaip sukurti užvedimo efektą „Figma“.
  6. Prijunkite du mygtukų komponentus.
    Kaip sukurti užvedimo efektą „Figma“.
  7. Išskleidžiamajame meniu „Išsami sąveikos informacija“ pasirinkite „Užvedant pelės žymeklį“.
    Kaip sukurti užvedimo efektą „Figma“.
  8. Tame pačiame meniu spustelėkite parinktį „Atidaryti perdangą“ ir nustatykite perdangą į „Rankinis“.
    Kaip sukurti užvedimo efektą „Figma“.

Kai vartotojas užves pelės žymeklį virš pradinio mygtuko, jis bus pakeistas kitos spalvos mygtuku. Taip pat panašiu būdu galite pakeisti ant mygtuko rodomą tekstą.

Turėsite tai pakartoti kiekvienam mygtukui.

Užvedimo efekto kūrimas mygtukų kraštinėse

Kitas būdas panaudoti mygtuko komponentų užvedimo efektą yra sukurti kraštinę, kuri pasikeičia, kai žymeklį užvedate ant mygtuko. Štai kaip tai galite padaryti:

  1. Sukurkite mygtuką su bet kokiu tekstu.
    Kaip sukurti užvedimo efektą „Figma“.
  2. Pakartokite jį.
    Kaip sukurti užvedimo efektą „Figma“.
  3. Pridėkite brūkšnį prie dublikato, pašalinkite užpildą ir pakeiskite spalvą.
    Kaip sukurti užvedimo efektą „Figma“.
  4. Šoninėje juostoje spustelėkite skirtuką „Prototipas“.
    Kaip sukurti užvedimo efektą „Figma“.
  5. Prijunkite du mygtukų komponentus.
    Kaip sukurti užvedimo efektą „Figma“.
  6. Išskleidžiamajame meniu „Išsami sąveikos informacija“ pasirinkite „Užvedant pelės žymeklį“.
    Kaip sukurti užvedimo efektą „Figma“.

Dabar, kai peržiūrėsite mygtuko efektą ir užveskite pelės žymeklį ant jo, ant jo atsiras spalvotos kraštinės.

„Anima“ papildinio naudojimas „Figma“.

Kitas būdas pridėti užvedimo efektą „Figma“ yra naudoti dizaino į kodą įrankį „Anima“. Šis papildinys turi unikalių funkcijų, kurias galite įdiegti kurdami svetaines, programų piktogramas ar kitus žiniatinklio komponentus „Figma“. Jums tereikia pasirinkti, kurį komponentą norite animuoti, ir atitinkamai pakoreguoti nustatymus. Štai kaip tai padaryti:

  1. Pasirinkite komponentą.
    Kaip sukurti užvedimo efektą „Figma“.
  2. Atidarykite Anima papildinį.
    Kaip sukurti užvedimo efektą „Figma“.
  3. Bakstelėkite parinktį „Hover Effect“.
    Kaip sukurti užvedimo efektą „Figma“.
  4. Pasirinkite efektą (augti, mažėti, švyti šešėliai ir kt.).
    Kaip sukurti užvedimo efektą „Figma“.
  5. Tinkinkite animacijos efektus, pvz., „Trukmė“ arba „Kreivė“.
    Kaip sukurti užvedimo efektą „Figma“.
  6. Norėdami pamatyti efektus, bakstelėkite mygtuką „Peržiūra“.
    Kaip sukurti užvedimo efektą „Figma“.
  7. Spustelėkite „Išsaugoti“.
    Kaip sukurti užvedimo efektą „Figma“.

Kita „Anime“ papildinio savybė yra ta, kad galite tinkinti CSS perėjimą. Su juo galite valdyti animacijos greitį ir pritaikyti jos nustatymus pagal savo pageidavimus arba padaryti juos natūralesnius.

Pasinaudokite Figma Hover Effect funkcija

Nesvarbu, ar esate profesionalus dizaineris, ar pradedantysis, „Figma“ turi daug funkcijų, kad sukurtumėte unikalų dizainą ir animaciją savo komponentams, piktogramoms ir objektams. Užvedimo efektas leidžia keisti tekstą arba pridėti paryškinimų, skirtingų spalvų, skirtingų kraštinių ir kt. Žinojimas, kaip sukurti šiuos efektus, yra nepaprastai svarbus norint, kad pirmoji svetainė būtų interaktyvi ir suteiktų jai asmeniškumo.

Kokį „Hover“ efektą naudojate savo „Figma“ komponentams? Praneškite mums toliau pateiktame komentarų skyriuje.

Palikti komentarą

Skalbimo mašinos valymas actu? Kaip tai daryti saugiai – ir kada to nedaryti

Skalbimo mašinos valymas actu? Kaip tai daryti saugiai – ir kada to nedaryti

Nemalonus kvapas ar apnašos skalbimo mašinoje? Sužinokite, kada galima naudoti actą, kada gamintojai to nerekomenduoja, ir saugų valymo eiliškumą nuo dozatoriaus iki būgno.

Kaip saugiai pašalinti kalkes nuo elektrinio virdulio – žingsnis po žingsnio

Kaip saugiai pašalinti kalkes nuo elektrinio virdulio – žingsnis po žingsnio

Kaip saugiai pašalinti kalkes nuo elektrinio virdulio naudojant gamintojo metodą, tinkamai nuskalaujant, bei patarimai dėl acto, kalkių filtro ir valymo dažnumo pagal vandens kietumą.

Kaip saugiai ir kruopščiai išvalyti ledo gaminimo aparatą šaldiklyje

Kaip saugiai ir kruopščiai išvalyti ledo gaminimo aparatą šaldiklyje

Sužinokite, kaip išvalyti šaldiklio ledo gaminimo aparatą, išplauti ledo dėžę, pašalinti susikaupusius ledo gabalėlius, nuvalyti skyrių, viską išdžiovinti ir pašalinti nemalonaus skonio ar pasenusio ledo problemas.

Kaip saugiai išvalyti kapos dėklą: paprastas rankų plovimo metodas

Kaip saugiai išvalyti kapos dėklą: paprastas rankų plovimo metodas

Sužinokite, kaip saugiai rankomis išvalyti kapos dėklą, tinkamai jį išdžiovinti, išvengti indaplovės žalos ir atpažinti, kada dėl kvapo, įtrūkimų ar susidėvėjimo jį jau reikia pakeisti.

Kaip iš penalo išimti rašalus nepažeidžiant jo

Kaip iš penalo išimti rašalus nepažeidžiant jo

Sužinokite, kaip saugiai ištuštinti ir išvalyti plunksninius, rutulinius, gelinius ir veleninius penalus, laikydamiesi gamintojo rekomenduotų žingsnių ir aiškių apribojimų.

Kaip saugiai išvalyti HP spausdintuvo galvutę: pradėkite nuo integruoto valymo įrankio

Kaip saugiai išvalyti HP spausdintuvo galvutę: pradėkite nuo integruoto valymo įrankio

Sužinokite saugiausią būdą išvalyti HP spausdintuvo galvutę, kada kartoti valymą, kada taikyti rankinį kontaktų valymą ir kada sustoti.

Kaip išplauti pūkinę striukę nesugriaunant izoliacijos

Kaip išplauti pūkinę striukę nesugriaunant izoliacijos

Sužinokite, kaip išplauti pūkinę arba sintetinę pūkinę striukę, išvengti kamštų susidarymo, saugiai ją išdžiovinti, išspręsti dažnas problemas ir įsitikinti, kad tūris visiškai atstatytas.

Kaip išimti virtuvės kriauklės nutekėjimą nepažeidžiant kriauklės

Kaip išimti virtuvės kriauklės nutekėjimą nepažeidžiant kriauklės

Sužinokite, kaip saugiai išimti virtuvės kriauklės nutekėjimą, atjungti P-sifoną, atlaisvinti krepšelio-filtro užveržimo veržlę, pakelti flanšą, apdoroti šiukšlių malūnėlio nutekėjimus ir nuvalyti angą.

Kaip pašalinti sukietėjusį vašką iš drabužių nepalikant dėmės

Kaip pašalinti sukietėjusį vašką iš drabužių nepalikant dėmės

Sužinokite, kaip saugiai pašalinti sukietėjusį vašką iš drabužių: sukietinkite ir nuskuskite, perkelskite likučius žema temperatūra, jei tai leidžiama, iš anksto apdorokite riebalines dėmes, nuplaukite ir patikrinkite prieš džiovindami.

Kaip paruošti ketaus grotas kepimui, kad jos neliptų

Kaip paruošti ketaus grotas kepimui, kad jos neliptų

Sužinokite, kaip paruošti neapdorotas ketaus grotas plonu aliejaus sluoksniu ir kontroliuojama šiluma, taip pat kada emalio dengtos grotos neturėtų būti ruošiamos.