Hvernig á að búa til sveimaáhrif í Figma

Figma gerir notendum kleift að hanna og sérsníða marga eiginleika. Einn af eiginleikum sem þú getur notað til að bæta notendaupplifun er sveimaáhrif. Sveimaáhrifin á hnöppum þýðir að þú munt sjá aðra hönnun þegar þú færir bendilinn að honum. Þessi áhrif sjálf geta verið breytileg, allt frá venjulegu sem breytir litum yfir í flóknari aðferðir eins og að breyta ramma eða hápunktum.

Lestu áfram til að læra hvernig á að bæta sveimaáhrifum við íhlutina þína í Figma.

Að búa til sveimaáhrif á hnappa

Þú getur sett upp sveimaáhrif ef þú vilt að íhluturinn þinn hafi ákveðna víxlverkun og umskipti þegar þú ferð yfir hann. Einfaldasta niðurstaðan sem þú getur búið til er að breyta lit hnappsins til að auðkenna hann til að smella á. Svona geturðu búið til sveimaáhrif á hnappahluta:

1. Búðu til hnappinn.
   
2. Afritaðu það og færðu það út fyrir rammann.
   
3. Breyttu lit afritaða hnappsins.
   
4. Búðu til íhluti með því að hægrismella og velja "Create Component" í valmyndinni eða með því að ýta á "Ctrl + Alt + K" á lyklaborðinu þínu.
   
5. Smelltu á flipann „Frumgerð“ í hliðarstikunni.
   
6. Tengdu hnappahlutana tvo.
   
7. Í fellivalmyndinni „Upplýsingar um samskipti“, veldu „Á meðan þú sveimar“.
   
8. Smelltu á "Open Overlay" valkostinn í sömu valmynd og stilltu yfirborðið á "Manual".
   

Þegar notandinn sveimar yfir upprunalega hnappinn verður honum skipt út fyrir þann sem hefur annan lit. Þú getur líka breytt textanum sem birtist á hnappinum á svipaðan hátt.

Þú verður að endurtaka þetta fyrir hvern hnapp.

Að búa til sveimaáhrif á hnappamörk

Önnur leið til að nýta sveimaáhrifin á hnappahluti er að búa til ramma sem breytist þegar þú ferð yfir hnappinn með bendilinn. Hér er hvernig þú getur gert það:

1. Búðu til hnapp með hvaða texta sem er inni.
   
2. Afritaðu það.
   
3. Bættu strikinu við afritið, fjarlægðu fyllinguna og breyttu litnum.
   
4. Smelltu á flipann „Frumgerð“ í hliðarstikunni.
   
5. Tengdu hnappahlutana tvo.
   
6. Í fellivalmyndinni „Upplýsingar um samskipti“, veldu „Á meðan þú sveimar“.
   

Nú þegar þú forskoðar hnappaáhrifin og sveimar yfir þau munu lituðu rammar birtast á þeim.

Notkun Anima Plugin í Figma

Önnur leið til að bæta við sveimaáhrifum í Figma er með því að nota hönnunar-til-kóða tól Anima. Þessi viðbót hefur einstaka eiginleika sem þú getur innleitt á meðan þú býrð til vefsíður, forritatákn eða aðra vefhluta í Figma. Þú þarft aðeins að velja hvaða íhlut þú vilt lífga og stilla stillingarnar í samræmi við það. Svona á að gera þetta:

1. Veldu íhlutinn.
   
2. Opnaðu Anima viðbótina.
   
3. Bankaðu á „Hover Effect“ valmöguleikann.
   
4. Veldu áhrifin (vaxa, minnka, skugga ljóma og fleira).
   
5. Sérsníddu hreyfimyndaáhrif eins og „Duration“ eða „Curve“.
   
6. Bankaðu á „Forskoðun“ hnappinn til að sjá áhrifin.
   
7. Smelltu á „Vista“.
   

Annar eiginleiki Anime viðbótarinnar er að þú getur sérsniðið CSS Transition. Með því geturðu tekið stjórn á hreyfihraðanum og stillt stillingar þess að þínum óskum eða gert þær eðlilegri.

Nýttu þér eiginleika Figma's Hover Effect

Hvort sem þú ert faglegur hönnuður eða byrjandi, þú hefur marga eiginleika í Figma til að búa til einstaka hönnun og hreyfimyndir fyrir íhluti þína, tákn og hluti. Sveimaáhrifin gera þér kleift að breyta texta eða bæta við hápunktum, mismunandi litum, mismunandi ramma og fleira. Að vita hvernig á að búa til þessi áhrif er afar mikilvægt til að gera fyrstu vefsíðuna þína gagnvirka og setja persónulegan blæ á hana.

Hvaða sveimaáhrif innleiðir þú á hlutina þína í Figma? Láttu okkur vita í athugasemdahlutanum hér að neðan.