Essays and references on device mockups, App Store screenshots, landing pages, and the Figma workflow. Written for designers who ship.
A device mockup is a photorealistic image of a phone, laptop, tablet, or watch with your design displayed on its screen. Designers use device mockups for App Store screenshots, landing page heroes, and social media assets. Modern mockup tools render in real 3D.
The mockup tool landscape in 2026 splits into three groups: 3D-native tools (MochiMockup, Rotato, Shots.so), flat composite libraries (Mockuuups Studio, Mockup Photos), and vector packs (Angle). Here is when to pick each, with honest trade-offs.
Apple's required iPhone slot is the 6.9" display, which accepts 1320 × 2868, 1290 × 2796 or 1260 × 2736 pixels. iPad apps must supply the 13" slot at 2064 × 2752 or 2048 × 2732. This page lists every slot Apple and Google publish, read straight off their own documentation.
The hero section of a SaaS landing page has about 3 seconds to communicate what the product does. A well-placed device mockup bridges the gap between abstract copy and tangible product. This guide covers layout patterns, sizing, and export tips for above-the-fold mockups.
The MochiMockup Figma plugin lets you generate photorealistic device mockups without leaving Figma. Select a frame, pick a template, and export — no file uploads, no browser tabs. This guide walks through setup, features, and tips.
Should you use a 3D iPhone mockup or a real photograph of a phone? The answer depends on your context: mockups give you control and consistency, real photos give you authenticity and warmth. This guide breaks down when each approach wins.
Your portfolio is a product page — and your projects are the product. Device mockups transform flat screenshots into compelling case study visuals that help potential clients visualize the real experience. Here's how to use them effectively.
A MacBook mockup is the most effective way to showcase a web app, SaaS dashboard, or browser-based tool. The MacBook's clean design disappears behind the content, letting the UI speak. This guide covers templates, angles, and export workflows for SaaS teams.
Google Play takes phone screenshots anywhere between 320 and 3840 pixels per side, in JPEG or 24-bit PNG with no alpha, and asks for at least two across the whole listing. Tablets are stricter: 1080 to 7680 pixels, 16:9 or 9:16, four minimum. Here is every asset Google documents, with the source next to each table.
Most "free iPhone mockup" downloads come with strings attached: watermarks, attribution clauses, personal-use-only licenses, or a paywall at export. This guide explains the four kinds of free you will encounter and how to get a genuinely free, commercial-use iPhone mockup.
Apple Watch screens are tiny, round-cornered, and worn on a wrist — three things that make watchOS apps hard to present with a flat screenshot. This guide covers the canvas sizes for every current watch model and how to turn a watchOS frame into a wrist-worthy 3D mockup.
Every platform crops differently: link previews want 1.91:1, Instagram allows anything between 1.91:1 and 4:5, YouTube thumbnails are 16:9. This cheat sheet gives the export size for a device mockup on each network, taken from each platform's own documentation, with the source next to the table.