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/re...
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.
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. 🥳
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 💡
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!!
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 👌
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 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. 👌
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!
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..
