5 Simple Steps To Perspective Mockups In Sketch

August 1st, 2015

I haven’t been designing user interfaces in Photoshop for over a year now and I must say I don’t miss it at all. Ever since I’ve migrated to Sketch my workflow drastically improved.

I love everything about Sketch (despite some weird bugs). The only time I open Photoshop nowadays is when I’m creating a presentation mockups of my designs. But this is just about to change.

James Tang released a Sketch plugin called “Magic Mirror” that lets you create perspective images from an artboard. He describes it as a simple version of Photoshop’s embedded smart objects for Sketch. This changes everything!

Step 1:

Download the Magic Mirror plugin and install it by double clicking on the plugin file. You can also install it into a specific version by just simply dragging the plugin into the desired Sketch dock icon.

Plugin Installed

Step 2:

Create a new Sketch document by dragging the image into a Sketch dock icon. Then create an artboard that fits the image size. First select the image layer then hit “A” on your keyboard or go to Insert > Artboard. Go to the inspector on the right and create an artboard around the selection. I’ve renamed my artboard to “Mockup Image” but you can name it to whatever you like.

Step 2

Step 3:

Copy an artboard of your UI and paste it into the perspective mockup document.

Step 3

Step 4:

Select the Vector tool (V) and trace the screen by drawing 4 points. Each representing the corner of the screen. This is important: Rename the layer you just created to be the exactly the same as the artboard you would like to replace it with. In my case “01-timelines-mainScreen”.

Step 4

Step 5:

Select the layer that we’re going to replace with our artboard and go to Plugins > Magic Mirror > Magic Mirror! (⌃⇧ M).

Step 5

Voila! That's it! Export the artboard and enjoy your freshly created mockup!

Share

Become a better designer

Get a quality list of design, productivity and business resources straight to your inbox!

You need to enter a valid email address.