Hello 🙂
currently I’m working on a prototype and I have a list with removable listitems.
I’m using Autolayout and by letting the user click “x” on the listitem, I want it to be removed from the list. Is this possible in Figma?
Solved
How to hide element in prototype?
Best answer by Gleb
No, this is not possible to do in a “programmatic” way, but you can create another frame with one item removed and transition to it when the remove button is pressed.
This topic has been closed for comments
No, this is not possible to do in a “programmatic” way, but you can create another frame with one item removed and transition to it when the remove button is pressed.
Hi Gleb,
thanks. I hoped that I could do a bit more realistic prototype without having tons of frames, now that interactive components had been released. Very unfortunate. But thank you! I will go with that workaround.
1 person likes this
Interactive components are still in beta and they don’t support auto layout at this point, but when they will be released they should work with auto layout so this might be somewhat possible.
Hey, I have the same need as @h.rude. Without an ability on “Click → Show/Hide X” I have to create many more frames and interactions which feels unnecessary. Is something like this planned?
I believe this is now posible with Variants (where buttons can have multiple states). https://help.figma.com/hc/en-us/articles/360061175334-Create-interactive-components-with-variants
Is it? You’d still need to either create a new flow frame, where the items is deleted. Not sure how the variants can help. I’m not able to create the frame smaller than 1 px - so there will always be a remaining bit of the variant. I cannot fully remove it. Or am I missing out something?
I figured out a workaround for this (with one caveat).
- Create a variant which is just an empty frame. Set the height and/or width to 0.001 (you can’t set it to zero). I used a property called “Dismissed” for this, set to false for all variants except the empty variant.
- Add interactions to change to the empty variant when the dismiss/close button is clicked.
In the prototype, when you click the close button it will switch to the empty variant with a height of (almost) zero. The caveat comes when the component is placed within an auto layout that has space between items. If you dismiss/close the element, it’s technically still there, so the space around it will not go away. It’s not a perfect solution, but at least communicates the intent in a prototype.
If anyone has a way to make a truly empty variant this would solve the auto layout spacing issue.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.