The Ultimate Bottom Navigation Bar Component Pack Free Figma Template

The Ultimate Bottom Navigation Bar Component Pack - Free Figma Template

Based on Apple Human Interface Guidelines and Google Material Design Guidelines.

This component pack features:

• iOS and iPadOS Tab Bars
• Android and Material You Bottom Navigation Bars
• Label and selection toggles for individual tabs
• Notification dots and editable badge counts for individual tabs
• SF Symbol and SVG icon format picker for iOS and iPadOS Tab Bars
• Material Icon library for Android and Material You Bottom Navigation Bars
• Gesture, 2-button, and 3-button system navigation presets for Android and Material You Bottom Navigation Bars
• Material Theme Builder plugin compatibility for Material You Bottom Navigation Bars
• Light and Dark Mode support
• Auto Layout and Variants

External Links

1. Apple Human Interface Guidelines
2. Google Material Design Guidelines
3. SF Symbols
4. Material Icons
5. Material Theme Builder

Changelog

09.26.2021

• Published community file.
• Added empty state illustration to blank page.

09.27.2021

• Fixed conflicting variants for 4-tab and 5-tab iPhone SE bars (dark mode).
• Added About page containing a short summary, feature list, and guides.

09.28.2021

• Fixed spelling error in iOS and iPadOS guide (About page).

09.30.2021

• Adjusted layout grids color & opacity (where applicable).
• Adjusted layout grid margins for cover image.
• Fixed sizing discrepancy (left margin) in iPad Pro (dark mode) example mockup.
• Edited file description to specify support for Android and Material You system navigation presets.

12.12.2021

• Added Material Theme Builder plugin compatibility for Material You Bottom Navigation Bars.
• Specified navigation presets for Android & Material You bars and Material Theme Builder plugin compatibility in the Features section (About page).

12.13.2021

• Added Material Theme Builder plugin guide (About page).
• Added external links for Apple Human Interface Guidelines, Google Material Design Guidelines, SF Symbols, and Material Theme Builder plugin in file description.

12.14.2021

• Created effect styles for iOS and iPadOS blurred tab bars.
• Created grid styles for cover image and guides.

01.18.2022

• Fixed several discrepancies with Material You Bottom Navigation Bars, aligning it closely with Google's Material 3 Design Kit.
• Fixed auto layout inconsistencies for Material You Bottom Navigation Bars.
• Fixed scaling inconsistencies for Android and Material You system navigation presets.

04.23.2022

• Replaced light and dark theme icons with unified iOS theme switcher icon in cover image.

07.23.2022

• Added entire collection of Material Icons in all five styles (Filled, Outlined, Rounded, Sharp, and Two Tone) for optimized icon selection and replacement in Android and Material You Bottom Navigation Bars.
• Edited file description to specify inclusion of Material Icon library for Android and Material You Bottom Navigation Bars.
• Fixed several plugin-related issues in Material You Bottom Navigation Bars.
• Updated Material You Bottom Navigation Bars to support Version 11 of Material Theme Builder plugin.
• Removed conflicting styles from external and missing libraries.

07.30.2022

• Slightly increased Lightness value of base/blue-light color style.

09.14.2022

• Added note in About page clarifying specification of material-you current theme for Material Theme Builder plugin.

This freebie The Ultimate Bottom Navigation Bar Component Pack was originally shared by Adi Chakravarty on this url.

The category for this freebie is Uncategorized. Tools used to create this freebie are Figma and Adobe XD.

Helpful hint: If the license is unknown, it is usually because they forgot to mention it explicitly; not because they were being stingy. Before using it for a commerical project, you can ask Adi Chakravarty nicely and they will probably allow you to use it.