Figma iPhone and Macbook mockups

A screenshot on a white background is a design file. The same screenshot inside a MacBook is a product. That is a lot of persuasion for a piece of drawn hardware to be doing, and it is why a device frame sits at the front of almost every app store listing, landing page hero, case study, and investor deck.

These are built for the moment after the design work is done, when what you need is a picture of it that someone will believe.

What the set contains

Four things, broadly. A MacBook Pro 16 with the display, camera dot, base logo, and a soft ground shadow drawn as separate layers. An iPhone with modelled power, volume, and mute buttons, antenna bands, speaker, and camera, wrapped around a 375x812 screen area, with the status bar and home indicator kept as their own components so you can restyle or hide them.

Browser toolbars in three treatments: a minimal color bar and a minimal monotone bar, both 32px tall, and a fuller Safari toolbar at 52px, each in light and dark. And bare screen frames with no hardware at all, in six sizes at a 3:2 ratio, 342x228, 480x320, 640x426, 768x512, 1,024x682, and 1,216x810, plus a separate modern screen frame at 1,216x816 for desktop and 375x793 for mobile. Every one of these exists twice in the file, once light and once dark.

Dropping a screenshot in without fighting the crop

Inside each device sits a frame named "Screen mockup (REPLACE FILL)", which is an instruction rather than a label. Images in Figma are fills rather than layers, so the move is to select that frame and drop your screenshot in as its fill, not to paste a rectangle on top of the device and nudge it into place. The mask is already the right shape, corner radii included, and the fill scales to cover it.

Ratios decide whether this takes ten seconds or an afternoon. The MacBook's screen area is 8:5, so a desktop design exported at 1,440x900, or 2,880x1,800 at 2x resolution, lands in it exactly with nothing cropped off the bottom. That is the same 16:10 Apple asks for in its App Store screenshot specifications, which list 1,280x800 through 2,880x1,800 for Mac, so one export can serve the marketing site and the listing. The iPhone frame's 375x812 screen is the classic iPhone point size, which means a mobile design drawn at 375px wide, the standard mobile artboard across this kit, needs no resizing at all.

Browser chrome, and when to leave it off

The toolbars are there because a web app in a bare rectangle looks like a design, while the same app under a URL bar looks like a site somebody actually visited. Reach for the Safari bar when the point is that this runs in a browser on a Mac, and the minimal bars when you want the suggestion of chrome without a fake address competing for attention.

The monotone version is the quieter one, which matters on a busy marketing section where a colored toolbar starts to read as part of your palette. And put your real domain in that address field. A hero image with example.com in the URL bar is a hero image nobody checked.

Craft notes before you export

Export at 2x, or 3x for phone shots, because a mockup is usually shown large and the hardware edges are where softness shows first. Keep the shadow layer if the mockup sits on a colored or photographic background and drop it when the device sits on white, since a shadow with no environment reads as a sticker.

If you are staging a sequence, a cursor placed over a button is what separates a screenshot from a moment. For the layout around the device, whether that is a case study grid or a shot list, the portfolio mockup templates handle the composition side, and a hero that needs to play something can borrow the video player components in place of a still.