Presets guides

Tab bar

Tab bar is the bottom navigation menu in an application that moves the user between pages.

The tab bar consists of several icons, that is, navigation blocks, when you click on the icons, the pages will switch.

Ready-made presets

To create such logic in Sizze, you can use a ready-made template by selecting the Tab bar preset from the list of presets in the left side menu.

Custom presets

To attach this logic to your custom element, you must use the Create preset function. 

First, draw a tab bar with icons in Figma or Sizze, set up auto layouts and paddings between them, you can also set them up in the editor itself. 

Select the tab bar, then click Create Preset. In the list of presets, select Tab bar". Learn more about preset design standards here →

Preset settings

In the right side bar, select the pages to switch to. Sizze links pages and icons from left to right, so you must first select a main page and then assign the following pages in order.

After each page selection, click on Add page. The icons also change the color in the active and inactive phase, which you can change in the preset settings - active / inactive state color.