Phone Mockup: Put App Screens in Device Frames

Phone mockup work starts by matching the flat app screenshot to the device frame’s exact screen aperture in pixels, then clipping it with a mask rather than stretching it. Use a flat front-on frame for UI reviews, product decks, and landing-page feature sections; reserve angled frames for a single visual hero. Export the composed image at @2x—twice its intended CSS or slide size—and apply one fixed status-bar fixture, such as 9:41, across every iOS or Android screen in the set.

Key takeaways

•A 1206 × 2622 px iPhone 16 Pro screenshot has a 0.460 aspect ratio.
•Stretching a 1080 × 2400 px screenshot into a 1080 × 2424 px aperture changes its aspect ratio.
•Export a 1600 px-wide placement at 3200 px for a @2x raster asset.
•Use one fixed time, carrier treatment, and battery state across a mockup set.
•Android 15 enforces edge-to-edge for apps targeting SDK 35, affecting system-bar areas.

This guide is for mobile UI/UX designers, founders, and engineers who can export iOS or Android screens and need presentation-ready device imagery.

Time: 20 minutes · You'll need: A flat PNG export of each app screen, A device-frame PNG, SVG, or Figma component with a screen mask, Figma, Sketch, Adobe Photoshop, or another layer-based image editor, The target slide dimensions or landing-page CSS width

•Common mistakes
•FAQs

Building a phone mockup step by step

1. Measure the app mockup screen aperture

Open the frame asset and identify the screen aperture: the rectangular or rounded-rectangle opening through which the app screen is visible. Measure that opening in the frame’s own pixel canvas, not the advertised phone resolution. For example, an iPhone 16 Pro screen export is 1206 × 2622 px at its native 3× resolution; its aspect ratio is 0.460 when calculated as width divided by height.

Export the screen at exactly the aperture dimensions when possible. If your frame aperture is 1206 × 2622 px, place a 1206 × 2622 px screenshot at 100% scale and clip it with a rounded-rectangle mask. If the frame asset is larger or smaller, scale the screenshot proportionally until its width and height both match the aperture.

Do not drag independent width and height handles. A 1080 × 2400 px Android capture placed into a 1080 × 2424 px aperture has a different ratio. Stretching it makes type, icons, circles, and device-safe-area spacing visibly wrong within seconds.

Tip: Build one master frame with a named SCREEN MASK layer, then duplicate that composition instead of rebuilding masks per screen.

2. Choose a flat or angled device mockup

Use a flat, front-on frame when the reader must inspect the interface. This is the correct default for a pitch-deck product slide, an App Store feature comparison, a case study, or a landing-page section that shows two to four screens. A flat frame preserves vertical and horizontal geometry, so a 44 pt iOS control or a 48 dp Android touch target still reads at its intended proportion.

Use an angled or perspective frame only when the phone is a visual object rather than a UI specimen. It works for a landing-page hero with one dominant screen, an announcement graphic, or a campaign image. Perspective reduces legibility because the far edge of the screen is smaller than the near edge. Do not use it for dense settings, analytics, checkout, or forms.

For a set, use one camera angle and one device model. Mixing a flat iPhone with a tilted Android is acceptable only when the contrast between platforms is the point of the slide.

Tip: Keep the device’s long edge vertical in decks; rotating it 10° to 20° consumes slide area without improving UI comprehension.

3. Export the phone mockup at @2x

Decide the image’s placed width before export. If a landing page renders the finished phone mockup at 800 CSS px wide, export a 1600 px-wide PNG for @2x use. If a 16:9 pitch-deck slide places the mockup at 900 px wide, export it at 1800 px wide. Keep the same aspect ratio while exporting; @2x doubles both dimensions.

@2x describes the final composed asset, not merely the screenshot inside it. A native iPhone capture can already be 3×, but the frame, shadow, and screenshot must be composited into one image at twice the intended placement size. Do not enlarge a 600 px-wide finished mockup to 1200 px after rasterising it; export from the original layers at 1200 px.

Use PNG when the composition contains app UI, gradients, transparency, or soft shadows. Use SVG only when the full frame artwork is vector and any embedded screen image remains sufficiently large for its placed size.

Tip: Name exports with their placement target, such as onboarding-phone-800w@2x.png, so engineers do not serve a 3200 px asset at 320 CSS px.

4. Lock the status bars across the set

Create one status-bar fixture before exporting the first frame. For an iOS set, choose a single time such as 9:41, then keep the same cellular, Wi-Fi, and battery treatment on every screen. For an Android set, make the same decision for the status bar and for gesture navigation or the three-button navigation bar. A screen with 9:41 beside another at 10:18 looks like unrelated captures, even when the UI is identical.

Match the fixture to the platform and the screen’s background. Apple’s Human Interface Guidelines treat the status bar as system UI, while Android’s edge-to-edge guidance requires apps to account for system bars rather than placing tappable content behind them. Android 15 enforces edge-to-edge for apps targeting SDK 35, so verify that top and bottom insets look intentional in current Android captures.

