it took me 3 hours but I finally did it. What a nightmare. I had trouble with a) do not drag the text or circle out, use the arrow keys on your keyboard, otherwise the elements detach from that frame, b) make sure absolute position is on when on the text otherwise it won't move, c) make sure you create a component SET and not component, and d) make sure you select ease in and out, not just ease, otherwise it goes wrong. I'm in the early days by the way. I might try to replicate this tomorrow without the tutorial. Practice makes perfect.
These videos are extremely helpful. I am very new and honestly most of the videos out there are too long and confusing at times. I love how you explain things to the point yet keeping it so simple. I followed all of the videos in the playlist and for the first time i feel i understand figma much better. Thanks and keep making these videos for people like me!
Without a doubt the easiest to follow guide on button hovers out there, Tim. Thanks for sharing this quickie! Gave me some great ideas of things to play around with 💡
Tim, your channel is a goldmine of information for those who want to start a career in this field. I watch your tutorials almost on a daily basis, I learned a lot so far that's why I'm a subscriber of yours! Keep it up Tim, with your tutorials you help improve or refine the skills of the next generation of ux / ui designers. I salute you sir! Keep it up!
so nice of you to put together such an extensive and nice comment, my friend. I really appreciate this 🙏🤩 happy that you’ve learned things through my tutorials, and I sincerely hope that you’ll continue finding value in them. 🥳
wow there are a lot of possibilities with Figma animations! This one is really fun, thanks for taking the time to teach us something new! :D (Also I love the new background and your shirt!)
yeees Andrés! such a big playground with this feature 🤩 appreciate the kind comments as always, my friend 🙏 the background is temporary as I’m out traveling, but the shirt may stay for the long haul 🥳
Ah!.. what a relief! finding this tutorial! Thanks so much for this video. As I have little experience with Adobe XD, I thought it would be easier to figure it out by myself in Figma!! damm, its completely unexpected way! (I feel a little complex though... but ya, I will get used to it)! I wish you good health and wealth, Tim Gabe!
you will definitely get into it quickly, my friend! just keep on playing around with it 🙏 and thank you so much for the nice words ☺️ I wish you good health and wealth too!!
I am very confuse about the of execution of setup component to prototype component. I don't know if I should set up variant first or set up prototype first. can you help me
hey Darren! I’m afraid you can’t really export individual components with animations like this straight from Figma 😩 you could however achieve exactly this effect with a tool like Framer. they have direct export from Figma with their plugin 👌
hey JSK! as far as I'm aware, it's not really possible to do it straight from Figma as of right now. if you're using Framer you could export it over there and achieve the exact same effect on your site. 👌
you can’t really do it in an automated way from Figma (at least not that I know of), but if you show a developer every single step they should be able to translate it to web logic rather easily. ☺️
that is if you create the animation in a way that makes sense from a code perspective - in other cases I’d try to find a live example on a website or on codepen 😃
I created a component set as mentioned. Now I am using multiple instances of these components. The problem Im facing is that I am unable to override the text which is hidden (either on the top or bottom) and i am able to edit the text which is visible (in this case the text on the button). So whenever I hover on the button, the hovered state text is coming from the component itself and i want to change it. Can anyone help me..
I know the feeling 😅 however, this effect is quite easy to replicate in code and shouldn't impact performance too much! worst case you just build it yourself in Framer!
it took me 3 hours but I finally did it. What a nightmare. I had trouble with a) do not drag the text or circle out, use the arrow keys on your keyboard, otherwise the elements detach from that frame, b) make sure absolute position is on when on the text otherwise it won't move, c) make sure you create a component SET and not component, and d) make sure you select ease in and out, not just ease, otherwise it goes wrong.
I'm in the early days by the way. I might try to replicate this tomorrow without the tutorial. Practice makes perfect.
Spot on thanks mate
Arrow keys got me too. Thanks for your breakdown!
sorry to hear that it didn't go super smoothly! glad you fixed it!! 🙏
Such a life saver. You saved me the three hours
These videos are extremely helpful. I am very new and honestly most of the videos out there are too long and confusing at times. I love how you explain things to the point yet keeping it so simple. I followed all of the videos in the playlist and for the first time i feel i understand figma much better. Thanks and keep making these videos for people like me!
Without a doubt the easiest to follow guide on button hovers out there, Tim.
Thanks for sharing this quickie!
Gave me some great ideas of things to play around with 💡
Erman, my brother! 💜always appreciate your feedback and really love hearing that it sparked some ideas 🙏
Tim, your channel is a goldmine of information for those who want to start a career in this field. I watch your tutorials almost on a daily basis, I learned a lot so far that's why I'm a subscriber of yours! Keep it up Tim, with your tutorials you help improve or refine the skills of the next generation of ux / ui designers. I salute you sir! Keep it up!
so nice of you to put together such an extensive and nice comment, my friend. I really appreciate this 🙏🤩
happy that you’ve learned things through my tutorials, and I sincerely hope that you’ll continue finding value in them. 🥳
link to the Figma file 💜:
www.figma.com/file/SOmrCxWKaXWrEAWGIViZOU/Figma-Hover-Effect?node-id=0%3A1&t=2Da4onh6wri435Nl-1
Your tutorials are super useful.
really appreciate it, my friend 🙏🥳
I just learn this in a single shot! Amazing 👏 Thankyou Tim Sir❤🎉
Your tutorials are always out of the ordinary.. thanks and keep it up
that’s such a nice comment, my friend. thank you so much! 🥳
Thanks man, you're a saint!
happy to help, my friend 🤩
best video ever
Made my day
happy to hear it, Mohamed!!
wow there are a lot of possibilities with Figma animations! This one is really fun, thanks for taking the time to teach us something new! :D (Also I love the new background and your shirt!)
yeees Andrés! such a big playground with this feature 🤩 appreciate the kind comments as always, my friend 🙏 the background is temporary as I’m out traveling, but the shirt may stay for the long haul 🥳
it take me to watch video 4 time and in 2nd attempt i did it I'm love with smart animation and in Love with Tim Gabe too❤😍
that's awesome!! the smart animation feature is quite powerful 😃
Ah!.. what a relief! finding this tutorial! Thanks so much for this video. As I have little experience with Adobe XD, I thought it would be easier to figure it out by myself in Figma!! damm, its completely unexpected way! (I feel a little complex though... but ya, I will get used to it)! I wish you good health and wealth, Tim Gabe!
you will definitely get into it quickly, my friend! just keep on playing around with it 🙏 and thank you so much for the nice words ☺️ I wish you good health and wealth too!!
Solid Tutorial ✨🤩
thanks a lot Karthi! 🥳🙏
Thank you buddy!
thank you right back, Jainam!!
Wow Tim never knew there was another method to doing this.
happy I could teach you something new, Ikenna 😃🥳
@@TimGabe 🙌🏻
Very nice tut Tim 🥰
appreciate the continuous support, Ahmad 🙏😍
It's another amazing video 👏 Thanks for sharing it
thank you, Thao 🥳 really makes me happy when the videos are appreciated like this!
Inspiration !
happy you liked it!! 🥳🙏☺️
i enjoy to reproduce your design, its interesting
awesome Muhammad! 🤩
This is soo cool 🔥
appreciate the support, Tshili! 🥳🙏
Thank you Bro
thanks right back for commenting, friend!
set animation time to 400ms its looking so smooth
can play around with that smoothness all day...
I am very confuse about the of execution of setup component to prototype component. I don't know if I should set up variant first or set up prototype first. can you help me
variant always goes first as that's what you're using for the actual prototype 😃
Thank you. How do I export/save the button for use on my website?
hey Darren! I’m afraid you can’t really export individual components with animations like this straight from Figma 😩
you could however achieve exactly this effect with a tool like Framer. they have direct export from Figma with their plugin 👌
Solid work! can you suggest how do we export same effect in our html
hey JSK!
as far as I'm aware, it's not really possible to do it straight from Figma as of right now. if you're using Framer you could export it over there and achieve the exact same effect on your site. 👌
@@TimGabe thank you so much
that's a nice buddon
haha, definitely nice buddddon!
How can you handoff these animations to a developer?
you can’t really do it in an automated way from Figma (at least not that I know of), but if you show a developer every single step they should be able to translate it to web logic rather easily. ☺️
that is if you create the animation in a way that makes sense from a code perspective - in other cases I’d try to find a live example on a website or on codepen 😃
I created a component set as mentioned. Now I am using multiple instances of these components. The problem Im facing is that I am unable to override the text which is hidden (either on the top or bottom) and i am able to edit the text which is visible (in this case the text on the button). So whenever I hover on the button, the hovered state text is coming from the component itself and i want to change it. Can anyone help me..
Any luck getting a response on this. Having the same issue, I believe this is not the right way to animate effect.
you'd have to enable a text property on your text fields. hard to explain over text though 😅
My Dev.. guys will kill me if i gave them this kind of Animation
I know the feeling 😅 however, this effect is quite easy to replicate in code and shouldn't impact performance too much!
worst case you just build it yourself in Framer!
"budden" - How to create a fancy "budden" hover