How to create a button that sparkles on hover in Figma

Опубликовано: 12 Май 2024
на канале: Memorisely
502
31

Did you get to see the northern lights this weekend? All this talk of stars made us think of this post from @sekeidesign! ✨ Learn how to create a button that sparkles on hover in Figma with these simple steps:

⭐ Start by creating some small stars and arranging them as you’d like
📦 Wrap the stars in a Frame, create a duplicate, and move the stars up
👬 Create another duplicate and move stars even more, and you can mess with their size and spread too
🔑 This is how you create the 3 keyframes of your animation
👁️ Finally, make the stars in the first frame smaller and 0% opacity
💠 Now turn the three frames into a component set
🐁 Smart Animate to the second frame on Mouse Enter
⏱️ And Smart Animate to the third frame after a delay of 1ms
🔄 Don’t forget to reset the animation to the first frame after delay
➕ Now add as many as you need to cover the size of your button

———
#figma #uxdesign #uidesign #uxuidesign #webdesigner #webdevelopment #figmadesign #figmatutorial


Смотрите видео How to create a button that sparkles on hover in Figma онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Memorisely 12 Май 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 502 раз и оно понравилось 31 людям.