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

Question

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?

Junko3 · Accepted Answer

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

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,

Paul_Peeters · Answer

[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!

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

3 replies

1 Attachments

Solved topics

Problem with PNG in my projects

Problem loading PNG in my projects

Education plan expiring, multiple teams

Random grid lines when exporting image

Do plugins work in Figma Site mode

Cookie policy

Cookie settings

1 Attachments

Related topics

Text Override doesn't work on nested variants with interactive componentsicon

Improve the New Position Sticky Implementation

How to prototype tables with fixed columns on edges and horizontal scroll on the mid section?icon

Prototypes jumping and glitchyicon

How to hide element in prototype?icon

Solved topics

Problem with PNG in my projects

Problem loading PNG in my projects

Education plan expiring, multiple teams

Random grid lines when exporting image

Do plugins work in Figma Site mode

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded

Cookie policy

Cookie settings