Kā izveidot kursora efektu programmā Figma

Figma ļauj lietotājiem izstrādāt un pielāgot daudzas funkcijas. Viena no funkcijām, ko varat izmantot, lai uzlabotu lietotāja pieredzi, ir kursora novietošanas efekts. Kursora novietošanas efekts uz pogām nozīmē, ka, virzot kursoru uz to, redzēsit citu dizainu. Šis efekts pats par sevi var atšķirties — no standarta, kas maina krāsas, līdz sarežģītākām metodēm, piemēram, apmales vai izcēlumu mainīšanai.

Lasiet tālāk, lai uzzinātu, kā Figma komponentiem pievienot kursora novietošanas efektu.

Kursora efekta izveide uz pogām

Varat iestatīt kursora novietošanas efektu, ja vēlaties, lai komponentam būtu noteikta mijiedarbība un pāreja, kad virzāt kursoru virs tā. Vienkāršākais rezultāts, ko varat izveidot, ir pogas krāsas maiņa, lai izceltu to, lai noklikšķinātu. Tālāk ir norādīts, kā pogas komponentam varat izveidot kursora novietošanas efektu.

1. Izveidojiet pogu.
   
2. Dublējiet to un pārvietojiet to ārpus rāmja.
   
3. Mainiet dublētās pogas krāsu.
   
4. Izveidojiet komponentus, ar peles labo pogu noklikšķinot un izvēlnē atlasot "Izveidot komponentu" vai nospiežot tastatūras taustiņu kombināciju "Ctrl + Alt + K".
   
5. Sānjoslā noklikšķiniet uz cilnes "Prototips".
   
6. Savienojiet abus pogas komponentus.
   
7. Nolaižamajā izvēlnē “Informācija par mijiedarbību” atlasiet “Viedot kursoru”.
   
8. Tajā pašā izvēlnē noklikšķiniet uz opcijas “Atvērt pārklājumu” un iestatiet pārklājumu uz “Manuāli”.
   

Kad lietotājs virza kursoru virs sākotnējās pogas, tā tiks aizstāta ar pogu ar citu krāsu. Līdzīgā veidā varat mainīt arī tekstu, kas tiek rādīts uz pogas.

Jums tas būs jāatkārto katrai pogai.

Kursora efekta izveide uz pogu apmalēm

Vēl viens veids, kā izmantot kursora novietošanas efektu uz pogas komponentiem, ir izveidot apmali, kas mainās, virzot kursoru virs pogas. Lūk, kā to izdarīt:

1. Izveidojiet pogu ar jebkuru tekstu.
   
2. Dublējiet to.
   
3. Pievienojiet svītru dublikātam, noņemiet aizpildījumu un mainiet krāsu.
   
4. Sānjoslā noklikšķiniet uz cilnes "Prototips".
   
5. Savienojiet abus pogas komponentus.
   
6. Nolaižamajā izvēlnē “Informācija par mijiedarbību” atlasiet “Viedot kursoru”.
   

Tagad, kad priekšskatāt pogas efektu un virzāt kursoru virs tā, uz tā parādīsies krāsainas apmales.

Anima spraudņa izmantošana programmā Figma

Vēl viens veids, kā programmā Figma pievienot kursora efektu, ir izmantot rīku Anima noformēšana uz kodu. Šim spraudnim ir unikālas funkcijas, kuras varat ieviest, veidojot vietnes, lietotņu ikonas vai citus tīmekļa komponentus programmā Figma. Jums tikai jāizvēlas, kuru komponentu vēlaties animēt, un attiecīgi jāpielāgo iestatījumi. Lai to izdarītu, veiciet tālāk norādītās darbības.

1. Izvēlieties komponentu.
   
2. Atveriet Anima spraudni.
   
3. Pieskarieties opcijai “Hover Effect”.
   
4. Izvēlieties efektu (augt, sarukt, ēnas mirdzēt un daudz ko citu).
   
5. Pielāgojiet animācijas efektus, piemēram, “Ilgums” vai “Līkne”.
   
6. Pieskarieties pogai “Priekšskatījums”, lai redzētu efektus.
   
7. Noklikšķiniet uz "Saglabāt".
   

Vēl viena Anime spraudņa iezīme ir tā, ka varat pielāgot CSS pāreju. Ar to jūs varat kontrolēt animācijas ātrumu un pielāgot tās iestatījumus savām vēlmēm vai padarīt tos dabiskākus.

Izmantojiet Figma sviras efekta funkcijas priekšrocības

Neatkarīgi no tā, vai esat profesionāls dizaineris vai iesācējs, programmā Figma ir daudz funkciju, lai izveidotu unikālus dizainus un animācijas saviem komponentiem, ikonām un objektiem. Kursora efekts ļauj mainīt tekstu vai pievienot izcēlumus, dažādas krāsas, dažādas apmales un daudz ko citu. Zināt, kā izveidot šos efektus, ir ārkārtīgi svarīgi, lai padarītu savu pirmo vietni interaktīvu un pievienotu tai personisku pieskārienu.

Kuru kursora novietošanas efektu jūs ieviešat saviem komponentiem programmā Figma? Paziņojiet mums tālāk komentāru sadaļā.