Advertisement
  1. Web Design
  2. Sketch
Webdesign

Quick Tip: How to Create Perspective Mockups in Sketch

by
Difficulty:BeginnerLength:ShortLanguages:

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 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.

Templates

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 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 Themeforest
Choose from around 100 Sketch templates on Themeforest

Useful Reading

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.