As users, we are constantly interacting with this feature but barely notice. The Tab Bar has a similar function to the Navigation Bar; we encourage you to check How To Use Templates in Figma: The Navigation Bar to learn more. In this tutorial, we will take care of The Tab Bar.
Yes, tabs. These are segments where important information is located, same with the Navigation Bar; the Tab Bar will be present in every aspect of the prototype why? Because it is part of the interface design itself. Plot twist: The Tab Bar is implemented in dashboards of any interface design.
This feature comes by default on any device and is the section located at the bottom of the interface design. We use an iPhone template, but you should find it for Android. There is a difference: how bolded you want the text to be within the Tab Bar. Let’s explore closer the Tab Bar.
What are all those sketches? Those sketches in the template represent possibilities. Each box contains information that should be easily located. For example, the home dashboard has relevant info, such as the call icon, the message icon, the camera, and so on. Got it? If you open Instagram, you will see that the Tab Bar has slightly different options but still accomplishes its function: gathering relevant info.
The Tab Bar can include settings, profiles, keys, etc. Here is a quick example of what the Tab Bar looks like with options.
Now that you have this knowledge, it’s time to use it! Explore the many options Figma provides, and always remember to enjoy the process. Stay tuned!
