Skip to main content

Hi,


I feel like I have a problem, that should be relatively common with people creating prototypes. In general its a straight forward thing I want to achieve:



  • I have elements in an AutoLayout

  • When I click Element A, it should disappear and the other elements should move up

  • When I click Element B, it should disappear and the other elements should move up

  • And so on


The Problem:



  • The Layers don’t “really” disappear (I have set the height to 0.00001), so that i have a shift in the prototype every time I click on an element.


What I have found in the forum as solution to set a height of the element, that should disappear to 0.0001, but as described this doesnt really work.


This is a functionality, that is so common in everyday apps and software, that I am wondering if I am missing something?

Bildschirmfoto 2024-05-07 um 14.49.17

Hi @Paul_Peeters, Thank you for reaching out and taking the time to explore our community! I really appreciate your engagement.


I’ve done some testing on my end, and it seems that setting the height to 0 works.



Could you please double check the Auto layout properties? Below are the settings I’m using for your reference. You can find more details here: ​​Explore auto layout properties

Screenshot 2024-05-09 at 12.33.16


Additionally, I explored our community and found related design file which might inspired you: Auto Layout Tips & Hacks


I hope you find this helpful! If there’s anything else I might have missed, please let us know. Also, if anyone else in our community has further insights or tips, please feel free to share!


Thanks,

[edit] → It now works with the line → frame → delete line hack! Thanks again!


Hi Junko3,


thanks so much for the response and also the attached Tips&Hacks file. This is exactly the problem I am having and in your example video you have the solution I need 🙂 .


I actually tried the approach to just set the variant to 0 as well as the hack with creating a line, frame it, delete the line. For some reason I still get the unwanted space for each item clicked. This is my process:



  • create a rectangle

  • create the line, frame it, delete the line

  • make a component set of both

  • set a on click event to change the state to the empty frame


Is there something you have been doing differently?


Thanks so much!


Bildschirmfoto 2024-05-10 um 10.24.54


Bildschirmfoto 2024-05-10 um 10.25.29

Also a little “bug” I discovered:


Since I wanted to have a spacing between the elements I originally set the spacing inside the autolayouted frame. With this, the spacing “bug” will be there again.


As a solution I set the spacing to 0 and added a margin in the original component variant. This way it works.

Reply


Terms & ConditionsCookie settings