Figma Support Forum

Support Auto Layout in Interactive Components

Yes, yours is just an awkward example. They should slide up on delete (but don’t) where as we were expecting the stack of cards to slide down when the clicked one enlarges.

Opposite, but same thing. She said they will get it working for the stable release, but yes, in beta it’s known limitation right now.

2 Likes

JFYI I updated the title of this post and bumped it over to the Feedback category so we can keep tabs on it.

1 Like

Hi, I have set up the interactive components under a nested Auto-Layout. Here’s the Interactive Component setup screenshot:
Screenshot 2021-03-01 at 9.02.38 PM

And here’s the same IC component added under auto-layout:

Now, look at the interaction. The Interactive Components are functioning as expected except they don’t push the “Share” button to the left; respecting its auto-layout configuration.

4 Likes

I have the same issue with a button

I’m having the same issue. I believe I have the proper auto-layout settings–the frame responds appropriately in edit mode. But the prototype doesn’t reflow.

Hey there everyone,
unfortunately Auto Layout is not supported with this version of interactive components. It’s very high on our priority list, though!

25 Likes

@nikolasklein thanks for following up.

Are you targeting Auto Layout support for the public release?

Just trying to set my expectations, since this use case is my most important use case of interactive components. We don’t have a design system (yet), but building interactive prototypes to showcase my work is an important part of my workflow and IC makes my life so much easier.

Facing the same issue. Bump!

@Sankalp_Sinha
Waiting for the support of auto layout…
Does it change something for you to swap the position of “share” and “follow” ?

I can’t promise any exact timelines, sorry. Sometimes you find the trickiest cases in the 11th hour.

But what I can say is that auto layout × interactive components is a top priority and if it won’t make it for the public launch of interactive components it looks likely that it will come as a fast-follow.

Hope that helps!

6 Likes

Thanks @nikolasklein! Appreciate the transparency.

@Sankalp_Sinha @Sebastien_LOUAP @Brian_Greenbaum I’ve merged these posts into a single thread for supporting Auto Layout so it’s easier for us to track. Hope that’s ok!

2 Likes

Sure, let us know when the update is available for this.

Also, Auto Layout cuts out a dropdown menu opened with Interactive Components, if it gets outside the frame, even if clip content is disabled.

2 Likes

Hey, seems like it’s been reported widely already but I’ll just drop in an additional case with auto-layout and constraints.
If my variant interactive component is in an auto-layout that’s been resized, and I set the component to fill container horizontally, they work fine in the editor, and the other variant inherits the fill container property, but in the proto view it doesn’t.

Loving this feature already btw, can’t wait for it to be public!

Similar thing raised over here – but looks like it will be covered in the full release :tada:

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.

1 Like

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 :slight_smile:

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 :slight_smile:
2 Likes

Came here to report that too.

+1