5 Amazing Button Animations in Figma | Tutorial

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
📝 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

[@luboivanov1940]

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!

[@Sergei-Chyrkov]

Thanks for feedback and pointing out important moments for other designers! Good luck!

[@lottari3682]

Another fantastic and easy to follow video! Make more!

[@Sergei-Chyrkov]

Thanks!) I’m happy you like it!)

[@MilanB]

This is a cool concept for a tutorial. Great way to learn multiple stuff in one short video. Thanks. :)

[@Sergei-Chyrkov]

Thanks!😁 I’m glad you like!

[@yoericktv9610]

Super awesome tutorial. Thank you so much!

[@Sergei-Chyrkov]

Glad you enjoyed it!

[@oluwasegunreus5350]

amazing! I guess I like the second button! I’d like to practice it over and over again! Weldone 😊

[@Sergei-Chyrkov]

Great!) we can get the link to a file in the description!)

[@jaspercorlet9358]

Amazing tutorial.... thanks for sharing 😊

[@Sergei-Chyrkov]

Thanks!) I’m glad you like it!

[@SHINeeShawol525]

button 2 looks super cool!

[@Sergei-Chyrkov]

Agree, one of my favorites))

[@youssefashrafmohamed2625]

Thank you, very interesting.

[@Sergei-Chyrkov]

Glad it was helpful!

[@user-zg7rr1kb9g]

Fire!

[@Sergei-Chyrkov]

🔥

[@deepthi6249]

I think one of the easy way and the best tutorial for animation and it is so great and awesome video ...easy to understand .... Thank you soo much for the great video.❤

[@Sergei-Chyrkov]

Thank you so much for this lovely feedback!☺️ I’m glad you like!

[@macacoasiatico3391]

great video!!!

[@Sergei-Chyrkov]

Glad you liked it!!

[@jaspercorlet9358]

All button effects had a wow effect on me. However I loved the 3rd button effect, the one with the light effect on it......

[@Sergei-Chyrkov]

Thanks for feedback!) yes, I believe you can use it for luxury sites

[@uifry]

Amazing Sergeri :)

[@Sergei-Chyrkov]

thank you!))

[@averageweirdude6763]

excellent tutorial❤

[@Sergei-Chyrkov]

Thank you! 😊

[@user-ez5hk9ck4g]

Thanks for sharing Ideas sir, Love from India

[@Sergei-Chyrkov]

You are welcome, my friend!😉

[@ColonelSternlove]

Can you show these buttons in how they would fit in a responsive grid/auto layout?

[@Sergei-Chyrkov]

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

[@ColonelSternlove]

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.

[@Sergei-Chyrkov]

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.

[@ColonelSternlove]

@@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!

[@Sergei-Chyrkov]

Good luck!🙌

[@lexibrowning7447]

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?

[@Sergei-Chyrkov]

Yes, try “absolute position” of the element inside the auto layout

[@flow_ryan]

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

[@Sergei-Chyrkov]

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.

[@onuohaui]

I tried this but the absolute positioning didn't still clip the content.

[@Sergei-Chyrkov]

Please check your layers and smart animation settings

[@IV__KRISHNAKUMART]

How to convert into code

[@Sergei-Chyrkov]

You can try to use plugin To HTML, or copy css properties and code manually

[@YorichiXDesigns]

i'm getting animation glitch🥲

[@Sergei-Chyrkov]

🫣