Tab Bar is a set of icons with or without inscriptions, leading to the appropriate section of the application when pressed. The active section is always highlighted. Guidelines recommend to use from 3 to 5 sections inside applications using Tab Bar as the main navigation control.

Could we have it responsive?

No tool for interface design allows the full adaptivity so far. Figma is no exception, it uses the classic Constraints approach, but even with it you can do a lot. For example, you can see the perfect and actually adaptive behavior of the Tab Bar on all devices in the animation below:

The elements move proportionally to the indents between them.

Below I will tell you how to achieve this behavior in a simple way.

The problem is the icons.

A good design system in Figma necessarily contains an icons library. At least the main system ones. This eliminates the need to import them manually from SVG files every time. Constraints in the Scale mode should be for each icon component, from which you will make a convenient library over time. Then you will get a flexible icon that can be used in any dimensions: 16x16, and 44x44, and so on. Most likely you will throw such an icon through Figma`s left panel inside the Tab Bar and add an inscription when you start creating a component. And the problem is that with such constraints the icon will always be squeezed inside the Tab Bar at resizing if you want to get an adaptive component:

There are several methods to solve the problem

Method 1: immediately detach icons

I suggested above that within your design system, all the component icons are in the Scale mode, it means when you create the Tab Bar, you can immediately break the connection with them and assign each icon individual Center constraints. It, in turn, will remain in the frame, which you need to assign the Scale mode.

Pros : speed

: speed Cons: disconnecting the component from the system

Method 2: store two types of icons in the system

This method may be suitable if there are not so many icons in the project. Just duplicate your entire Scale set, detach, change constraints to Center, re-create the components and submit to a new page with a different name. Recently, I think it’s a good idea that several hundred icons in any Figma system can be stored both as Scaleable and as Centered. So, once you dropped a Tab Bar onto your canvas, you just need to swap the icons and you can keep it as the Instance in your project.

Pros: flexibility

Cons: if there many icons, they are a lot harder to organize

Method 3: add an intermediate component.