Figma Support Forum

Support Auto Layout in Interactive Components

So say I have a vertical list, one small card, one big card, make them variants, rig them up on click, smart animate. Without IC, it would smart animate and push the rest of the list down when connecting using two different screens.

Try the same thing, open and closed state, rig them up, then use the base state in a list… just opens under the others, doesn’t push down?

If I group it/make the list a component itself, the behaviour won’t work at all. If I extend the length of the list frame/component, it still doesn’t do anything.

Perhaps it’s not intended to do this?

8 Likes

Auto Layout doesn’t work quite right with interactive components in playback yet, but our goal is to get this working before we officially launch this feature (i.e. once it’s no longer in beta).

Just to make sure we’re talking about the same thing: in the example below, if you have an interactive component with a collapsed and expanded state, ideally you’d want expanding the first component to push down the rest in the stack, right? The expected behavior for this beta is that Auto Layout works in the editor, but not when you interact with it in playback.

Smart animate should work so long as the layer names are matching. I’m guessing the issue here has to do with Auto Layout not being triggered, but let me know if I’m missing something!

13 Likes

Yes this is correct.

O ok, that’s all good, just wanted to make sure I wasn’t missing anything.

I was confident that was the case.

It’s good to hear that it will indeed do this soon/stable release.

It’s also great to see “on delay” in the mix of things added. I think there’s a couple bugs with that as well… but I couldn’t give you a specific example this second.

1 Like

I had the same issue, I think. Maybe I got confused by the answers above, but here’s a video showing the unexpected behavior from my point of view.

Here’s a Auto Layout frame, with 5x Interactive Components in it. The “delete” feature of the IC animates to a last variant that has 0px height. I expect the IC components under the “deleted” one to move up and fill the space of the newly deleted component.

Is that the same behavior as discussed above?

6 Likes

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.

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!

22 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!

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