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!
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.
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.
Copy an artboard of your UI and paste it into the perspective mockup document.
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”.
Select the layer that we’re going to replace with our artboard and go to Plugins > Magic Mirror > Magic Mirror! (⌃⇧ M).
Voila! That's it! Export the artboard and enjoy your freshly created mockup!