Skip to main content

Hey all, I’m trying to figure out if it’s possible to use auto layout to place two objects, one center, one left/right. For example:


A mobile header with a page title at top center with a back/close/home button on left/right.


I know I can align everything left or right, then use the spacing to push the innermost object toward the center, but at best I’m just eyeballing it. Rather, I’d like it to be placed dead center every time, while the second object is a specific distance from the edge every time.


Thanks in advance!

Hey Eric, do you want to have the alignment to be a default setting?

Hi Eric!


There is a way to do that in Figma, although it is a bit tricky.


You would have to create 2 frames for the left object and center one.

Then in the parent frame (which contains both), you need offset the left object by its width (which you should have set as fixed). The center object will be filled (so it fills the width of the container and set to middle in auto layout.


Let me know if you have any questions!

@Eric42 You can set up an auto-layout header frame with your elements set with your required left-right padding and gap between elements. Then for your title text set that to fill-container. This will make the title text centered between those buttons on the left and right.



@Nate_G Your example works but I believe he is looking for something else.


In his case, he is only looking to center the 2nd object and he only has another object either to the left or right of it (not one or more on EACH side as your example shows).


My example should work for his case.

I had this exact problem, so I created an innovative solution for it from scratch. It uses auto layout and absolute positions with constraints.


See it here 😃

https://www.figma.com/community/file/1451611636635250054/auto-layout-header-with-buttons


I found it to be the best working, because it automatically resizes height based on content and the side icons/buttons stay aligned to the edges no matter the content.

I’d be happy to hear your feedback! 🙂

Reply


Terms & ConditionsCookie settings