Fancy Button Hovers For Figma Beginners in 2023
HTML-код
- Опубликовано: 4 июл 2024
- In this quick step by step tutorial we use Smart Animate and Component Sets to create a fancy button hover effect - the right way.
🔴 Working File: timgabe.com/resources/figma-f...
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
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 🙏
I just learn this in a single shot! Amazing 👏 Thankyou Tim Sir❤🎉
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 🙏🥳
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! 🥳
Thank you buddy!
thank you right back, Jainam!!
Inspiration !
happy you liked it!! 🥳🙏☺️
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 🥳
Made my day
happy to hear it, Mohamed!!
Thanks man, you're a saint!
happy to help, my friend 🤩
This is soo cool 🔥
appreciate the support, Tshili! 🥳🙏
Solid Tutorial ✨🤩
thanks a lot Karthi! 🥳🙏
Thank you Bro
thanks right back for commenting, friend!
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!!
It's another amazing video 👏 Thanks for sharing it
thank you, Thao 🥳 really makes me happy when the videos are appreciated like this!
Very nice tut Tim 🥰
appreciate the continuous support, Ahmad 🙏😍
set animation time to 400ms its looking so smooth
can play around with that smoothness all day...
i enjoy to reproduce your design, its interesting
awesome Muhammad! 🤩
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 😃
Wow Tim never knew there was another method to doing this.
happy I could teach you something new, Ikenna 😃🥳
@@TimGabe 🙌🏻
that's a nice buddon
haha, definitely nice buddddon!
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
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 😃
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!
In this situation is the button still auto layouted? I mean if I change size of button , the text automatically will be stay in center?
whenever you're using position absolute for text, the auto layout is broken since the parent doesn't recognise the content in it
@@TimGabe thank you for your time
"budden" - How to create a fancy "budden" hover
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 😅