A give back to community.
Figma Community | iPhone statusbar kit
project overview.
During a summer break in college, inspired by the support I received from the design community, I dedicated a week to help new designers by addressing a common challenge: finding resources for newer iPhone models. I created a comprehensive set of design components focused on status bars, aiming to make their entry into design smoother.
problem statement.
Seeing the need, I put together a detailed set of components for status bars on popular iPhone models. As time went on, I kept adding to and improving this collection, incorporating essentials like home bars, dynamic Island mockups, artboards, and grids. My aim was to lend a hand to up-and-coming designers, motivated by my own early struggles and the common hurdles faced by my peers.
content.
The latest version of the resources includes assets tailored for the iPhone 13, 14, and 15 Series, as outlined below: • Status Bar
Dynamic Island
Home Bar
Mockups
Wallpapers
Artboard and Grid
status bar.
The status bar, a cornerstone component since the project's inception, has transformed significantly in the latest version. It now features nested components, allowing users to seamlessly switch between dynamic states, offering thousands of customizable combinations. All components are available in dark mode.
The introduction of Dynamic Island marks a significant innovation in the project. Inspired by Apple's focus on this new feature, businesses have also embraced this concept. It adds a fruitful dimension to representing various states, including compact, minimal, expanded, and incoming call scenarios.
Available for iPhone 14 and 15 series.
Multiple variants are available, allowing users to seamlessly switch and choose according to their specific use case, ensuring a perfect fit for their needs.
Over the past few years, the scope of the project has grown significantly. Starting with status bars, it now includes a broad range of components. This expansion has been fueled by a keen understanding of designers' needs, detailed below.
mockups.
There are currently two versions of mockups available: hard mockups and insertable mockups. Hard mockups, distinguished by their high quality, can be exported in high-resolution PNG format, providing immense flexibility for use in various design tools such as Photoshop or Framer. On the other hand, insertable mockups serve a specific purpose. They are invaluable when a designer wants to showcase their Figma mobile screen design on platforms like Dribbble. By simply dragging their designs inside the left artboard, the mockup is automatically generated, simplifying the process and ensuring a polished presentation.
artboard and grids.
All artboard sizes are crafted to be pixel-perfect for each device, as specified in the community file. This includes the incorporation of a universal 4-column grid system, ensuring precise and consistent design standards.
