Become an affiliate and earn up to 35%
You can participate in Setproduct partnership program and earn up to 35% from every sale you made. We provide promo materials and detailed instructions how to boost the conversion
We used to reply ASAP
iOS & Android custom development
We'll take our iOS & Android Figma templates, adjust with custom styles, create necessary layouts, and turn the system into production-ready Flutter templates. You'll get powerful design & code system which help you to produce more layouts in future by minimal costs.
How to reach you out?
Your budget
URL (optional)
We used to reply ASAP
Material Design custom development
We'll take our Material & Dashboard Figma libraries, adjust with your brand guidelines, create all the additional necessary layouts, and turn the system into responsive web application based on React, Angular, Vue or etc.
How to reach you out?
Type of job
Your development budget
URL (optional)
We used to reply ASAP

How to create responsive mobile components in Figma

Every time you create a new product, you want to make it better than the previous one. You want to choose a more elegant solution, to create convenient and flexible components of the design system in Figma.

December 2018 · 4 mins to read

by Roman Kamushken

When creating the next design product based on iOS12 design templates, I decided to experiment with the Tab Bar component. I`d like to remind you that it is the bottom navigation in the iOS guidelines. I wanted its contents to have a logical and optimal behavior at resizing. I wanted to make it as adaptive as possible for all mobile iOS devices, as far as Figma and constraints allow to make it.
A tab bar appears at the bottom of an app screen and provides the ability to quickly switch between different sections of an app.

What does Tab Bar consist of?

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:

Could we have it responsive?

The elements move proportionally to the indents between them.
Below I will tell you how to achieve this behavior in a simple way.
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:

The problem is the icons.

There are several methods to solve the problem
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
Cons: disconnecting the component from the system

Method 1: immediately detach icons

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 2: store two types of icons in the system

According to the concept of Atomic design, such a component will be considered a molecule. Pack an icon and an inscription in it, then feel free to put Center constraints to both and put the Scale mode for the molecule itself. After that, put them in your Tab Bar. Thus icon constraints will be ignored andno squeeze happening anymore. In addition, the icon with the inscription is an effective navigation pattern. So why not reuse this component somewhere else in the project?

Pros: efficiency
Cons: an extra component of the system

Method 3: add an intermediate component

Personally I use Method 3. I think it is more elegant and professional. Maybe you have your own methods?

By the way, many components in the Figma iOS toolkit are made according to this method. I recommend you to pay attention if you are prototyping mobile interfaces in Figma or in case your team concentrated on mobile development.

* * *

Share this story to a world

Useful publications deserve an attention

Pros and Cons of swapping between hidden layers and detaching a Component into the new Master. Inspired by Userpic design item.

Watch videos below to learn how to accelerate the prototyping process within iOS toolkit for Figma

My 15 insights of successful digital product. Results of the year for the UI designer, who didn`t have any interesting projects in his portfolio and decided to create his own design products for everyone.

Every time you create a new project, you want to make it better than the previous one. You want to choose a more elegant solution, to create convenient and flexible components of the design system in Figma.

There are three approaches to table design to create a data grid with a flexible architecture. In each case, either a row component, a column component or a cell component is used. Each of the cases will be discussed in detail below.

Creating tables in the Figma design system and implementation in Storybook. Building tables with the help of components is an algorithm that is hardly required by every project, especially for a serious design system that is used by designers and developers within the organization

Perhaps this will help to make your best shot on Dribbble or win a few points in customer's eye or the design team-lead, because of the use of these techniques positions you as a performer attentive to UI details

Your design asset will help someone speed up their work and you will get rewarded for it