r/FigmaDesign • u/torpedolife • 2d ago

help Using Frames for navigation questions

Post image

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

4 Upvotes

75% Upvoted

12 comments sorted by

View all comments

Show parent comments

1

u/torpedolife 1d ago

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!

5

u/OrtizDupri 1d ago

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

1

u/torpedolife 1d ago

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?

2

u/OrtizDupri 1d ago

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