If a screen contains a real device-specific cutout or Dynamic Island treatment, use the same device frame and capture method for every screen. Do not paste a generic status bar over one screen and retain a live capture on another.

Tip: Exclude live data such as a real carrier name, current time, VPN icon, or low-battery state from presentation captures unless it is part of the product story.

Reference table

Reference dimensions for mockup exports

Use case	Source or placement size	Export target
iPhone 16 Pro screen	1206 × 2622 px	Native 3× screen export
Android example capture	1080 × 2424 px	Match the chosen device
800 CSS px landing image	800 px placed width	Export 1600 px at @2x
900 px deck placement	900 px placed width	Export 1800 px at @2x

Do it with the free Phone Mockup Generator

Drop screenshots into realistic iPhone and Android frames, then export every combination as PNG and SVG.

Open the Phone Mockup Generator → — free, no sign-up.

Common mistakes

Scaling a screenshot until it fills the frame by dragging width and height separately.

Scale proportionally, then crop or replace the frame. Any ratio change distorts typography, icons, and circular controls.

Using an angled frame for a screen that stakeholders must review.

Use a flat front-on device frame for interface detail. Put the angled device only on the hero slide or campaign artwork.

Exporting a 1× PNG and relying on browser scaling for high-density displays.

Export at twice the intended CSS or slide width. Serve the @2x file at half its pixel width.

Mixing simulator captures with different times and system-bar states.

Apply one status-bar fixture, device model, and navigation treatment before composing the set.

Frequently asked questions

How do I match a screenshot to a phone mockup frame?

Match a screenshot to a phone mockup frame by scaling it proportionally to the frame’s measured screen aperture and clipping it with a mask. For example, a 1206 × 2622 px aperture needs a screenshot with the same dimensions or the same 0.460 aspect ratio. Crop excess content; never distort the screenshot to fill the opening.

Why does my app mockup look stretched inside the phone?

An app mockup looks stretched when the screenshot and frame aperture have different aspect ratios and are scaled independently. A 1080 × 2400 px capture is not the same ratio as a 1080 × 2424 px aperture. The distortion changes familiar shapes such as icons, avatars, and text, which makes the device image look fabricated.

Should I use a flat or angled phone mockup?

Use a flat phone mockup for UI inspection and an angled mockup for a single visual hero. Flat frames preserve readable type and alignment for pitch decks, product pages, and case studies. Perspective frames reduce the usable screen area, so they are a poor choice for forms, tables, or flows with several screens.

What size should I export a phone mockup for a website?

Export a phone mockup at twice its intended CSS width for a @2x website asset. A mockup displayed at 800 CSS px should be exported at 1600 px wide, with its height scaled proportionally. Compress the PNG after export only if compression does not introduce visible artifacts in text or gradients.

What is the best iPhone mockup generator for multiple screens?

The best iPhone mockup generator for multiple screens is one that preserves each screenshot’s aspect ratio, applies a reusable screen mask, and exports a consistent frame set. For manual work, create one master composition and replace only the masked screenshot layer. For batch combinations, use floow.design’s free Phone Mockup Generator at /free-tools/phone-mockup-generator.

Do Android mockups need a navigation bar?

Android mockups need the navigation treatment that the represented app state and device configuration use consistently. Android can use gesture navigation or three-button navigation, and Android 15 edge-to-edge behaviour affects how content relates to system bars for apps targeting SDK 35. Do not mix gesture and three-button captures within one product sequence.

Where this leaves you

A believable device image is a controlled composition, not a screenshot dropped behind a PNG shell. Measure the aperture, preserve the screenshot ratio, choose the frame angle for the viewing task, and export the final composite at @2x. Treat status bars as part of the art direction, because inconsistent time, battery, or navigation treatment breaks continuity between screens. Build one master iOS or Android frame now, test it with a 1206 × 2622 px or your chosen-device export, and duplicate it for the rest of the flow. For batch frame combinations, continue with floow.design’s free Phone Mockup Generator.

Design the screens first

Describe the screen you need in plain English and floow.design generates production-ready iOS and Android layouts you can iterate on by chat, then export to Figma or code. Design your mobile app screens in floow.design first, then build.

Start designing free →

•WebP Converter — Batch-convert PNG, JPEG, WebP and AVIF in your browser, with a quality slider, optional resize and a live size comparison.
•SVG to PNG Converter — Rasterise any SVG at 1x to 4x, or export every iOS scale and Android density as one archive.
•Placeholder Image Generator for App Mockups — Use a placeholder image generator and realistic app copy to expose text, image, locale, lo
•WebP Converter: Compress App Images Without Artefacts — Use a WebP converter to cut mobile app and landing-page image weight while preserving grad
•Gemini 3.1 for Mobile App UI Design: 4 Real Prompts Tested Hands-On (2026) — I tested Gemini 3.1 Pro with 4 real mobile app UI prompts — fitness tracker, food delivery