Layers order + Interactive components in auto layout

I’m waiting and waiting and waiting…

1 Like

FYI an update just dropped at #Config2022, which changes the visual order in auto-layout and gives you the option to change the canvas stack order as well. See What’s new in Auto layout

However, when I tried it out it seems to work in design time (toggle variant and dropdown list appears on top of other auto-layout items below it :+1:t2:), but when I “present” it still shows as before with auto-layout items on top of dropdown list. :thinking:

Hey @Henri_Fournier does refreshing the prototyping tab fix this for you?

@Josh Yeah, I tried refreshing, closing and reopening, but it didn’t help. It’s a bit of a different setup though.

I’ve created a generic Modal component with Header, Body and Footer frames. In the Body frame I have a “nothing” component as a placeholder. When I need a modal, I create a “content” component with what I want in the modal body; grab my generic Modal from the Assets; and swap its “nothing” component in the Body with my new component. Voila! A custom modal, with a lot less effort.

When I prototype just my “content” component, I see the proper behaviour, just like at design time. That is, the dropdown list appears on top of the other auto-layout components below. However, when I prototype the modal, it doesn’t work. So swapping a component in a component somehow breaks it and shows the old behaviour.

Hope that makes sense.

You can use Stacking on Pro Layout Panel to change the stacking order

2 Likes

@Josh The first screenshot shows the “content” component with proper behaviour and the second screenshot shows that same “content” component inside the Body of the generic Modal component.

do you have a file you can share with us that reproduces this? And this only happens in the prototype viewer?

@Michael_Feldstein Here you go

@Josh I’m fairly new to Figma. Is there a way to get this to the dev team to investigate? The test page at the link above should demonstrate the problem pretty clearly.

I agree with it. +1

Whatever the issue was, it now appears to be fixed. Thanks.

Now you can change the stacking order directly from the auto layout settings

1 Like

image
I solved by changing the auto layout option => click on the 3 dots > Advance layout > Canvas Stacking > First on top

2 Likes

Even if it is tricky, it solves my issue with a simple dropdown menu on the top bar of the auto layout - so- Thank you!