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.

Terms & ConditionsCookie settingsAccessibility statement