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:
- Készítse el a gombot.
- Másolja le, és helyezze át a kereten kívülre.
- Módosítsa a duplikált gomb színét.
- 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.
- Kattintson a „Prototípus” fülre az oldalsávon.
- Csatlakoztassa a két gombelemet.
- Az „Interakció részletei” legördülő menüben válassza a „Lebegés közben” lehetőséget.
- 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:
- Hozzon létre egy gombot tetszőleges szöveggel.
- Másolja le.
- Adja hozzá a körvonalat a másolathoz, távolítsa el a kitöltést, és változtassa meg a színt.
- Kattintson a „Prototípus” fülre az oldalsávon.
- Csatlakoztassa a két gombelemet.
- 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ítania kell a beállításokat. Ezt a következőképpen kell megtenni:
- Válassza ki az összetevőt.
- Nyissa meg az Anima bővítményt.
- Érintse meg a „Hover Effect” opciót.
- Válassza ki a hatást (növekedés, zsugorodás, árnyékfény stb.).
- Testreszabhatja az olyan animációs effektusokat, mint az „Időtartam” vagy a „Görbe”.
- Érintse meg az „Előnézet” gombot az effektusok megtekintéséhez.
- 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.
