Figma Adaptive Templates: how to make a flexible design component of iOS mobile navigation

Whenever creating a new product, I want to make it better than the previous one, to find an elegant solution to create convenient and flexible components of the design system in Figma .

When creating a set of component iOS templates for Figma, I decided to experiment with the Tab Bar component. Let me remind you that in iOS guidelines this is the bottom navigation. I wanted its contents to have a logical and optimal behavior when resizing. I wanted to make it as adaptive as possible for all iOS devices, as far as Figma and the constraints allow.

By the way, if you use Figma , I recommend paying attention to our ready-made design systems . They help freelancers complete more orders per month, programmers can create beautiful applications on their own, and the Timlids run sprints faster using ready-made design systems for teamwork.

And if you have a serious project, our team is ready to deploy a design system within the organization based on our developments and tailor it to specific tasks using Figma. Web / desktop, and any mobile. We are also familiar with React / React Native. Write to T: @kamushken

What does Tab Bar consist of

Tab Bar is a set of icons with signatures or without, by clicking leading to the appropriate section of the application. The active section is always highlighted in color. Guidelines recommend using from three to five sections within applications that use the Tab Bar as the main navigation control.

Adaptive component

So far, no interface design tool provides full adaptability. Figma is no exception, it already uses the classic constraints approach, but even with it you can do a lot. For example, in the animation below, you can see the ideal and in fact adaptive Tab Bar behavior on all devices:



Elements move in proportion to the indents between them. Below I will talk about how to achieve this behavior in a simple way.

The problem lies in the icons

A good design system in Figma necessarily contains a library of icons. At least the main system. This eliminates the need to manually import them from SVG files each time.

For good, for each component-icon, from which you build yourself a convenient library with time, should be in Scale mode. Then you get a flexible icon that can be used in any dimensions: 16x16, 44x44, and so on.

Most likely, this is the icon through the left panel of Figma that you drop inside the Tab Bar and add a label when you start creating the component. And the problem is that with such constructions the icon will always flatten inside the Tab Bar when resizing, if you want to get an adaptive component:



There are several ways to solve a problem.

Method one - disconnect icons immediately.

I suggested above that in your design system all the components of the icons in the Scale mode, it means that when creating the Tab Bar, you can immediately break the connection with them and assign individual Centerlines to each icon. She, in turn, will remain in the frame, which needs to set the Scale mode.

• Plus : speed.
• Minus : disconnecting the component from the system.

Use the Detach Instance functionality in the context menu for the icon component.

The second method is to store two types of icons in the system

This method may be suitable if there are not so many icons in the project. Simply duplicate the entire Scale set, dissolve, change the foundations to Center, re-create the components and send to a new page with a different name. Recently, it seems to me a sensible idea that several hundred icons in any system for Figma can be stored as Scaleable or Centered.

• Plus : flexibility.
• Minus : if there are a lot of icons, it is more difficult to organize them.

The left icon is stretched proportionally, while only the frame is stretched around the icon on the right.

Method three - add intermediate component

According to the concept of atomic design, such a component will be considered a molecule. You pack an icon and a signature into it, then feel free to set the Center Center and the two, and for the molecule itself, set the Scale mode when you put them into your Tab Bar. Thus, the icons themselves will be ignored.

In addition, a caption icon is an effective navigation pattern. So why not reuse this component somewhere else in the project?

• Plus : efficiency.
• Minus : an extra component of the system.

Personally, I use the third method. I think he is more elegant and professional. Maybe you have your own ways? Write in the comments.

By the way, lately during any design research I have been sharing my thoughts live on my Telegram Channel Useful Designer .

PS: Yes, and it was a crosspost of my own article , previously published on another resource