How do you get your app mockup to appear in an image of a hand holding an iPhone, like this image here?
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.
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.
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:
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.
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’).
All selected layers will resize proportionally as you drag the corners.
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?