Component Props: Layers that contain boolean properties inside still retain original height when all internal props / layers are turned off

When I turn all of the props off within a frame – the frame that contains all the prop elements, which no longer has any items within it, retains the height as if all elements were in it, but just invisible.

I have a card component with component properties. Two of those properties are Boolean (turning on and off CTAs at the bottom of the card). I have a Button and a Link at the bottom of the card. I would like 4 outcomes.

  • Button & Link
  • Only Button
  • Only Link
  • No Button, No Link

The 2 CTAs are within an autolayout frame (because I wanted them to be spaced differently from each other than the rest of the card). The first three outcomes work fine. But the fourth messes up the height of the card.

Yes, there are hack-y ways around this, like adding a prop on the outside container frame and then turning that prop off if all items inside are hidden - but this is messy and creates a confusing experience for other designers using this component.

I know autolayout / frames need at least 1 source of height to be defined, thats why autolayout buttons don’t disappear when you delete the text within - but when using props in components, the autolayout frame should know to be set to 0px height if all of the props inside it are turned off.

Link to Figma example
Make a copy to edit and play around with the prop toggles

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.