Hogyan készítsünk lebegő effektust a Figmában

A Figma lehetővé teszi a felhasználók számára számos funkció tervezését és testreszabását. A felhasználói élmény javítására használható egyik funkció a lebegő effektus. A gombokon lévő lebegtetési effektus azt jelenti, hogy más megjelenést fog látni, ha felé mozgatja a kurzort. Ez a hatás maga változhat, a színeket megváltoztató szabványostól a bonyolultabb módszerekig, mint például a szegély vagy a kiemelések megváltoztatása.

Olvasson tovább, hogy megtudja, hogyan adhat hozzá lebegési effektust a Figma összetevőihez.

Lebegő effektus létrehozása a gombokon

Beállíthat lebegtetési effektust, ha azt szeretné, hogy az összetevő egy bizonyos interakciót és átmenetet végezzen, amikor rámutat. A legegyszerűbb eredmény, amit létrehozhat, ha megváltoztatja a gomb színét, hogy kiemelje azt a kattintáshoz. Így hozhat létre lebegő effektust egy gombkomponensen:

1. Készítse el a gombot.
   
2. Másolja le, és helyezze a kereten kívülre.
   
3. Módosítsa a duplikált gomb színét.
   
4. Hozzon létre összetevőket a jobb gombbal kattintva, és a menüből válassza a „Komponens létrehozása” lehetőséget, vagy nyomja meg a „Ctrl + Alt + K” gombot a billentyűzeten.
   
5. Kattintson a „Prototípus” fülre az oldalsávon.
   
6. Csatlakoztassa a két gombelemet.
   
7. Az „Interakció részletei” legördülő menüben válassza a „Lebegés közben” lehetőséget.
   
8. Kattintson az „Open Overlay” opcióra ugyanabban a menüben, és állítsa a fedvényt „Kézi” értékre.
   

Amikor a felhasználó az eredeti gomb fölé viszi az egérmutatót, a helyére egy másik színű gomb kerül. Hasonló módon módosíthatja a gombon megjelenő szöveget is.

Ezt minden gombnál meg kell ismételni.

Lebegő effektus létrehozása a gombszegélyeken

A gombösszetevők lebegtetési effektusának egy másik módja egy olyan szegély létrehozása, amely megváltozik, amikor a kurzort a gomb fölé viszi. A következőképpen teheti meg:

1. Hozzon létre egy gombot tetszőleges szöveggel.
   
2. Másolja le.
   
3. Adja hozzá a körvonalat a másolathoz, távolítsa el a kitöltést, és változtassa meg a színt.
   
4. Kattintson a „Prototípus” fülre az oldalsávon.
   
5. Csatlakoztassa a két gombelemet.
   
6. Az „Interakció részletei” legördülő menüben válassza a „Lebegés közben” lehetőséget.
   

Most, amikor megtekinti a gombeffektus előnézetét, és rámutat, a színes keretek jelennek meg rajta.

Az Anima beépülő modul használata a Figmában

Egy másik módja a lebegési effektus hozzáadásának a Figmában az Anima tervezés-kódolás eszköz használata. Ez a beépülő modul egyedi funkciókkal rendelkezik, amelyeket webhelyek, alkalmazásikonok vagy egyéb webes összetevők Figma-ban való létrehozásakor alkalmazhat. Csak ki kell választania, melyik komponenst szeretné animálni, és ennek megfelelően módosítani kell a beállításokat. Ezt a következőképpen kell megtenni:

1. Válassza ki az összetevőt.
   
2. Nyissa meg az Anima bővítményt.
   
3. Érintse meg a „Hover Effect” opciót.
   
4. Válassza ki a hatást (növekedés, zsugorodás, árnyékfény stb.).
   
5. Testreszabhatja az olyan animációs effektusokat, mint az „Időtartam” vagy a „Görbe”.
   
6. Érintse meg az „Előnézet” gombot az effektusok megtekintéséhez.
   
7. Kattintson a „Mentés” gombra.
   

Az Anime beépülő modul másik jellemzője, hogy testreszabhatja a CSS-átmenetet. Segítségével átveheti az irányítást az animáció sebessége felett, és beállításait saját preferenciái szerint módosíthatja vagy természetesebbé teheti.

Használja ki a Figma Hover Effect funkcióját

Legyen szó professzionális tervezőről vagy kezdőről, a Figma számos funkcióval rendelkezik, amelyekkel egyedi terveket és animációkat hozhat létre összetevőihez, ikonjaihoz és objektumaihoz. A lebegtetési effektus lehetővé teszi a szöveg módosítását vagy kiemelések, különböző színek, különböző szegélyek és egyebek hozzáadását. Ezen effektusok létrehozásának ismerete rendkívül fontos az első webhely interaktívvá tételéhez és személyes megjelenéséhez.

Melyik lebegő effektust alkalmazza a Figma komponensein? Tudassa velünk az alábbi megjegyzések részben.