Creating Sticky Tab Bars in Figma

Step 1: Set Up the Artboard

• Open Figma and create a new file.
• Create a Frame:
  • Press F and draw a frame on the canvas or choose a predefined device size from the right-hand panel (e.g., iPhone 13 , 14).
• Add Background Color:
  • Select the frame.
  • Open the right-hand panel, where you’ll find the “Fill” section.
  • Click on the color swatch and input #F6F6F6 in the hex code field to set a light gray background color.

Step 2: Add Content and Enable Vertical Scrolling

• Import the Image:
  • Use the image linked below and drag it into the frame.
  • Position the image near the top of the frame, ensuring it fits within the width of the frame.
  • Since the image is long, the total height of the content will exceed the height of the frame.
  • Set the frame to clip content by selecting the frame, and in the right-hand panel, enable the “Clip Content” option.
• Enable Vertical Scrolling:
  • Select the main frame.
  • Click on the Prototype tab at the top of the right-hand panel.
  • Change the Overflow Behavior to Vertical Scrolling.
• Click Present and Watch the Scrolling Content:
  • Click the Present button at the top-right corner to enter presentation mode.
  • Scroll through the content to observe the scrolling effect and ensure the content is correctly displayed.

Step 3: Design the Tab Bar

1. Create the Tab Bar Background:
   • Select the Rectangle tool (R) and draw a rectangle at the bottom of your frame.
   • Set the dimensions of the rectangle to 80px width and 60px height.
   • Set the background color to white by clicking on the color swatch in the right-hand panel and inputting #FFFFFF in the hex code field.
   • With the rectangle selected, click on the bottom corners (left and right) to adjust their border radius.
   • Set the border radius for the bottom corners to 36px to create rounded edges.
2. Draw a Triangle Using the Pen Tool:
   • Select the Pen tool (P) from the toolbar.
   • Click on the canvas to create three points that form a triangle. Set the dimensions of the triangle to 32px width and 28px height.
   • Close the path by clicking back on the first point.
   • To ensure accuracy, you can adjust the size of the triangle using the properties panel after drawing it.
3. Add an Anchor Point and Adjust the Radius:
   • With the triangle selected, choose the Pen tool (P) again or use the Anchor Point tool.
   • Click on the middle of the base of the triangle to add an anchor point.
   • Now, select this middle anchor point.
   • In the right-hand panel, adjust the corner radius of this anchor point to 90px. This will create a curved, rounded bottom edge on the triangle.
4. Duplicate and Flip the Triangle:
   • Select the triangle you just created.
   • Press Ctrl+D (Cmd+D on Mac) to duplicate the triangle.
   • With the duplicated triangle selected, right-click and choose Flip Horizontal to mirror it.
   • Move the flipped triangle to the right side of the previous rectangle, aligning it symmetrically with the original triangle.
5. Union the Shapes:
   • Select the rectangle and both triangles by holding down the Shift key and clicking on each shape.
   • In the top toolbar, click the Union Selection button (or press Ctrl+E/Cmd+E).
   • This action will combine the selected shapes into a single, unified vector shape.
6. Subtract the Shape from the Background:
   • With the new unified shape selected, hold down the Shift key and select the rectangle (background shape) behind it.
   • In the top toolbar, click the Subtract Selection button (or press Ctrl+-/Cmd+-).
   • This will subtract the new shape from the background, creating a cutout effect where the triangles were.

Step 4: Create and Position the Center User Icon

1. Create the User Icon Background:
   • Select the Ellipse tool (O) from the toolbar.
   • Click on the canvas and draw a circle with a width and height of 40px.
   • Set the fill color  #F4F4F4 by selecting the color swatch in the right-hand panel and inputting the hex code.
2. Add the Border:
   • With the circle still selected, go to the right-hand panel and find the Stroke section.
   • Set the stroke width to 9px.
   • Set the stroke color  #FFFFFF by clicking on the stroke color swatch and entering the hex code.
   • Ensure that the stroke position is set to “Outside” so that the border surrounds the outer edge of the circle.
3. Open Iconify Plugin:
   • Go to the Plugins menu in Figma.
   • Select “Iconify” from the list of installed plugins. If it’s not installed, you can search for and install it from the Figma Community.
4. Choose the User Icon:
   • In the Iconify plugin window, use the search bar to type “user”.
   • Browse the available user icons and select the one that fits your design needs.
   • Click on the icon to insert it into your Figma file.
5. Color the Icon:
   • With the user icon selected, go to the right-hand panel.
   • Set the fill color of the icon to #ADADAD by clicking on the color swatch and entering the hex code.
6. Group and Center the Icon:
   • Select both the circle background and the user icon by holding down the Shift key and clicking on each element.
   • Right-click and choose “Group Selection” or press Ctrl+G (Cmd+G on Mac) to group them.
   • Move the grouped icon to the center of the tab bar.
7. Position the Icon in the Sticky Navigation:
   • Ensure the tab bar is in a Fixed position by selecting the “Bar” shape.
   • Adjust the position of the grouped icon to align it with the middle of the tab bar, ensuring it remains visible and centered.

Step 5: Create and Configure Tab Item Components

1. • Create a Table for Tab Items:
     • Add a new frame or rectangle inside the tab bar to act as a container for the tab items. This will help in organizing and positioning the tab items evenly.
   • Create a Component for Tab Items:
     • Select both the icon and the text label for one tab item.
     • Right-click and choose “Create Component” or press Ctrl+Alt+K (Cmd+Option+K on Mac) to create a reusable component for the tab item.
   • Add Variants to the Component:
     • With the component selected, go to the right-hand panel and click the + icon next to Variants to add a new variant.
     • Rename the default variant to “Inactive” and the new variant to “Active”.
   • Customize the Active Variant:
     • Select the “Active” variant.
     • Click on the icon and text within this variant, and change their color to red #E60000 by selecting the color swatch and entering the hex code.
   • Set Up Smart Animation:
     • Switch to the Prototype tab in the right-hand panel.
     • With the “Inactive” variant selected, click the circular node (Prototype handle) and drag a connection arrow to the “Active” variant.
     • Set the interaction trigger to “On Click”.
     • Choose “Navigate To” in the Action dropdown and select the “Active” variant.
     • For the “Animation”, select “Smart Animate”.
     • Set the Easing to “Ease Out” and adjust the Duration for smooth transitions.
   • Add Icons and Text for Each Tab Item:
     • Add Icons:
       • For each tab item, use the Ellipse tool (O) to create a circle with a size of 32px.
       • Use your custom-designed icons or appropriate icons from Iconify that match the app design. Ensure each icon is sized to fit well within the circle (approximately 32px).
     • Add Text Labels:
       • Below each icon, use the Text tool (T) to add a label.
       • Set the font to Inter, size to 11px, and color to #000000.
       • Position the text 7px above each icon by placing the text element at a vertical distance of 7px from the bottom edge of the icon.
   • Position and Align Items:
     • Distribute the icons and text evenly across the tab bar.
     • Ensure each tab item is properly spaced and aligned for a clean and organized look.
   • Test the Interaction:
     • Click the Present button in the top-right corner to enter presentation mode.
     • Interact with the tab items to ensure the smart animation works as expected when switching between the inactive and active states.