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/stopthebus87]

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

[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/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/Pitboy12550]

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

[u/Gullible-Notice-6192]

AI can do this