Skip to main content
Solved

Spacing Problem with Prototype: On click hide and arrange Auto Layout elements

Paul_Peeters

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

Best answer by Junko3

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,

View original
This topic has been closed for replies.

3 replies

J
Figmate
  • Junko3
  • Figmate
  • 2002 replies
  • Answer
  • May 9, 2024

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,

1 Attachments
Paul_Peeters
1 person likes this
  • Paul_Peeters
    Paul_Peeters
Paul_Peeters

[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

Paul_Peeters

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 settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings