Skip to main content

So I have a list of cards inside a vertical scrolling container, and in each card there is an icon to hide the card. When the icon is clicked I’d like the card to fade away, and the cards below to shift up.


Sounds simple right?


Well I can’t get it to prototype it in the above way. I’ve tried 3 methods:



  1. The classic Navigate to another frame with the card missing. The problem here is that this is not a scalable solution. But also, I can’t get the fade out and cards shifting up with this method.

  2. Using a boolean variable tied to layer visibility. Here, the problem is that when the hide icon is clicked, everything disappears.

  3. Switching to a variant with height=0. This is really a hack, and it gets close, but two problems: It leave a blank space, even when I set the height to 0. And also I can’t get the card to fade out, and the cards below to shift up.


I’m starting to think what I’m trying to do isn’t possible in Figma, at least natively (without plugins).


Is this even doable? Here’s a test file you can copy. You can try the three methods with the first 3 cards.


Appreciate any help/pointers 🙏


image

Here is my take on it


Run live demo →


And here is the Figma file → https://www.figma.com/design/DwUOsLLdo0bCPMuI2OpWs7/Collapsible-Card-Demo

@Pavel_Kiselev Ah, thanks - you figured it out. I see what you did - you used method 3, but with two tricks:



  1. You put the card component into a container component

  2. You added autolayout to it and put a bottom-only padding - this takes care of the blank space issue (which looks like a Figma bug to me). Not ideal but hey it works.


With your tricks I managed to figure out how to do the fade out + slide up interactions by just adding an extra variant to the container component.


Here’s the ending solution to try out (prototype).


And the Figma file for posterity 🙂

Reply


Terms & ConditionsCookie settings