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:
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.
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!
Useful Reading
- Plugins, Resources and Freebies to Spice up Sketch
- Quick Tip: How to Use Sketch’s Updated Symbols
- 10+ New Sketch Plugins to Improve Your Design Workflow
- Sketch templates on Themeforest
- iPhone photo by Alejandro Escamilla on Unsplash
