How to Use Templates in Figma: The Status Bar and Home Indicator

Updated on: October 19, 2022

Life is in the details. The Status Bar and Home Indicator are proof of it. You interact with these features daily but barely notice their presence, right? Not anymore. In this figma tutorial, you will learn about the Status Bar and Home Indicator and why they are excellent features included in the template.

The Invisible Heroes

As we mentioned, these features must be included in every template, regardless if it’s for IOS or Android; if you don’t know how to open a template, check How to Access Templates in Figma. 

PdUMlE76 DkysPkKFyPIkqH9INHw0oqnZJ0TJA10Y3hy9VomlZmpDOWlcvYVv2CppM5ihQC9J1M3BYxTsknYn9ejJt9h4XsmsA1jxA6zSCgTJp0adeU4Dw2KlAu4a5 39 wrQv3x3C6Z3JEI

An open template must look like this. We will use an IOS to exemplify what you will find in each feature. With templates, you don’t need to draw basic details; it is the case for the Status Bar and Home indicator.

For example, if you are creating an application, you will find the Wifi symbol, the charge symbol, the location symbol, and the basic info you check when you look at your phone. 

This template will present you with all the possible options to add to the application design. For example, you will see the time feature in different variations of colors, and you can simply copy/paste your selection with no problems. 

NOTE: Keep in mind the model device you are designing for to use the template correctly.

The template should provide all the options too! So, don’t worry. As you see in the Molecules section, it will include the possibilities if you are designing for iPhone X, iPhone 14 pro, iPhone SE, and aaaaaaall the wide range of existing iPhone devices, unless they are unavailable anymore.

Mr6QLeXS7pJ3ps7 1ZOyV2Qr7jEIaE6y06 Mk fPpcl5yM0hHUdoXtUdBxsHMQgObdT82sBIymjl df5yzVtKtka7XX4YkHe

The Home Indicator is the permanent thin bar you see if you use an iPhone device that reminds you to swipe up from the bottom edge of the screen. It is not rocket science, but remember, it is part of the design and can be easily forgotten, and the good thing is that since it’s included in the template, you won’t let it pass. 

How to Use the Status Bar and Home Indicator

Easy, since they are already available for use, you can simply copy and paste the feature you need and add it to your design, and that’s it, an easy follow on How to Use the Status Bar and Home Indicator included in Templates for Figma.

Access 2,701+ video lessons. Instantly.
Start Learning Now →
crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram