I don't know what the exact term is for this, but I often see UX/UI designs displayed as follows:

enter image description here

i.e., displayed on rendered mobile devices' screens in 3D.

I have finished my UI design in sketch (i.e, I have a collection of screens). I would like to obtain the same rendering as on this picture. How can I do this please?

Ideally, I am looking for a tutorial on how to do this. I looked for one in Google but since I don't know for what keywords I should look for I was not successful at it.

  • There is a plugin (Magic Mirror) for sketch which does exactly this kind of transformation: magicsketch.io/mirror
    – ofhouse
    Apr 8, 2018 at 20:31
  • There are many ways of doing this: templates on Photoshop, plugins for Sketch, manual work, etc.
    – Luciano
    Apr 9, 2018 at 8:57

1 Answer 1


There's a free plugin called Angle for sketch for doing this which is very effective (name is linked to website) which I've used, is highly effective and well documented.

In addition to the free plugin with its decent but small library of devices (more than enough for most use-cases) they also sell extended libraries of gazillions of other device images at a huge range of angles.

Their plugin not only uses their stuff (all of which is decent vector art) but if you have a given design mockup, and separately you create a rectangle of the right aspect ratio and skew and perspective distort it, you can use that as a target in their plugin - so you can use other assets besides theirs, whether photo based, you created, or purchased elsewhere.

Angle image

Not the answer you're looking for? Browse other questions tagged or ask your own question.