How to make your own mockups in Figma

If you’re interested in crafting a custom mockup using your graphics or aiming to sell mockups on a marketplace (like what we do here on current website), our comprehensive mockup creation guide will be of great help.

For this example, I’ll be using an image from Unsplash:

‍

Initially, we need to identify the correct screen proportions. To achieve this, I navigate to the Apple website, find the model in question, and examine its screen resolution — 2560 / 1660.

Subsequently, in Figma, I set up a Frame matching this dimension. This frame will house the design meant for display on the device’s screen.

Next, generate a vector rectangle, which will act as our Placeholder where the adapted design will be situated

Hit R, create a rectangle, and double-click to transition into point editing mode. Position the points at the screen corners.

‍

Unfortunately, Figma doesn’t offer a perspective distortion transformation feature, which led us to develop this functionality in our Mockup Plugin (it’s free function).

After installing the plugin, navigate to the Distort section. Firstly, choose the Placeholder, then the design layer you wish to distort.

Your mockup is now ready. If you wish to alter the design, simply insert it into our frame and redo the previous steps to showcase the design on the device screen.

Note that the reflection feature only operates with the screen off. If the screen is on, creating reflections won’t be feasible.

For our next example, we’ll delve into a more intricate scenario. Here’s an image I discovered:

I employed the same approach as the previous example to make a mockup, and this is the result.

The screen seems inauthentic due to the lack of reflections. To rectify this, I duplicate the bottom layer, overlay it on the screen area, and apply the Screen blend mode to the layer featuring glares.

The Screen blend mode discards black hues and exhibits only the lighter ones.

To replicate this, duplicate our vector shape using Cmd+D (Cntrl+D) and the laptop photograph. Convert the vector shape into a mask, group it, and set the blend mode.

The outcome is a stark contrast:

For our final example, we’re dealing with a more complex scenario. This time, the screen has rounded corners. Let’s examine how to simplify the creation of such a mockup.

Initially, I will devise a vector shape comprising 4 points, which will be useful for the placeholder. By duplicating this shape, I create a mask. The mask’s form should mirror the device screen’s shape. Points are added, and the shape is reiterated sans any rounding for now.

By the way, I made the photo more contrasty to better see the details. To do this, you need to double-click on it and the image editing panel in Figma will open.

Next, I select each point individually and adjust its corner smoothing:

When the shape is ready, you need to make a mask out of it, and inside the mask insert our first four-point figure for distort transformation. The structure you should get should look something like this:

And finally, here’s the end result:

I have prepared a Figma file specifically for this tutorial, which can serve as a hands-on resource to help you better understand the process outlined in the guide. Feel free to delve into the file, explore the design layers, and play around with the functions to get a more concrete grasp of the concepts.

Here is the link to the Figma file that accompanies this tutorial:  I encourage you to use this resource as a practical companion while reading the tutorial. Enjoy creating your own mockups!

Links:

• Mockup Plugin for Figma
• Huge Collection of Free Mockups

‍