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