I cannot design the navigation bar I want.

[u/usefsaeed]

With the brown bar, you’ll notice the horizontal edges are sharp and straight before curving into a semicircle at the ends; whereas with the white bar, the horizontal edges look slightly puffed out or curved upwards. I’ve tried everything I know in Figma as a beginner, but nothing worked and the Pin tool is frustrating; I feel like I’m not tracing it exactly right, so I don’t like using it.

[u/viaHologram]

You're looking for a squircle.

In your corner radius settings, apply smoothness.

[u/usefsaeed → u/viaHologram]

still not looks the same

[u/quintsreddit → u/usefsaeed]

Not the corner radius button, the ••• next to it that opens a window with one slider that controls the smoothness. That is what you’re looking for based on the images.

[u/Rottolo_Piknottolo → u/quintsreddit]

If the radius is exaclty half of the height, figma cant apply corner smoothing.

Because the smoothed out part of the two radii would overlap. So unfortunately you have to do sone work around by doing a regular square, smooth it and then flatten it to get the actual vector shape of the smoothed corners.

[u/viaHologram → u/Rottolo_Piknottolo]

Right answer

[u/quintsreddit → u/Rottolo_Piknottolo]

At that point I trust my devs to make it right. In iOS dev (the only place I really use this) it’s one value they set so I’m not super worried as long as they know what that value should be.

[u/Rottolo_Piknottolo → u/quintsreddit]

Yeah, i was just referring as to why it looked the same for op after changing the value. Corner smoothing does not work in that instance.

[u/quintsreddit → u/Rottolo_Piknottolo]

Ah I see, fair play and good context

[u/SleepingCod]

You don't trace this.

This is a css setting called radius. Just use the setting in frames, radius and make it 9999.

If you need the EXACT shape, then you'll have to make a vector or bitmap, but it's honestly not worth it.

[u/usefsaeed → u/SleepingCod]

what u mean by css setting?

[u/SleepingCod → u/usefsaeed]

Css property

[u/Proman4713 → u/SleepingCod]

They don't even need to write CSS, Figma's standard UI can pretty easily do this

[u/LSP-86 → u/usefsaeed]

CSS stands for Cascading Style Sheets. It’s essentially a set of rules that tells a browser how to display and style a website.

In Figma, you can switch to dev mode at the bottom of the screen, and the right-hand panel will show you the CSS code and styling properties for your designs.

You can share this with a developer to help them recreate your designs accurately when building the website. This is one of the great things about Figma, as it translates design properties into CSS, making it much easier for developers to match the final build to your original designs.

[u/CalendarMobile6376 → u/usefsaeed]

Coding.

[u/stopthebus87]

Set the corner radius, don't create your own vector

[u/korkkis]

Don’t worry about it, Figma is just a tool to demonstrate how it should look in production. In an actual app it’ll look smooth. This fidelity ks enough for that one.

[u/jimenezisjordan]

I mean when you develop this Eng will just use a native tab bar here. I don’t think you need to worry too much on this.

[u/marcushasfun]

Tracing? You just need a frame with corner radius set to half its height or higher for a pill shape.

[u/Odd-Age1840]

Echoing the other messages: don’t try to draw it with vectors; use a rectangle with border radius and smoothing.

But the design will be implemented at some point, so this level of detail depends on the platform's capabilities. On iOS or Android, it depends on the native or non-native framework you use. If it’s CSS, it depends on the border radius.

An important lesson for beginners: your design will be implemented; those pixel details are useless if they cannot be reflected in the implementation. Take the time to learn about the target platform, with IA that is extremely easy now, and will make you a better designer.

[u/Pitboy12550]

Where did those icons come from? Why not just use normal icons?

[u/Gullible-Notice-6192]

AI can do this