Introducing Magic Mirror 3

Sketch Plugin to Transform Your Design Into Perspective Mockups

James Tang
MagicSketch Blog
Published in
3 min readJan 17, 2017

--

What’s Magic Mirror?

Magic Mirror is a Sketch extension (or called plugin) that adds Perspective Transformation to Sketch, so users can create perspective mockups and other distorted effect to their UI design.

Before Magic Mirror, Sketch users have to consult other graphics design tools like Adobe Photoshop and make use of the Smart Object feature.

How it works?

Any perspective shape with 4 corners is enough for the plugin to determine the correct transformation to apply. Combine that with a rasterised copy of user selected exportable layer, we create a distorted version of that image using Core Image, and finally set the results into the shape’s “Layer Fill”.

Because it’s using “Layer Fill”, non Magic Mirror users will still be able to see the perspective results, so it’s absolutely safe to use.

Why new version?

Back then it was a breakthrough to add a custom UI instead of using shortcut, but now with more talented developers and plugins like Craft, AnimaApp, Sketch Data Studio, Sketch Focus, User Flows, Sketch Runner, etc, users are expecting much much more.

In this new version, I designed the plugin with three main elements to improve on top of Magic Mirror 2 — Time, Power, and Space.

  1. Save Time
    MM2 doesn’t provide proper feedback when a layer is in incorrect format. Some users were confused and kept selecting the wrong layers, or trying to apply transformation in shapes with more than 4 points or corner radius. With our new Smart Selection tool, all valid layers are shown in one click.
  2. More Power
    MM2 only supports Artboards as the source to apply perspective transformation. New version now supports Slices and Symbols, as well as better image quality up to 4x. You can also control which layers are shown in the list.
  3. More Space
    The floating toolbar was a major break-through. We loved it but it really hurts real screen estate. Lots of users keeps disabling the toolbar to clear out their desktop spaces. We figured a way to safely integrate our control toolbar with Sketch’s inspector panel, and it’s context aware, so the options only shows up when appropriate.

We’re thrilled that after 2 private beta testing and 1 pre-release stage, it’s now available for everyone to try out.

Giving Back

We never forget who support us in early stages, just enter your old license key and redeem the credit upon payment.

If you purchased within 3 months, $11.99 is actually almost the full price of MM2 license ($12).

As usual, you can download version 3 for FREE.

Please hit Recommend ❤

--

--

James Tang
MagicSketch Blog

Sketch Plugins and iOS UX Engineer. Opensource projects contributor, share on Twitter. @jamztang