How to Make Phone Mockups Without Figma or Photoshop

You do not need a design tool to put something inside a phone screen. The job splits into two different problems, and knowing which one you have saves most of the time: either you already have a screenshot and need a device around it, or you need the screen contents themselves to exist in the first place.

Which problem do you actually have?

You have a screenshot already. You captured a real screen from a real phone and you want it presented nicely — inside a device bezel, on a background, angled in a hero image. This is the well-served case. Search for a device mockup or frame generator and you will find a dozen tools that do it in one drop.

You do not have a screenshot. You have a photo, or a design, or an idea, and you need it to appear as though it were on a phone screen — inside a real app interface, with a status bar, a toolbar, and the rest. This case is much less well served, because it means generating the interface rather than framing an existing capture.

Most people searching for "mockup generator" have the first problem and find help immediately. If you have the second and keep getting bezel tools, that is why.

Option 1: a browser tool

The fastest route for either problem. Browser-based generators need no install, no licence, and no design knowledge, and the good ones export at true device resolution rather than at whatever size your window happened to be.

For the second problem — generating the screen contents — that is exactly what the tools here do. Drop in your photo and you get the whole interface built around it, at the resolution the real phone writes:

• iPhone Photos Screenshot Generator — the iOS Photos viewer, with a status bar, caption, filmstrip, and toolbar
• Android Photos Screenshot Generator — the Google Photos viewer, at Pixel and Galaxy resolutions

Option 2: the presentation software you already have

Keynote, PowerPoint, and Google Slides are surprisingly capable here, and everyone already has one of them. Insert a rounded rectangle, set the corner radius high, drop your image inside it, and add a thin outer rectangle as the bezel. Export the slide as an image rather than screenshotting it, so you keep the resolution.

This is genuinely fine for a slide that will be shown once. It is not fine for a portfolio piece or anything that will be looked at closely, because the proportions will be approximate and the interface details will be missing entirely.

Option 3: Canva and similar

Canva has device frames built in and is free to start with. It sits between the two options above: more polished than drawing rectangles in PowerPoint, less precise than a purpose-built generator, and it requires an account. Good if you are already working in Canva for the rest of the asset.

Four things that make a mockup look wrong

Whichever route you take, these are what people notice — and none of them are about the bezel:

• Upscaling. Starting from a small image and enlarging it produces soft edges that read as cheap instantly. Always start at or above the final size. Correct proportions will not rescue a blurry source.
• The wrong aspect ratio. Modern phones are roughly 19.5:9, far taller than the 16:9 most people reach for. A phone that is subtly too short looks off even to viewers who cannot say why.
• A contradictory status bar. Wi-Fi and a 5G label shown together, a carrier label that does not match the carrier, a 100% battery in a casual moment. Details are covered in what every icon in the iPhone status bar means.
• The wrong platform's furniture. An Android screenshot with an iOS-style home indicator, or an iPhone with text-labelled bottom actions. The two systems genuinely differ, and mixing them is the fastest way to lose anyone who uses the platform you got wrong.

What resolution should you export at?

Match the device you are depicting. For iPhone that is usually 1179 × 2556 or 1290 × 2796; for Android, usually 1080 × 2400. Both are covered model by model in iPhone screenshot sizes and Android screenshot sizes.

If the image is destined for print or a large display, export at the highest resolution available and scale down. Scaling down preserves detail; scaling up invents it.

When you actually do need Figma

None of this replaces a design tool when you are designing an interface rather than depicting one. If you are laying out screens, iterating on components, building a design system, or handing specs to a developer, use the real tool. The shortcuts above are for the far more common case: you need one convincing image, today, and you are not going to become a designer to get it.