How You Can Build Native Inspector Panel UI like Magic Mirror 3

Image for post
Image for post

There is no standard way building Sketch plugins, not even to mention setting up a Xcode project for Sketch plugin development. Documentation on this sector is not readily available.

Because of that, I previously covered essentials on how we can get started. However, after having to follow it over and over myself, I realized it was nothing but pain lengthy manual process to setup all those configurations and dependancies. Most of us just needed a quick way to experiment some APIs or prove of an immediate concept.

For this sake, I created this Xcode template for you, so that you can get ready on the most important thing to build as easy as possible. …


Plus a bonus freelance gig offer

Image for post
Image for post
Image by Bench Accounting via Unsplash

For the past 18 months, I was paying for a coworking space membership. However, last month they doubled the price. Instead of settling for it, I wondered if there were cheaper or even free alternatives.

Coffee shops, libraries, and other public areas were not an option to me. I had to constantly look after my computer and belongings. And to make things worse, getting reliable power and internet access was more challenging.

I previously visited many Hong Kong’s tech company offices and there were usually at least one empty desk. I liked the fact that I could meet great people, exchange knowledge, and understand their culture. …


We’ll make use of Image Fill, Slices, and Magic Mirror 3 Plugin

Image for post
Image for post
image taken from original Sketch website

First, Create a Frame with Rounded Rectangle Tool

  1. Use the Rounded Rectangle Tool (Unlike the Circle Tool, this works better with Image Fill we’ll be using later) and create a 200*200 shape.
  2. Make it a circle shape by dragging the Corner Radius to Max, or key in 100 (which is half of the length)
  3. Add an Outer 1px #cccccc border
  4. Add an Inner 5 px #ffffff border
  5. Add a Drop Shadow with 2px y and 20px blur, #000000 20%

Second, Slicing Out The Specific Area

  1. Use the Slice tool to specify the area in your design that you’d like to zoom in.
  2. Press the Export button, now you can export the area to a separate image. …


  1. Find Enable Magic Mirror in the Plugin menu
Image for post
Image for post

2. Select any layers, look for the panel in the right inspector. Click on the “Settings” icon.

Image for post
Image for post

3. Enter your license key, click Activate.

Image for post
Image for post

4. Then everything should be good to go :)

If you have issues activating your license, please file a ticket.


Go Beyond CocoaScript, Unleash The Power Of Native Code

Image for post
Image for post

If you’re reading this, you probably already know Sketch plugins are suggested to be written in CocoaScript, which is basically JavaScript.

There’re many which we just CAN’T do using CocoaScript.

  1. Communicating with Sketch Classes using Block.
  2. Asynchronous Methods and Background Operations.
  3. Using marcos, and compilation time features like #define, typedef
  4. Writing runtime code in Objective-C.
  5. Code completion.
  6. Debugging and Inspecting runtime objects.
  7. Performance! Since every instructions are going through a Javascript Bridge with CocoaScript, you really can’t expect much.
  8. Interface Builder.

The list goes on. It’s far from ideal development environment, and we don’t wanted to be limited.

In this article, we’ll cover the minimal setup, so that you can get started to build your Sketch plugins in Xcode. …


Image for post
Image for post

Sketch Plugin to Transform Your Design Into Perspective Mockups

What’s Magic Mirror?

Magic Mirror is a Sketch extension (or called plugin) that adds Perspective Transformation to Sketch, so users can create perspective mockups and other distorted effect to their UI design.

Before Magic Mirror, Sketch users have to consult other graphics design tools like Adobe Photoshop and make use of the Smart Object feature.

How it works?

Any perspective shape with 4 corners is enough for the plugin to determine the correct transformation to apply. …


For previous license owner of Magic Mirror 2 & 1 supporters

Thankyou for all your support, here’s the upgrade program to Magic Mirror 3.

  1. Navigate to the /mirror/pro page

2. Click on the link “I have an MagicMirror 2 license key?”

Image for post
Image for post

3. Enter your old license key and press enter, our system will validate your key and determine the date you purchase and the appropriate amount.

4. Select a plan and proceed to the payment, you should be redirected to a thankyou page.

Image for post
Image for post

A email containing your license key should be delivered within 5 mins upon successful payment.

p.s. If the upgrade credit is more than the payment, remaining will be bring forward to the next billing cycle.


We just wanted to focus on one version, and make it great

Image for post
Image for post
Magic Mirror update history — 23 versions in past 18 months.

Magic Mirror 3 is the 3rd major upgrade after 539 days of initial release. Since Magic Mirror 1, I’ve released 23 versions of Magic Mirror plugin, to support the growing community of Sketch users and updates.

It doesn’t seem to take that much of work, but it happened.

Whenever Sketch updates, something changes.
Whenever OSX updates, something breaks.
And we committed to implement features and fix bugs along the way.

Maintaining a product requires consistent amount of work.

Here’s a bit more stats

23105 downloads.
2813 Sketch users purchased the pro version.
3812 users use it monthly.
27 Sketch templates published.
6 official intro videos.
15 community blog posts and videos.
209 git commits in Magic Mirror 1
225 git commits in Magic Mirror 2.
212 git commits in Magic Mirror 3. …


How I turned down offers and made decisions much easier

Image for post
Image for post
Photo Credits: New Mexico Common Core

I’ve been making a living on my own product in 2016, and later worked part-time as a barista for almost a full year. I came up with three simple ideas that I had shared and delighted a few of my friends.

Those ideas later turn out to be more than just random thoughts. They contributed to my decision making and guide directions to more important questions in my career and life.

I called them my 3 guiding principles.

1. Flexibility

I have always been bothered by 9–5. People expected full-time commitment, but keep paying much less than who do freelancing or consulting. …


Brief walkthrough on the new features

Image for post
Image for post

We’re thrilled to show you a whole new version of Magic Mirror plugin for Sketch.

New Inspector Panel

About

James Tang

Sketch Plugins and iOS UX Engineer. Opensource projects contributor, share on Twitter. @jamztang

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store