Design & UX
Article

Creating a Perspective Mockup in Sketch with MagicMirror

By Daniel Schwarz

Though I often talk about both Sketch App and Photoshop, my slight crush on Sketch means I tend to spend more time with it.

However, the fact remains that I need to use both sometimes. One such example is when I’m designing for screens in Sketch App, but I want to mockup the screen as if it were being viewed on an actual device, and for that I need Photoshop’s “Smart Object” functionality. But why go through the effort?

Sometimes the visual aesthetic of a design doesn't really come to life until you take it off the flat canvas and show it off from a 3D perspective; in other words, how you might see it, realistically, with the naked eye.

Not only that, but it helps the mockup fit into a horizontal frame (for sharing on Behance and Dribbble) and many clients simply love how it looks.

Perspective mockups are very trendy, there’s no argument about it!

MagicMirror Plugin

MagicMirror Plugin

MagicMirror Plugin works like a Photoshop Action for Sketch, and there’s a terrific free version available. You design your screen in an artboard as normal, and a keyboard shortcut creates a sort-of smart object mockup of your screen.

Let's take it for a spin!

Getting Started

You can either use a screen that you’ve already designed or download a .sketch freebie, such as this epic Dark Dialer interface by Bootstrap Guru.

Before you open it though, download the MagicMirror Plugin and try to open the .sketchplugin file that comes with it. Just like with Photoshop Actions, this will automatically install it.

Now you can open your .sketch design!

Dialer

Creating the Makeshift “Smart Object”

It’s not really a smart object, but it is smart. Press “A” to open the Artboard dialog in the inspector or simply Duplicate (command+d) the "source" artboard and remove its contents.

What we want to achieve here is two artboards of the same width and height, but one of them should be empty to ensure that our smart object retains the same aspect ratio as the design.

Press “R” to create a Rectangle and draw it out so that it fills up all of the whitespace in the new, empty artboard, then turn your eyes to the menu bar and hit the “Transform” tool.

Setting the Stage

It’s vital that we use Transform and not “Edit”; Edit will create an irregular shape whereas Transform will make sure that our shape retains the correct aspect ratio of our design.

Move the corners of the shape until you have the angle that you want. Perspective is assured if you’re using Transform.

Manipulating the Shape with the Transform Tool

It might be useful to save your favourite mockup shots in a single .sketch file so that you can use them as templates later on, or you download some of the mockups from the site: here’s a brilliant one.

Setting Up the Design to be Mirrored

We now need to connect our shape to the design so that they can be mirrored, but that’s really easy. Just make sure that the shape layer is renamed to match the artboard.

Connecting the Screen to the Shape

Connecting the Screen to the Shape

Learning the Keyboard Shortcuts that Make It Happen

Press control+shift+m to start the mirroring (this works across “Pages” as well, like Shared Styles and Symbols). You might end up with something like this (below), but there are other keyboard shortcuts that we can utilise to achieve our aims.

Rotating and Other Keyboard Shortcuts

Rotating and Other Keyboard Shortcuts

In our dilemma, we'll need to select the rectangle shape and use command+control+shift+r (I know, that's a crazy shortcut!) to rotate our design inside the shape; MagicMirror actually uses the “Fill” style to create a background image, but how they rotate it, I have no idea. It must be magic!

Now Everything Is in Perspective

Now Everything Is in Perspective

Here're two other keyboard shortcuts to remember:

  • Shift+Control+J: Jump from shape to original artboard
  • Shift+Control+Command+F: Flips content (similar to rotate)

Conclusion

What we’ve accomplished today is rather basic. If you wanted to step it up, here’s two things to consider. Firstly, you can always import your own vector or bitmap devices and overlay your own smart objects – you don’t have to leave it bare. Personally, I think this method is fluff and a user interface design should only be showcased in this way as a means of showing off.

Secondly, you can totally have more than one mockup and use various perspective shots that will automatically update when you run the keyboard shortcut. In fact, there's absolutely nothing stopping you from using MagicMirror as a general-purpose smart object tool, something that many Sketch fans have been requesting for a very long time.

Many of us have to deal with the impracticability of breaking our workflow and switching to Photoshop every time we want to show off our screens in a mockup, but with the MagicMirror Plugin, we can keep our workflow contained to a single design tool.

Hopefully!

  • Tim

    “take it off the flat canvas and show it off from a 3D perspective; in other words, how you might see it”
    If you’re going to go through all that trouble why not just buy Sketch Mirror from the App Store so you can see how your design looks on a real device?

    • https://mrdaniels.ch/warz/ Daniel Schwarz

      But what if you want to show it to somebody, or a community such as Dribbble? What if you need to mockup your design in a device (for a trendy anding webpage maybe) and you don’t own that device? Even if it was for your own viewing, what if you don’t have an iOS device? Sketch Mirror only works on iOS.

      • Tim

        I think I’ve met one person in the last 7 years that uses a Mac that uses an Android phone instead of an iPhone, but I get your points. However, Sketch isn’t the best tool for mocking up a photorealistic phone. For interface elements and flat objects it’s fine, but when trying to do photorealism you are better off just importing the UI screens into Photoshop, Pixelmator, or some other app.

        • https://mrdaniels.ch/warz/ Daniel Schwarz

          Really? I’ve met tonnes, however I myself don’t own a mobile device at all. I have to agree with you on Photoshop, though, although not many designers create their own realistic devices. It’s dead-easy to import a bitmap into Sketch and overlay a “screen” over the top.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.