Skip to main content
Question

Variant addition breaks component

  • December 22, 2023
  • 4 replies
  • 493 views

Jack27

I have designed a menu bar, and once I make a variant of it or an instance of it it breaks the auto layout of the frame so the different frames within it don’t resize as one reopens.
Picture 2. is the main component inside a frame and picture 1. is a instance of that main component. Same issue happens if I create a variant but still insert the main component.
I want the component to work as the main component does in picture 2.

Any feedback or help is appreciated!

This topic has been closed for replies.

4 replies

Armin_Rouhanian

I believe your main component’s primary frame is set to “fixed height”. I had the same issue before. when you set it to FIXED, it will try to keep the size equal to the first variant (which in yours, is the collapsed version). hug content will fix your problem, I don’t know why but it doesn’t work if you only change the instance, the main component should be hugged itself.

let me know if it didn’t work.


Jack27
  • Author
  • 2 replies
  • December 27, 2023

I tried this but it still seems to malfunction unless its the main component inside the frame.

I’ll share a file with the components inside: https://www.figma.com/file/e5zn2N8V3hxsUtvlqTvhzj/Test?type=design&node-id=0%3A1&mode=design&t=ymU6BJpHfXts6HWE-1

Is it possible to make it have fixed height since i want there to be some empty space within the frame?

Many thanks for the help!


Armin_Rouhanian

Thank you for sharing the file. I checked the component. the reason that it doesn’t work is that your chapter components (it’s named Component 29) didn’t have auto layout. This usually happens when you have nested components:

lets say you have a menu component (I call it menu), that contains some smaller instances of another component named ListItem. your menu component should contain hugged-content instance of ListItem. if you don’t do that, somehow it cannot track the original size of listItem’s variants, instead, it will always use the fixed size you haved used in the menu (like it’s overriden). to fix this problem, make sure you listItem component is on autolayout and is able to resize in all of it’s variants. then, use it in the menu component.

check out your file again. I created a copy of your components and edited them. Hope this helps.


Jack27
  • Author
  • 2 replies
  • January 9, 2024

Thank you Armin, this solved the issues.

you are a true asset to the Figma community! 🙏


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