It’s no secret that we love the professional digital design tool Sketch. Not only is the UI incredibly simple to master, but there is also a huge community of developers and designers that make a dizzying array of plugins, templates, and other Sketch goodies to make it an even more useful tool. In this HoA series, we take a look at some of our favorites. Today, we’ve got the skinny on Magic Mirror, a plugin that lets users manipulate the perspective of images in Sketch.
Our clients make technical products–many are online platforms or other types of software. When we’re designing the front-end design of a new website or web page, we often like to show off the product as a potential user might see it–within the actual device.
Showing the product “in device” (whether it’s a laptop, mobile or another type of screen) makes an intangible product, like software, tangible. It’s also just more visually appealing. If you want to change the perspective of an image (e.g. viewing the device at an angle, rather than straight on), things can get a little tricky.
Manipulating the image’s dimensions to believably fit into the perspective view without making the image look like crud takes some skill. There are many tools in your average designer’s toolkit however that make it a relatively straightforward process. Adobe Photoshop’s “Smart Object” feature is particularly powerful. But if you’re building a wireframe or design on a tight timetable (a pretty common occurrence), you may not want to have to sift through Adobe’s sometimes byzantine labyrinth of tools or have to switch back-and-forth between apps. You just need to make a thing fit into another thing quickly and easily. That’s where Sketch plugin Magic Mirror comes in. It makes perspective transformations in Sketch a snap so you can create realistic, eye-popping perspective product mockups on the fly.
Although it is possible to create a perspective mockup with pre-existing Sketch features, it’s hard to do it quickly, efficiently and convincingly. Magic Mirror, on the other hand, not only makes the process effortless but updates your perspective mockup automatically.
The talented team at MagicSketch released Magic Mirror 3 this year, and it doesn’t disappoint. The newest version offers up to 4x image quality; support for the Symbols feature; support for the Slices feature; and corner-radius support. Although no longer a free plugin, you can get Magic Mirror for as low as $1.99/month with a yearly subscription and a 14-day free trial.
The easiest way to install Magic Mirror is through Sketch Toolbox, a Sketch plugin manager that you should also install if you haven’t already. Once Magic Mirror is installed, it couldn’t be easier to use. For the most common use case, just open up the Sketch artboard you want to transform. Then create a second artboard and use the vector tool to draw a shape on it, such as the trapezoid-shape of a smartphone held at an angle. Finally, open up the Magic Mirror plugin either through the menu or through the shortcut Ctrl+Shift+M. You should see your selected image adopt the perspectival shape automatically. Not only will the transformed image look realistic, but the plugin preserves all other layers you add to it, such as a reflection on the surface of a smartphone.
You can now access all of the following functions through the Sketch inspector panel, which shows up as-needed to help you along. You can flip and rotate Magic Mirror artboards; change the image quality; select or exclude layers, and refresh—all from the panel.
Image Quality Selector
Just as the name implies, the image quality selector feature allows you to choose the resolution quickly, and thus the Sketch file size, from a drop-down. Magic Mirror 3 has improved color and image quality and offers you the option to choose between Auto, 1x, 2x, 3x and 4x resolutions.
The layer selector allows you to quickly isolate the layer that you want to perform a perspective transformation on. You can even find your layer by typing its name into the corresponding field in the Sketch inspector panel. The plugin also has a checkbox on the panel to exclude a layer from the image layer selector, assuming you never want it shown.
Artboards, Symbols, Groups and multiple selections are all supported by Smart Selection, which displays their layers in the Sketch Inspector Panel.
Flip, Rotate and Refresh
Within the inspector panel, you can one-click flip or rotate the transformed image. The refresh feature also found on the inspector panel, allows you to transfer all the changes from the artboard to the layers you’ve selected.
Work some magic
Magic Mirror is a perspective mockup-maker extraordinaire. Although it is conceivable that with enough talent you could perform perspective transformations in Sketch on your own, Magic Mirror makes it effortless. A modest monthly subscription will get you one of the most powerful and useful Sketch plugins available, including features such as Image Quality Selector, Layer Selector and Smart Selection. Within minutes, you will find yourself making remarkable transformations, showing what your new design will look like, for example, on a tablet or smartphone lying on your client’s desk. Magic Mirror makes it happen.
Don’t forget to drop us a line to find out what kind of magic we can work for you.