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!

1. 
   

   I created a second frame so that the main ‘card’ is situated inside it and make sure padding is all set to 0

   
   


2. 
   

   Duplicate this first frame and make style changes for what you want it to look like on hover (which will be your second frame)

   
   


3. 
   

   With your second frame, click RETURN on your keyboard once so that the card frame inside this frame is selected

   
   


4. 
   

   Set this inner frame to ‘Absolute position’

   
   


5. 
   

   With it now set to absolute, you can move it wherever you’d like with it still being enclosed by the outer frame

   
   


6. 
   

   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 💜