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

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…

Plus a bonus freelance gig offer

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…

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

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…

  1. Find Enable Magic Mirror in the Plugin menu

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

Go Beyond CocoaScript, Unleash The Power Of Native Code

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…

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?”

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.

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

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

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…

How I turned down offers and made decisions much easier

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

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

New Inspector Panel

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