Component variant auto layout behavoir


i have a problem setting up components that are resizing on click. There is a left side behaving as i like. With auto layout it is pushing the right elements to the right and lower elements down. The right side should do the same only sides inverted, that it pushes left elements to the left and lower down.
Can anyone please help me to make this happen and if it is not possible, maybe is there any idea to get something similar done?
My idea is to get a bubble that offers further information on click. The most easy way would be an overlay hovering in, but i thougt about something thats different.


Hey @Sebastian_Bratge,

It’s hard to be sure what’s happening without seeing your file. You’ve shared it here, but it looks like we still need to request to access it.

Can you share it with us here?

Please use your Figma account email, include a link to the file, and share it with, so we can take a closer look.

Hello @dvaliao ,

thanks for your reply. Sorry, I made i mistake with the sharing settings.
Im not sure what topic/issue to choose in the request section.
But, now i think it should work with this link:

I already went on working with a different solution, but i’m still interested in what i was doing (or thinking) wrong.
Later i have another problem with this layout…

Thank you

Thanks, @Sebastian_Bratge!

We took a look at your file, and this is sadly an expected behavior at the moment. Wrapping only flows one way, but our team is aware of this issue and it’s on our radar to fix!

1 Like

Thanks @dvaliao for your help. :pray:
As is told i went on and got it working with a little different behavior as planed. It is now only moving down. I got another problem with this idea. When i wanted to turn this thing into a component, it is still working correct, but i need some variants of this and therefore i need instances. As soon as i take an instance from the component the autolayout inside of it stopes working.
I made a project with some descriptions:

I would really appreciate if you also can take a look there.
Thank you :slight_smile:

Hey @Sebastian_Bratge, sorry for the delayed reply!

We took another look at your file, and if we’re understanding what you’re trying to accomplish correctly, this is also currently expected behavior. You cannot add new elements to a component instance, but this is on our radar for improvement:

Hello @dvaliao
Thank you for looking at the (new?) file.
It is not about adding new elements to an instance.
It’s only about the behavior of the auto layout inside this component. In the component it is working as expected, in the instance it differes. There was nothing added or changed in the instance.
Or does it mean that to switch variants within an instance means the same like adding elements?
Only because i’m not sure about the link you took. I created a new file for the second problem:

Thank you :slight_smile:

Sorry for the confusion and thanks for clarifying!

Our team confirmed that this is a feature limitation for nested instances, where changing variants or swapping instances in nested instances does not update their sizes according to the new selections.

As a workaround, you can enable auto layout on each new variant of your components to allow the nested instances to resize correctly.

1 Like