1. Web Design
  2. UX/UI

Quick Tip: How to Create Perspective Mockups in Sketch

Scroll to top
Read Time: 2 min

Manipulating graphics into three dimensions (adding perspective with a vanishing point, or along an isometric plane) can be really useful for mockups. In this quick tip we’ll use a plugin called “Magic Mirror” to help us create perspectives in Sketch.

Watch the Screencast

Let’s say you’re working on an iOS app and you want a hero image on the website of someone holding an iPhone, at an angle, showing off the app UI. Achieving this through traditional methods in Sketch is quick tricky, so we’re going to grab a Sketch plugin called Magic Mirror to help us.

Install Magic Mirror

There are a couple of ways to install this plugin; either download and install from the website, or use Sketch Toolbox to help you manage plugins more intuitively.

Once installed, back inside Sketch go to Plugins > Magic Mirror 2 > Enable Magic Mirror

Define an Area

With everything setup, you now have to define an area within Sketch, select it, then specify an artboard within the Magic Mirror dialog. The contents of that artboard will then be mirrored within your selected area. Using our iOS app example, we might get something like this:

magic mirrormagic mirrormagic mirror
Area mirrored with “iPhone 7 Plus” artboard

With your artboard now mirrored in the selected area you can rotate and flip it, and even (in the plugin’s pro version) dictate whether it’s at @1× or @2× resolution.


One nice aspect of this plugin is its templates. Visit the website and you’ll find a whole section with available templates ready for you to use. Some of them require purchase, but most of them are free.

Device and Wood is freeDevice and Wood is freeDevice and Wood is free
“Device and Wood” is free

Wrapping up

That’s how you can use the Magic Mirror plugin to help create mockups with perspective. I hope you found this useful, and don’t forget to check out what’s hot in the Sketch templates category on Themeforest!

Sketch templates category on ThemeforestSketch templates category on ThemeforestSketch templates category on Themeforest
Choose from around 100 Sketch templates on Themeforest

Also: Placeit

Placeit is a mockup generator; an online tool which allows you to embed your own designs (be they UI designs, logos, other branding assets) into presentation environments. For example, you might have an app design which you’d like to place within an iPhone on a coffee table, or superimpose your logo onto a model’s shirt. 

Woman Using an iPhone X Mockup in her Living RoomWoman Using an iPhone X Mockup in her Living RoomWoman Using an iPhone X Mockup in her Living Room
iPhone X Mockup

Perhaps you’d even like to see your designs embedded into stock videos (seriously, you have to take a look at the videos). With almost 3,000 templates and counting, Placeit is sure to have what you’re looking for.

Useful Reading

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.