Hey, Pixels! In this tutorial, I’ll show you how to properly set up your artboard for an iPhone in Adobe XD.
As much as we want to jump right in and start designing (guilty 🙋♀️), it’s very important to follow the guides set out by the devices we’re designing apps on. In this case, unlike the iPhone 6/7/8’s simple rectangular layout, the iPhone X has a unique notch at the very top of the screen which adds a unique design consideration UX/UI designers must keep in mind.
What are iOS Safe Areas?
According to Apple, “safe areas help you place your views within the visible portion of the overall interface“. For example, if you own an iPhone X, simply take a look at how an app looks on it and compare it to the safe areas below (see Figure 1). Safe areas can vary depending on the orientation of your screen (vertical or horizontal), but generally, the vertical guidelines are most common and are important for you to know as a UI/UX designer.
If you take a look at an iPhone, the status bar (iPhone 6/7/8 & iPhone X) and home indicator (iPhone X) are reserved for those elements only. The navigation bar and tab bar are commonly customized for various apps (e.g. Instagram & Twitter) and might be displayed at slightly different heights. Lastly, the grey layout area (avoiding the layout margin) is safe to place your apps main content, including text, buttons and images. Images are the exception and can be either within the margin or full width (e.g. Instagram photos). All in all, apps are designed for mobile devices, so if you’re just doing your own thing, not considering how it will look on the actual device, the user experience and interface will be poor.
Getting Started
With the Adobe XD start screen open, select the iPhone X & iPhone 6/7/8 artboard. In the top menu, select File > Get UI kits > Apple iOS.
When you get to the Apple Design Resources page, click “Download for Adobe XD” to download the Apple Design Resources for iOS (see Figure 2).
Open the “iOS Adobe XD” folder on your computer and then open the folder named “UI Elements + Design Templates + Guides” and then open the XD file for iPhone X and iPhone 8.
As you can see, all the UI elements found on an iPhone X & iPhone 8 are in this document. For this tutorial, we’re only going to grab three UI elements: the notch screen guide, the status bar, and the home indicator.
Grabbing UI Elements
To grab these objects to place on your own iPhone X artboard press Cmd ⌘ (Mac) or Ctrl (PC) + L to unlock the object if it’s locked, press Cmd ⌘ (Mac) or Ctrl (PC) + C, V, X to copy, cut and then paste the objects from the iOS UI Elements Document onto your iPhone X artboard. Arrange the objects so that your iPhone X setup is complete.
Now, you can lock the guide layers and design!
Free Download
I hope you found this article helpful. Be sure to download your own copy of the Adobe XD iPhone safe areas for light and dark UI below. Use them as a guide for your next design project. Enjoy!
