Phone
How to add and style phone mockups.
What is the Phone part?
A Phone part is a fixed-size container to mockup the contents of an iPhone.
The idea is that an iPhone mockup provides a representation of how an app will look on an iPhone screen. It allows designers, developers, and stakeholders to visualize the product and understand its appearance within the context of a mobile device. And sometimes things just look cool when they're represented on a phone!
Location in the Parts Library: Base Parts > Mockups > Phone
Editing the Phone Part
To edit the phone part, first, you need to understand the structure of the phone part.
The Structure of the Phone Part
The Phone part contains an Artboard part, representing the canvas of the iPhone.
To edit what is in the artboard part, you'll need to add and/or select the parts within the artboard. The example below shows a phone part containing an artboard. In the artboard is a chat.
You can change the size of the phone part by selecting the artboard, then click on Shape > Value Set to select the preferred artboard size:
Size 1: 320x68
Size 2: 375x667
Size 3: 414×736
Size 4: 375×812
Size 5: 414×896
Size 6: 320×1024
You can get as creative as you like with what you display on the artboard. For example, you can add images, cards, text, chats - anything that you'd like to display in your phone mockup.
To add or change an image, select the artboard, Click on Image > Value Set to select your image from the Media Gallery or upload an image from your device.
You can change the orientation of the phone from vertical artboard to horizontal, by selecting the artboard, and checking the 'horizontal' box in the right property editor.
The phone part comes with a border, and the color of that border can be changed using the color property in the property editor panel on the right.
Like many other parts, shadow, opacity, and spacing can be applied using the property editor, once the phone part has been selected.
Related Information
Last updated
Was this helpful?