Card component not resizing correctly on hover mode

Hi @Bogdan_Iordache, Thanks for reaching out!
I tested on my side, I applied a [While hovering] prototype trigger to a card instance, but hovering outside the card doesn’t seem to reset the state automatically.

I think one option for the workaround here might be to add [Mouse leave] prototype triggers in addition to the [While hovering] on the card. Would you mind giving it a try to see if it works for you?

Here are some related articles from our help center:
https://help.figma.com/hc/en-us/articles/360040035834-Prototype-triggers
https://help.figma.com/hc/en-us/articles/14506587589399-Use-variables-in-prototypes

Hope this helps! If anyone else has alternative ideas, please feel free to share them!

Thanks,

Hey Junko! Thank you for your answer!

I don’t have a problem with the hover function when im not on the card. The problem is that when I hover, the card goes back to its initial size with all the elements on it, even tough I applied a boolean and the elements are hidden.

I use auto layout but it wraps around all the elements in the cards even if they are hidden by the boolean.

Hi, Bogdan.

Is it possible for you to share a video of this or share a copy of the file? I’m quite intrigued with it.

Thank you!

Here is a video. I’ve now used fixed heigh for the card when in default mode but once I hover, it hugs all the elements in it although they are hidden.

can you share the file ?

Hi, Bogdan.

Will you mind sharing the file? I just need to confirm something about the prototype and the components.

Thanks!

Hi @Bogdan_Iordache, Thanks for replying and appreciate sharing the video!
Could you please include the whole window, showing the properties and layers panels and relevant layers expanded?

Or, as @Raphael_M and @mo_hamwi have said, would you mind sharing a copy of your file?
That will help provide us with more visual context.

Thanks for your help! Look forward to hearing from you!

Hello everyone!

Here is a link to the file, maybe this will help: https://www.figma.com/file/gO57lxXCexIVt3wkwnvWgJ/Untitled?type=design&node-id=0-1&mode=design&t=p0JogbopUXTUPrwS-0

Hi @Bogdan_Iordache, Thanks for sharing your file! I’ve been looking into this internally and will provide an update once I have more information to help your situation.
In the meantime, if anyone else has any ideas, feel free to jump in!

Hi, Bogdan.

Thanks for allowing us to see through your prototype.
If I’m not mistaken, the hover effect that you want is something like this?

After checking your nested layers, some layers of your Desktop card text is in fixed height and fill. You will need to put all of the Card text frame and its subsequent layers to hug in order for this to work.

Aside from that, you may also opt to change the rectangle you used for the hover effect and set the constraints to left and right and top and bottom in your main component so the size will follow the card size.

Hey Raphael! Thank you for your help!

The rectangle I used for the card seems to be stuck on fixed and Left and Top constraints. Both are greyed out 😕

Yes. You will have to edit it on the main component directly. 😀

Still cant figure it out xD I want to set a fixed height in Default mode but then when I Hover over it goes back to the large size as if all elements are there and not hidden by boolean (and also not respecting the fixed height I set for the Default mode)

Hi, Bogdan.

Because you’ve been using instances you will have to get your height fixed directly on the main component. You won’t be able to modify the subsequent layers of your instance.

What you do is set the fixed height you want on the Desktop card text layer. After fixing the height, set all the subsequent layers’ heights to fill.

> Note: Do this directly on the main component. Do it on both default and hover mode