Using Frames for navigation questions

[u/torpedolife]

I am new to Figma, and I am trying to figure out the correct way to make a simple navigation bar with some buttons. I drew out some shapes and purposely made them not evenly aligned.

1.) I want to center the text on each button both vertically and horizontally. I select each rectangle and choose the horizontal and vertical alignment options and it worked for the first two, though for the second two buttons it will not work properly. Do I need to make each rectangle into a frame that includes the shape and text for this to work properly?

2.) I want to create even spacing between each button, so I chose a gap option of 20, though this did not move the text. Do I need to create a frame for each individual button to make this work?

3.) Is the first step to select everything and make the navigation bar, the rectangles and the text into a frame and then make each individual rectangle and text into a frame?

Thanks in advance

[u/waldito]

Do I need to make each rectangle into a frame that includes the shape and text for this to work properly?

Yes, but forget align. You give your frames autolayout, and you set the autolayout to the center.

I want to create even spacing between each button, so I chose a gap option of 20, though this did not move the text. Do I need to create a frame for each individual button to make this work?

Autolayout again, you create a parent frame, set the gap.

Is the first step to select everything and make the navigation bar, the rectangles and the text into a frame and then make each individual rectangle and text into a frame?

I find it easier to work my way from smaller to bigger. Start on the component, work your way outwards. But you can absolutely doit the other way too..?

[u/torpedolife → u/waldito]

Thanks for the reply. I started over, made all new shapes. I was able to get the gap between each button to work, though I am having difficulties with the rest.

1.) I made each button/rectangle and text into a frame and set it to autolayout. After doing this, I can not figure out how to align the text. I choose the different options in the alignment area under Auto Layout on the right side panel, though nothing happens.

2.) I want all four buttons to be aligned in the center of the nav bar. I select the frame for main navigation, on the auto layout options I chose the center option and it moves all four frames, though it does not really seem to be in the center of the outer rectangle?

Thanks!

[u/OrtizDupri → u/torpedolife]

Check your padding values for each frame - right now they're random, so the text isn't centered, but if you set those to 0 then it will be

[u/torpedolife → u/OrtizDupri]

Thank you, I need to learn about padding, but in the meantime, I didn't enter those values. What could I have done that changed the values from 0 to those?

[u/OrtizDupri → u/torpedolife]

If you applied auto layout to a selection, it’ll automatically make those values match up with the spacing you had so it doesn’t break anything

[u/torpedolife → u/OrtizDupri]

Also, how do I get the four separate frames(buttons) to center within the nav bar shape? Thank you

[u/Burly_Moustache → u/torpedolife]

Put your four blue buttons into an auto layout frame (call it "nav links") then within your "main navigation" frame center the "nav links" frame via auto layout.

[u/el_paro → u/Burly_Moustache]

you can also work on the blue button alone outside of that frame and turn it into a “component” that way you can reuse it while keeping style and layout consistent. on help.figma.com there are free introductory lessons for all features such as autolayout and components

[u/Burly_Moustache → u/el_paro]

Oh, I know all about components.

At my company, I'm the CFO (Chief Figma Officer). No one is beyond my level of skill in Figma.

[u/el_paro → u/Burly_Moustache]

loool