Support Auto Layout in Interactive Components

[Toon]

Thank you for the transparency! It makes all the difference between being frustrated or being excited. I’m really excited for this one!

Interactive components is already great, but auto layout × interactive components will enable me to make prototypes who would otherwise haunt me in my sleep.

[Shane]

Been thinking and experimenting a bit relating to this. I’m sure all you wonderful Figma peeps are all over it, but thought I’d post anyway - who knows, maybe someone has already solved the problem and can tell me about it

Sometimes I want to be using autolayout, for example in a long form, but I don’t want a change in the variant to affect the layout - opening a dropdown is the use case I’m working with at the moment. Issues I’ve struck/am thinking about for this:

• A possible workaround is to put the opened dropdown items outside the component frame ala tool tips, but then I can’t apply “while hovered” interactions
• if I’m placing elements outside the original frame, then I also can’t use “clip content”. That’s a problem for components that have scrolling content
• a workaround for the first workaround is to use a “mouse enter”, but then I also need to apply a “mouse leave” interaction, which is a bit redundant
• position of the new (non-autolayout affecting) variant needs to be controllable. I might want the dropdown menu to appear on top of the previous variant/state so that the currently selected value is exactly on top of the closed dropdown control for example.
• z-order in an autolayout when changing a component size that doesn’t affect the layout is a pain as well, but that’s been covered in other threads

[Agathe_Mametz]

Came here to report that too.

[Yulia]

+1

[Asaad_Mahmood]

+1

[Seth]

+1 …Came here to vote for this as I encountered the same problem today. Wanted to implement a fairly simple progressive disclosure pattern, and was unable to, as the items in my Autolayout form do not shift down or up when using interactive components.

[Doug_Wickham]

Keep us posted on this on Nikolas. Super helpful.

[_Alex]

Here I was thinking I was going crazy with nothing resizing based on the auto layout. Is there any update on this? It would make variants SO much more useful.

[Dmitry_Shkaev]

+1 Same here, was expecting it to work with expanding some dropdowns that would push the rest of the content down, but it still doesn’t work like this.

[Brigitte_le_Roux]

+1.

[Afiq]

Same issue here with my textfield component when it’s in typing state. the cursor’s position will return to its position as set in component.

[Damir]

Nudging it that little bit higher

[Devin_Hansen]

+1 for “Get it done” Looking forward to it!

[Peyi_Oyelo]

+1 Adding Auto layout support would make interactive components super powerful. Just an additional nudge.

[Val]

That’s the main feature missing in our prototypes, I definitely vote for it!!

[Glen_Lipka]

Any update on this? I have a similar situation.

I’ve got buttons like this that are next to one another in a row. When you hover over one, it expands with the text (interactive component variant) AND it should push the one on the right to the side to make room for it. They are in an autolayout.

I have tried this numerous ways and I think the problem is this idea.

[Stefan_T]

+1 🥲

[Daniel_Todd]

I have had a similar issue with a collapsing menu, where I thought I could create the individual rows then rig them up using auto layout. turns out to get the desired effect I had to create the menu as a separate component with all the items able to expand and collpase. then import the component into my prototype / wireframe

[Thessa]

Yes please! +1

[UX-Niels]

Hi Figma,
is it right that IC do not push other elements down in an auto layout frame? Doesn’t feel right

How this is set up:

Here’s the link to the file:

Figma