TNW Conference 2022 will be bigger, bolder, and better! Get your tickets now >>

The heart of tech

This article was published on August 3, 2015

    Magic Mirror for Sketch 3 lets you quickly create hands-on mockups of your apps

    Magic Mirror for Sketch 3 lets you quickly create hands-on mockups of your apps
    Nate Swanner
    Story by

    Nate Swanner

    Former Reporter, TNW

    TNW's former West Coast writer in the PNW (Portland, Oregon). Nate loves amplifying developers, and codes in Swift when he's not writing. If TNW's former West Coast writer in the PNW (Portland, Oregon). Nate loves amplifying developers, and codes in Swift when he's not writing. If you need to get in touch, Twitter is your best bet.

    If you’re wireframing iOS apps, Sketch 3 is a great option. When you need to turn those mockups into hands-on views for a website or press release, a new plug-in named Magic Mirror can morph your design into any angle or shape you like.

    Magic Mirror claims its plugin is “a simple version of Photoshop’s Embeded Smart Objects for Sketch,” effectively erasing the often long Photoshop learning curve. Further discussing its simplicity, Magic Mirror is pretty open about how it works:

    In short, Magic Mirror iterates through all the “Shape” layers (MSShapeGroup) in the current page, and finds all the Artboard-Layer pairs that share the exact same name.

    Then it looks into the path (NSBezierPath) and extracts the 4 corner points.

    It then hands the content over to Core Image to do Perspective Transformation, and apply the transformed image using Pattern Fill.

    The plugin uses the pattern fill method to morph your designs, and allows you to turn them into just about any shape or size, or adjust the viewing angle. The main purpose will be to work app designs into hands-on shots for websites, but if you just want to get weird — Magic Mirror lets you.

    Best of all, Magic Mirror is free. If you like it, there’s an option to donate $5 on the website.

    ➤ Magic Mirror

    Read next:InVision design and collaboration platform now works with Sketch

    Get the Dd newsletter