Hello everyone! 🙂
I’m super new to Figma, I’ve been using xd as my daily UI app, and now that I’m transitioning I can’t understand how to do something like this with Figma.
I just want the cards to go like 10px Up when I hover them like in the video below… I can’t seem to get it to move up with component variants and such.
Thank you very much for your help and time! 🙏
Best answer by Alyshia1
@Juliano_Gil hey I’ve found a way around this!
I created a second frame so that the main ‘card’ is situated inside it and make sure padding is all set to 0
Duplicate this first frame and make style changes for what you want it to look like on hover (which will be your second frame)
With your second frame, click RETURN on your keyboard once so that the card frame inside this frame is selected
Set this inner frame to ‘Absolute position’
With it now set to absolute, you can move it wherever you’d like with it still being enclosed by the outer frame
Prototype it like you already did before (eg. on hover)
And it should work! Hope this helps 😀
hey Juliano
You can create the frames and get them into a component set
so you could make the prototype for the pop-up card transition.
Hey Vicky! Thank you for your response! I appreciate it!
So I could only get it to work when the upmost frame holding the card, in both variants, has that extra empty space on the top.
If the default state has that upmost frame hugging the card it doesn’t do the animation. 🤔
It’s fine and all, but it messes a bit with the alignments in the rest of the page since this component carries an empty extra 20px space.
Is there a way to do with without that extra empty space in the default state? From what I can see your version only has that extra space in the hover variant, is that right? What am I missing?
Thank you again for your time, i appreciate you brother!
Hi Juliano
I don’t know whether we could do it in the standard state
You can use auto layout for the frames,
So it could adjust automatically for the pop-up animation
I have been working like this for making pop-up animation
in figma prototype
we will research if there are any better options, If I get
to know will put a comment about it.
@Juliano_Gil hey I’ve found a way around this!
I created a second frame so that the main ‘card’ is situated inside it and make sure padding is all set to 0
Duplicate this first frame and make style changes for what you want it to look like on hover (which will be your second frame)
With your second frame, click RETURN on your keyboard once so that the card frame inside this frame is selected
Set this inner frame to ‘Absolute position’
With it now set to absolute, you can move it wherever you’d like with it still being enclosed by the outer frame
Prototype it like you already did before (eg. on hover)
And it should work! Hope this helps 😀
@Alyshia1 Your solution is much better and professional, thank you Alyshia, you made my day 💜
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.