Community forum for knowledge and support

Updated last year

Adjusting button layout in Figma with auto layout constraints

At a glance

The community member is having an issue with their Figma export, where a pair of buttons that should be vertically stacked on mobile are instead remaining side-by-side and extending beyond the container's edge. The auto layout controls on the button wrapper are greyed out, preventing them from adjusting the layout. A Figma expert responds that the issue can be resolved by adjusting the feature within the parent, setting it to wrap in the auto layout. The community member also notes that they had to detach the instance to be able to change the settings, as they are more experienced with developing from Figma files rather than designing in them.

I just did my first export to Figma and it’s looking good although a few small quirks. I have a couple of buttons that are side by side in the desktop and should be vertically stacked on mobile but instead they remain side by side and extend beyond the container’s edge.

Auto layout controls on the button wrapper are greyed out so I can’t adjust it. Can any Figma pros advise on where to go from here?

S
J
P
3 comments

Paging our Figma expert 🙂

Thanks for pinging me.

And really sorry for the late reply , so what you'd want to do is adjust this feature within the parent, setting it to wrap in the auto layout and it should function as you'd mentioned. This also might be something we making preset so thank you a bunch for pointing this out. Feel free to let me know if you need any further explanation or if there's anything else I might be able to help with.

Thanks . I found I had to actually detach the instance to be able to change any of these settings. Part of this might be because I’m normally developing from figma files and designing in them is a recent thing for me and I probably need to learn more about how it works. Detaching the instance worked fine for what I needed to do at this stage but future improvements here will be awesome.

Add a reply
Sign up and join the conversation on Slack