Card component not resizing correctly on hover mode

Hello!

I created a card component with various items. The problem is that when I have a longer title, I can set the card height of the others two to match the longer one but once hovered, the card goes back to it’s initial size which is way too large because of the elements that I’ve added but hid them with boolen.

Does anyone know how to make a card component that resizes automatically when in default and 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.

1 Like

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 ?

1 Like

Hi, Bogdan.

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

Thanks!

1 Like

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

1 Like

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.
image

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.
image
image

1 Like

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 :confused:

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

1 Like

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

1 Like