Skip to main content

I am designing a product card and encountering an issue. I want to make the card responsive using auto layout. So far, everything is going well. However, I have also added two properties, namely a label with the text ‘New’ and a wishlist icon. But when I disable one of these two properties, the other label shifts. I have the auto layout set to ‘Gap set to auto’. Does anyone have an idea? See enclosed images.


I dont know if this is a solution to you problem, but I’ll give it a try; Instead of hiding the object, try setting the opacity to 0%. Then everything should stay in place.


It might be better ways to do this, as I feel my solution maybe is a ‘quickfix’ rather than a permanent solution. Making a component with two variants (one with both properties, and one with only one) might be more scalable.


Hope this can help!


Set those layers to “Fill” for their width.


Ideally we need to tell us the expected behaviour for when you hide each layer.


Reply