How to Choose an iPhone Mockup for Design Workflows

Choosing the right iPhone mockup for your design workflow saves time, keeps your presentations consistent, and helps clients see your work in a realistic context. This guide walks you through the key decisions—file format, device generation, customization level, and licensing—so you can pick a mockup that fits how you actually work, whether you design in Figma, Sketch, Photoshop, or just need a quick presentation asset.

What You’ll Need

Access to a design tool (Figma, Sketch, Adobe Photoshop, or similar).
A clear idea of which iPhone model your target users are likely to have (e.g., iPhone 15 Pro vs. iPhone SE).
An understanding of where the mockup will be used: social media posts, client presentations, app store screenshots, or UI design files.

Step-by-Step

Define the output format first. Decide whether you need a static image (PNG/JPG), an editable vector (SVG), a layered PSD, or a live component in a design tool. If you work in Figma or Sketch, look for mockups that are native components or plugins—they update automatically when you change the screen. For Photoshop, a layered PSD with smart objects is standard. For quick social posts, a simple PNG with a transparent screen area might be enough.
Match the iPhone generation to your audience. Check your analytics or the project brief to see which iPhone models your users actually own. If you’re designing for a general consumer app, the latest standard model (e.g., iPhone 15 or 16) is a safe default. If you’re designing for a budget-friendly app or a specific demographic, an older SE model might be more representative. Using a device that matches your users’ reality makes the mockup feel authentic.
Check the screen resolution and aspect ratio. iPhones have changed aspect ratios over the years. Older models (iPhone 8 and earlier) use 16:9, while newer models (iPhone X and later) use roughly 19.5:9. Your mockup must match the aspect ratio of the screen you’re designing for, or your UI will look stretched or cropped. Verify the mockup’s screen area is at least as large as your design canvas resolution (e.g., 1170×2532 for iPhone 14/15 Pro).
Evaluate the customization level. Look at what you can change beyond the screen: bezel color, frame finish (silver, space black, gold), background color, shadow direction, and reflection. A mockup with too many options can be overwhelming, but one with zero options forces you to accept a generic look. For client work, choose a mockup that lets you match your brand’s aesthetic—like a dark background for a night-mode app.
Test the smart object or layer structure. If you’re using a PSD, open it and double-check that the smart object replaces the screen cleanly without distortion. In Figma, test that the component resizes properly when you swap the design. A mockup that requires manual masking or alignment will slow you down every time you use it.
Consider the angle and context. Flat front-facing mockups are best for app store screenshots and UI documentation. Perspective or angled mockups (like a phone on a desk) work better for social media and marketing materials. Decide what you need before you search—this filters out half the options immediately.
Check the license for commercial use. Read the license terms carefully. Some free mockups are for personal use only, or require attribution. If you’re designing for a client or a commercial product, you need a mockup that explicitly allows commercial use without credit. Paid mockup bundles usually come with broader licenses, but always verify.
Download and do a test run. Before committing to a mockup, download it and place one of your actual designs into it. Check that the screen edges align, the corners are rounded correctly, and the overall look matches your presentation style. A mockup that looks great in a preview but breaks with your design is useless.
Organize your mockup library. Once you find a few mockups that work, save them in a dedicated folder or design system. Name them clearly (e.g., “iPhone 15 Pro – Front – Dark – PSD”) so you can find them later. This step saves you from re-downloading the same mockup every project.
Review the file size and performance. Large PSDs or high-resolution PNGs can slow down your design tool. If you’re working on a big project with many screens, choose a mockup with a reasonable file size or use a plugin that generates the mockup on export rather than keeping it in your working file.

Common Mistakes

Using the wrong aspect ratio. Placing a 16:9 design into a 19.5:9 mockup stretches the UI. Always match the mockup to the target device’s screen dimensions.
Ignoring the notch or Dynamic Island. Newer iPhones have a camera cutout that overlaps the screen. If your mockup includes it, make sure your design accounts for the safe area, or the mockup will look broken.
Choosing a mockup with too many effects. Heavy shadows, reflections, or 3D angles can distract from the UI itself. For client presentations, a clean, flat mockup is often more professional.
Forgetting to check the license. Using a personal-use mockup in a commercial project can cause legal issues. Always check the license before downloading.
Not testing with a real design. A mockup might look perfect in the preview but have misaligned screen layers when you actually try to use it. Always test before you rely on it.

Tips

Keep a default mockup for quick internal reviews and a separate, more polished one for client-facing work.
Use the same iPhone generation across all screens in a presentation to avoid visual inconsistency.
If you work in Figma, look for mockup plugins that let you swap designs in one click—they’re much faster than manual PSD editing.
For app store submissions, Apple requires specific screenshot dimensions. Use a mockup that matches those exact pixel sizes to avoid extra cropping work.
Consider a mockup with a transparent screen layer. This lets you place the mockup on any background without having to edit the mockup itself.

Troubleshooting

The screen looks stretched or distorted. This usually means the aspect ratio of your design doesn’t match the mockup’s screen area. Re-export your design at the exact resolution specified by the mockup (e.g., 1179×2556 for iPhone 15 Pro).
The smart object won’t update in Photoshop. Double-click the smart object thumbnail, paste your design, then save (Ctrl+S / Cmd+S). If it still doesn’t update, check that you’re editing the correct layer and that the mockup isn’t a flattened image.
The mockup looks blurry when scaled up. The mockup’s screen area is probably lower resolution than your design. Look for a mockup that offers a 2x or 3x resolution option, or use a vector-based mockup.
In Figma, the mockup component doesn’t resize with my text. You might be using a static image instead of a true component. Search for “iPhone mockup Figma” and filter by “Component” in the community files.
The notch covers part of my UI. Adjust your design’s safe area to respect the top inset. Most design tools have a safe area guide you can enable. Alternatively, choose a mockup without a notch (like an older model) if your design doesn’t account for it.
The file is too large and slows down my project. Use the mockup only in a separate presentation file, or export the final image as a PNG and use that instead of keeping the full PSD in your working file.

Frequently Asked Questions

Q: Can I use a free mockup for client work?
A: Only if the license explicitly allows commercial use. Many free mockups are for personal use or require attribution. Check the download page or the included license file before using it in client deliverables.

Q: What’s the difference between a PSD mockup and a Figma component?
A: A PSD mockup is a layered Photoshop file with smart objects. A Figma component is a live, scalable element that updates instantly when you swap the design. Figma components are faster for UI work, while PSDs offer more advanced photo-realistic effects.

Q: Should I use the latest iPhone model in my mockup?
A: Only if your target audience uses it. Check your app analytics or market research. If you don’t have data, the latest standard model is a safe default, but an older model can be more relatable for budget-conscious users.

Q: How do I know the correct screen resolution for a specific iPhone?
A: Look up the device’s specs on Apple’s developer documentation or a trusted tech site. The resolution is usually given in points (e.g., 393×852 for iPhone 15) and pixels (3x scale = 1179×2556). Match the pixel resolution for sharp output.

Q: Can I edit the background of a mockup?
A: It depends on the mockup. Some have a transparent background, others have a solid color layer you can change, and some are flattened images with a fixed background. Check the layer structure before downloading if you need a specific background.

Q: Is it better to buy a mockup bundle or download individual ones?
A: Bundles are cost-effective if you need multiple angles or devices. Individual mockups are better if you only need one specific style. Try free options first to see what you actually use, then invest in a bundle that matches your workflow.

General steps for current mainstream versions; menus can differ by device and version. See the disclaimer or report an error.

More in this bed

The whole Tech How-To bed →