Designing for iPad - Learn Sketch

Use the Correct Library Template

The iOS 11 - iPhone X template is only for iPhone X, it can’t be reused for the iPad or iPhone 8, and below, the measurement is a bit different.

If you have downloaded the iOS 11 Sketch template from the Apple design resources, they have provided template for the other iPhone and iPad too. We can use that for this tutorial.

Unzip the iOS-11-Sketch.zip and you will see a Sketch file name “UIElements+DesignTemplates+Guides.sketch”. Rename it to “iOS 11” so that we can easily find the elements inside it. Now go to the Libraries tab in Sketch Preferences, and drag the iOS 11 template to it to use as Library.

Disable Library

You can temporary disable the iOS 11 - iPhone X and Sketch default iOS UI Design Library. All the Library Symbols that you’ve inserted in the Canvas will still attaching to its original document. Go to Sketch Preferences › Libraries, and uncheck the iOS 11 - iPhone X and iOS UI Design Library, this method will hide the Library from the Sketch and the Sketch Runner.

Adaptive Design

Let’s start using the Bookmarks screen to design an iPad version of it. Press A, toggle the Artboard orientation to Landscape, and choose iPad 1024 x 768. By doing this will create an iPad Artboard beside the iPhone X Artboard.

Insert a Status Bar in the iPad Artboard by searching the keyword “status bar” in the Sketch Runner › Insert. Choose the one with the name “iOS 11 > Bars/Status Bar/Light Status Bar”. Insert it to the top-left of the iPad Artboard. You will notice the width of the Status Bar is 375px, this is ok because all the elements from the Sketch iOS UI Design are made with Resizing method to make it flexible to resize. Just increase the Status Bar width to same as the iPad Artboard, which is 1024px. The Status Bar won’t stretched to some unacceptable visual; instead, its elements stay in the same size but at different positions. We called this Adaptive Design, and it is very useful for designing in multiple screen sizes.

Navigation Bar

Copy the Navigation Bar group from the iPhone X Artboard, and paste it to the top-left of the iPad Artboard. As we mentioned, some of the iPhone X element sizes are different, and this Navigation Bar is the one. What we need to do is to replace the iPhone X Navigation Bar Symbol to the other Navigation Bar Symbol from iOS UI Design.

Select and right-click the Navigation Bar Library Symbol, hover to the Replace With › iOS 11 › Bars › Navigation Bar, and choose the “Light Large Navigation Bar with Search”. Right-click again on the new Navigation Bar, and select the Set to Original Size at the last option of the menu. Then move up the Font Resize icons and Night Mode icon to give them 70px margin to the bottom of the Navigation Bar. You will notice that Bookmarks override still applied and no need to hide other elements, because it is come from the same Apple resources.

Unlink Symbol from Library

We don’t need the translucent background on the Navigation Bar, but there’s no way to hide it from the Overrides panel. We can unlink this Symbol and convert it to our document Local Symbol. It is not recommended always to unlink Symbol from its original Library, but if we want to control the Symbol design, this is the only way.

Double-click on the Navigation Bar Symbol, and you will see a dialog slide down. Click the Unlink from Library, and the Navigation Bar Symbol will immediately convert to Local Symbol. In the meantime, Sketch will bring you to the current document Symbols Page. Now, you can edit the Symbol design as you like. From here, hover to the Background layer and click the Eye icon to hide this layer. Click the Return to Instance button on the top-left of the Canvas, and you will see the Background is now hidden.

Resizing Constraints

Resize the whole Navigation Bar group to 750px width. You will notice that three icons on the right are distorted. We can resolve this by using the Resizing Constraints features. Applying constraints to layers allows you to decide how they should behave when you resize the Symbol, Artboard, or group. Constraints can be applied to any layer that lies inside an Artboard or group. By doing this, we can achieve the Adaptive Design.

Let’s undo the Navigation Bar group to its previous size. Then select the three icons, and you will see Resizing Constraints in the Inspector panel. By default, none of any constraints are applied to your layers. On the left, you can define the edges each side of your layer should pin to. And on the right, you can decide whether the size of the layer should stretch, or remain at a fixed height and/or width on resize.

Fixed width and height

Let’s enabled the Fix Width and Fix Height for the three icons so they won’t be distorted when resizing the parent group. If you increase the width of the Navigation Bar group now, the icons are no longer distorted. But their position is off the place. Undo and select the three icons again, and pin them to the right, so its distance does not change when you resize the parent group or the Artboard. Lastly, resize the Navigation Bar group to 750px and align it with the center of the iPad Artboard.

Table View

Next, copy the four Bookmarks Row Symbol from the iPhone X Artboard to the iPad Artboard. Since we have more space on the iPad, we can stack the Bookmarks Row into two columns Table View. With this, you can view more contents without keep scrolling the screen. Let’s add more Table View for better illustrate the idea.

iPad Tab Bar

The Tab Bar has some changes in iOS 11, but you will only see it in iPhone Landscape mode and on iPad. The brand new appearance of the Tab Bar is showing the icon and text side by side. This can save the space for contents when you are viewing iPhone in Landscape view. And also better accessibility when seeing in the large given space of the iPad screen.

Before we jump into the new iOS 11 Tab Bar, we still can use the standard Tab Bar which is the icon on top and the text at the bottom. We can’t use the Tab Bar on iPhone X Artboard because it has the extra space below for the iPhone X Home Indicator. So let’s insert a Tab Bar for iPad. Search with the keyword “tab bar 5” with Sketch Runner › Insert tab, then choose the one with the name “iOS 11 > Bars/Tabbar/Light 5 Tabs” and put it to the iPad Artboard. Increase the width to 1024px and place it at the bottom center of the iPad Artboard. Now you can start insert the icons and text accordingly from the Overrides panel.

Final Touch

Currently, don’t have the iOS 11 template specially built for the iPad. But you can download the new iPad Tab Bar Sketch file and use it on the Bookmarks screen. We are going to release the UI Kit soon, stay tuned!

Once you’ve downloaded, open the Sketch file, and copy it to your iPad Artboard. Simply replace the icons and text just like what you did for the standard Tab Bar. Now, you have done the Design+Code iPad app Bookmarks screen! Keep it up!

BACK TO

Design for iPhone X

Download source files

Download the videos and assets to refer and learn offline without interuption.

Design template

Source code for all sections

Video files, ePub and subtitles

Videos

ePub

Assets

Subtitles

Learn Sketch

Introduction to Sketch Basic Tools