Kuinka tehdä leijuva vaikutus Figmassa

Figman avulla käyttäjät voivat suunnitella ja mukauttaa monia ominaisuuksia. Yksi ominaisuuksista, joilla voit parantaa käyttökokemusta, on hover-tehoste. Painikkeiden hover-tehoste tarkoittaa, että näet erilaisen kuvion, kun siirrät kohdistinta sitä kohti. Tämä tehoste itsessään voi vaihdella tavallisesta värejä vaihtavasta tehosteesta monimutkaisempiin menetelmiin, kuten reunuksen tai korostuksen muuttaminen.

Lue, kuinka voit lisätä hover-tehosteen komponentteihin Figmassa.

Hover Effectin luominen painikkeisiin

Voit määrittää hover-tehosteen, jos haluat komponentilla olevan tietyn vuorovaikutuksen ja siirtymän, kun viet hiiren sen päälle. Yksinkertaisin tulos, jonka voit luoda, on muuttaa painikkeen väriä korostaaksesi sen napsauttamista varten. Näin voit luoda hover-tehosteen painikekomponenttiin:

1. Tee painike.
   
2. Kopioi se ja siirrä se kehyksen ulkopuolelle.
   
3. Muuta kopioidun painikkeen väriä.
   
4. Luo komponentteja napsauttamalla hiiren kakkospainikkeella ja valitsemalla valikosta "Luo komponentti" tai painamalla näppäimistön "Ctrl + Alt + K".
   
5. Napsauta sivupalkissa "Prototyyppi"-välilehteä.
   
6. Yhdistä kaksi painikekomponenttia.
   
7. Valitse avattavasta "Vuorovaikutustiedot"-valikosta "Hiireessä".
   
8. Napsauta "Avaa peitto" -vaihtoehtoa samassa valikossa ja aseta peittokuvaksi "Manuaalinen".
   

Kun käyttäjä vie hiiren alkuperäisen painikkeen päälle, se korvataan erivärisellä painikkeella. Voit myös muuttaa painikkeessa näkyvää tekstiä samalla tavalla.

Sinun on toistettava tämä jokaiselle painikkeelle.

Hover Effectin luominen painikkeiden reunoihin

Toinen tapa käyttää hover-tehostetta painikekomponenteissa on luoda reunus, joka muuttuu, kun siirrät osoittimen painikkeen päälle. Näin voit tehdä sen:

1. Luo painike, jonka sisällä on mitä tahansa tekstiä.
   
2. Kopioi se.
   
3. Lisää viiva kaksoiskappaleeseen, poista täyttö ja muuta väriä.
   
4. Napsauta sivupalkissa "Prototyyppi"-välilehteä.
   
5. Yhdistä kaksi painikekomponenttia.
   
6. Valitse avattavasta "Vuorovaikutustiedot"-valikosta "Hiireessä".
   

Nyt kun esikatselet painiketehostetta ja viet hiiren sen päälle, värilliset reunat tulevat näkyviin.

Anima Pluginin käyttäminen Figmassa

Toinen tapa lisätä hover-tehoste Figmaan on käyttää design-to-code -työkalua Anima. Tällä laajennuksella on ainutlaatuisia ominaisuuksia, joita voit ottaa käyttöön luodessasi verkkosivustoja, sovelluskuvakkeita tai muita verkkokomponentteja Figmassa. Sinun tarvitsee vain valita, mikä komponentti haluat animoida, ja säätää asetuksia vastaavasti. Voit tehdä tämän seuraavasti:

1. Valitse komponentti.
   
2. Avaa Anima-laajennus.
   
3. Napauta "Hover Effect" -vaihtoehtoa.
   
4. Valitse tehoste (kasvu, kutistuminen, varjon hehku ja paljon muuta).
   
5. Muokkaa animaatiotehosteita, kuten "Kesto" tai "Käyrä".
   
6. Napauta "Esikatselu" -painiketta nähdäksesi tehosteet.
   
7. Napsauta "Tallenna".
   

Toinen Anime-laajennuksen ominaisuus on, että voit mukauttaa CSS-siirtymää. Sen avulla voit hallita animaation nopeutta ja säätää sen asetuksia mieltymystesi mukaan tai tehdä niistä luonnollisempia.

Hyödynnä Figman Hover Effect -ominaisuutta

Olitpa ammattisuunnittelija tai aloittelija, Figmassa on monia ominaisuuksia, joiden avulla voit luoda ainutlaatuisia malleja ja animaatioita komponenteille, kuvakkeille ja objekteille. Hover-tehosteen avulla voit muuttaa tekstiä tai lisätä kohokohtia, eri värejä, erilaisia ​​reunuksia ja paljon muuta. Näiden tehosteiden luomisen tietäminen on äärimmäisen tärkeää, jotta voit tehdä ensimmäisestä verkkosivustostasi interaktiivisen ja lisätä siihen persoonallisuutta.

Minkä hover-efektin käytät komponentteihisi Figmassa? Kerro meille alla olevassa kommenttiosassa.