The Ultimate Bottom Navigation Bar Component Pack

移动应用 · 1,134 likes

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 Apple Human Interface Guidelines Google Material Design Guidelines SF Symbols Material Icons 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. 05.02.2023 Updated Material You Bottom Navigation Bars to support Version 14 of Material Theme Builder plugin. 02.29.2024 Fixed an issue where file thumbnail was not set upon duplication. 10.03.2024 Resized file thumbnail aspect ratio to 16:9 to negate Figma's new smart fill feature.

适用场景

The Ultimate Bottom Navigation Bar Component Pack 属于 移动应用 资源集合,适合需要可直接用于生产流程的 Figma 素材的设计师。

关键信息

发布者信息

创建者:Adi Chakravarty。Figma 社区发布者:Adi Chakravarty。

兼容性与支持

使用前如何评估

检查图层组织与组件命名,确认 Figma 中的授权条款,并与下方相关资源进行对比。

在 Figma 中打开

相关资源