5 Amazing Button Animations in Figma | Tutorial
HTML-код
- Опубликовано: 12 июн 2024
- In this video I want to show you 5 amazing button animation examples which you can easily create in Figma. We'll cover auto layout function and smart animation. Be sure to check out my other videos about animations in Figma.
👉 Link to Free file: www.buymeacoffee.com/sergeich...
______________________________
🎁 Book a free (limited time only) mentor session with me on ADPlist: adplist.org/mentors/sergei-ch...
______________________________
My links ⬇️
▸ My website - sergeichyrkov.com
▸ My studio - chyrkov.studio
▸ Twitter - / sergeichyrkov
▸ Instagram - / chyrkov
▸ Behance - www.behance.net/chyrkov
▸ Linkedin - / sergeichyrkov
🎶 www.epidemicsound.com/referra... - best service for royalty free music, use my link to get 30 days for free.
📝 Chapters:
0:00 Intro
0:17 Create button 1
3:22 Create button 2
6:20 Create button 3
8:55 Create button 4
11:50 Create button 5
14:13 Final words
_____________
#figma #figmatutorial #uxui #webdesign
Another fantastic and easy to follow video! Make more!
Thanks!) I’m happy you like it!)
This is a cool concept for a tutorial. Great way to learn multiple stuff in one short video. Thanks. :)
Thanks!😁 I’m glad you like!
amazing! I guess I like the second button! I’d like to practice it over and over again! Weldone 😊
Great!) we can get the link to a file in the description!)
Super awesome tutorial. Thank you so much!
Glad you enjoyed it!
button 2 looks super cool!
Agree, one of my favorites))
Amazing tutorial.... thanks for sharing 😊
Thanks!) I’m glad you like it!
Thanks for sharing Ideas sir, Love from India
You are welcome, my friend!😉
For anyone having trouble to create the BUTTON 2:
Do follow every single step Sergei does because I didn't and was struggling. The really important element there is the FRAME which I didn't do and he even said it is really IMPORTANT. If you try to do it without a frame, the shadow simply fades away under the button without it "moving" down. The frame acts as a "mask" or a "window" where everything you move is registered and smart animate will take into consideration.
I hope this helps other designers. Lovely tutorial!
Thanks for feedback and pointing out important moments for other designers! Good luck!
Thank you, very interesting.
Glad it was helpful!
excellent tutorial❤
Thank you! 😊
great video!!!
Glad you liked it!!
Amazing Sergeri :)
thank you!))
Fire!
🔥
All button effects had a wow effect on me. However I loved the 3rd button effect, the one with the light effect on it......
Thanks for feedback!) yes, I believe you can use it for luxury sites
I'm having trouble creating a button, but the last version! I don't want the little rectangle to appear at the bottom, I just want to have empty text, then the background appears with a hover. However, it offsets my text, and it moves it to the center of the rectangle whenever I do it... Do you have any tips? This sounds so simple to resolve but I can't manage haha
Hi! Are you using auto layout? Try to set background rectangle to absolute positioning. Or try to build the button from a regular frame with text.
Is it possible to do this when the buttons are built with auto-layout and their content at different instances causes them to be different widths?
Yes, try “absolute position” of the element inside the auto layout
Can you show these buttons in how they would fit in a responsive grid/auto layout?
It depends how you want it. It can be in “hug” mode just to be the size of the text or “fill” if you want it to be full width on mobile. Of course hover effect will not work on mobile but you can use this effects for pressed state
Totally understand - it’s just sometimes good to see these in situ. For example, the 1st button design, would the circle still fill button if it was responsive to fluid grid or would I keep having to adjust the size of the black dot for each grid.
yes, probably you'll have to adapt the size of the back circle because the width of the button would be larger. However you can try to make back circle 2x large in the main component so it also fills on the mobile and you don't have to adjust it.
@@Sergei-Chyrkov thanks! You’re correct - you just have to make the object in the mask (circle) huge and adjust the timing if it’s off. Thanks for your help!
Good luck!🙌
How to convert into code
You can try to use plugin To HTML, or copy css properties and code manually
i'm getting animation glitch🥲
🫣