Classic City Consulting - C Logo

MagicMirror for Sketch Improves Workflow

By: Chris LaFay on September 9, 2015

For Classic City Consulting design work I had always used a combination of Adobe Fireworks and Inkscape to accomplish all of my tasks. Fireworks was perfect for designing and laying out websites while Inkscape was (free) easy to use and compiled vector graphics for print materials perfectly.

That all changed when I started using Sketch a few months ago. I picked up Sketch and have never looked back to either of those two applications (unless I’m on a Windows machine). Sketch is the perfect tool for designing websites and web applications as well as doing vector work. It allows easy back-and-forth from vector to raster and makes my job a whole lot easier.

With that being said, there was one piece that was missing. As a web designer, I love to show my client’s mockups on a stock image that has a device being used (whether that be a mobile phone or a laptop). However, there wasn’t anything for Sketch that was easy to use that allowed for auto-scaling and transformig my mockups onto an angled device. I’ve never been able to do it easily back when I was using Fireworks as well – it was always something I absolutely dreaded doing.

About a week or so ago, I stumbled upon MagicMirror. It allows you to take one of your artboards and auto-transform it to fit onto an angled box of your choosing. My initial thought was that it couldn’t be that easy. There’s no way the only thing I had to do was to draw a box around where I wanted my mockup to be placed, push a keyboard shortcut and then it magically appears right where I wanted it to, scaled correctly and completely proportionate.

MagicMirror Classic City Consulting Output

Well, it happened. And in about 30 seconds. I installed the plugin and on the first try, everything worked exactly as I expected. All the images above were done through an artboard, a rectangle and couple of shortcut keys. I can now give my clients an understanding of what their product is going to look like on various different devices without having to worry about it and set aside time like I had to before (yes, I had to block off time for this type of work in the past). Now, it’s just a 30-second piece of my workflow that I no longer fret.

Magic Mirror Classic City Consulting Cell Phone Output

Written By:

Chris LaFay

Chris founded CCC after trying to figure out how to have the work-life balance that everyone dreams of. Not only does he get to enjoy designing + implementing websites, he also gets to play with his dog, travel, enjoy family dinners, and keep up with baseball. Check back with Chris for articles on web design, user experience, and project case studies.