Figma Support Forum

Does Autolayout work in Published Components?

There may be a simple answer to this, as in “no”, but I wanted to check. If I make a simple dropdown menu (as an example) using autolayout, then create a component from it and publish it, the instances of that component won’t let me change the order of the menu items like you can when creating the menu. So I cannot select a menu item, use drag-drop or arrow keys to re-order the menu items once it has been made an instance, correct? So the advantage in autolayout arrangement adjustment is only in the creation of the components, not after they are being used in a library? I have to detach them from the master component to make order adjustments? I may just be missing something in the way I am creating them. Thanks, Ben

The problem is not related to auto layout but rather to the principle of components and instances.

An instance derives from a main component (a parent child connection) so the order of the elements in an instance is imposed by the main component to which it is linked.

In spite of this limitation there is apparently a plugin that offers the possibility to reorganize the elements of an instance without having to detach it.

Check : Instance Utils by @Mr.Biscuit

Piggybacking on this because it’s related: Is using Instance Utils the most popular, recommended way of turning dropdown menus into components that use Autolayout? Or should I file this as something meant to be detached and modified? We have menus that could be short or long, with divider lines or icons.

This can be handled a few ways. One way is to create a Menu component with ten or more Menu Items and hide all but three. The Library consumer can go to the layer panel if they need more or less than three Menu Items. You can even create a component group out of Menu Items and Dividers so you can switch between them as Variants.

Other option is to have 10 or more Dividers, each in between the Menu Items so they can be toggled on or off in the layer panel as needed.

Physically reordering Menu Items will still require a plugin. If you’d rather not require a plugin, you would need to update the Menu Item labels to “reorder.”

(To answer OPs question, the advantage of Auto Layout here would be that you can have a bunch of menu items and hide most of them, and at the instance level, the library consumer can hide/show as many as they need.)