Create an iPhone X Mockup with Figma

How do you get your app mockup to appear in an image of a hand holding an iPhone, like this image here?

iPhone X mockup with hand

You could take a photo of someone’s hand while they use your app, but the reality is that you probably haven’t coded your app yet, so it doesn’t actually exist on an iPhone.

But you still want an image like this for promotion, a presentation, or another reason.

Don’t worry. You’re going to learn how to do this in Figma (a free design tool) now.

We’re using Figma because it’s free. The Adobe suite of tools like Photoshop and Illustrator are great, but they’re often not worth the cost if you don’t use them daily.

There’s only one issue we’re not going to be able to solve with Figma: sometimes these images appear at an angle.

angled iphone image

Figma can’t skew a bitmap image, so we can’t achieve this angled view. Our image is going to be dead on.

We’ll show you how to angle the image later on using a paid editing program, Sketch.

Let’s get started.

Here’s a video of this process for those of you who prefer watching the process. Continue on to read the step by step guide.

Step 1: get a screen

First you need a screen that you want to show inside the iPhone. We’re going to use a mountain wallpaper as our image. If you want to use the same image, you can find it on google images. But you probably already have a screen that you want to show.

iPhone wallpaper

Step 2: add the iPhone mask

Figma has this concept of frames. Other editing tools like Sketch call them artboards.

The idea is that you do your design work in a frame. You can have multiple frames on your canvas so you can view several parts of your design at once.

Select the iPhone mask, then copy and drag a new frame away from the original.

Now you can drag your wallpaper image onto the second iPhone mask. You’ll see your image fit into an iPhone shape. There’s even an iPhone X notch at the top.

You should have 3 frames like this:

iPhone mask in Figma

In the file attached below, we included the iPhone status bars that you can drag onto your screen if you want to make your app more realistic. Let’s skip those for now.

There’s also a glass asset in the file below that will help add glare to your app. Feel free to experiment and use our glass asset to give your app some glare.

Step 3: add your screen to iPhone + hand image

Now you’re going to drag the masked screen to an image of an iPhone. Most likely your screen is going to be too big to fit inside the iPhone image.

If you don’t have an image of a hand holding an iPhone, find one that you like on google images or use the one we provide in the attached Figma file.

unsized iPhone screen

Not to worry. Use your mouse to grab an edge of the screen and resize it to fit into the iPhone.

Pro Tip: You should be resizing your screen in Scale mode (Keyboard shortcut ‘K’).

iPhone mask in Figma

All selected layers will resize proportionally as you drag the corners.

sized screen

There you have it!

Put your mockup on a custom background

Right now your hand and iPhone are floating in empty space. But what if you want to show the iPhone and hand in a cafe, standing on the street in New York, etc?

Learn how to do that here.

Download the Figma File!

You can download the file here

comments powered by Disqus