Hello Hill Logo
Hire Me

Sketch Automask

The Problem


Sketch is an amazing tool, but it has one annoying quirk to a feature I use all the time. When you mask an image, Sketch insets the mask instead of making it the same dimensions as the image. Every time I needed to crop an image on only one side, I had to right click, select mask, resize three sides to the image bounds, then pull the one side in to where I needed.

Luckily Sketch has an extensive plugin library. Someone has to have solved this, right? Nope. Time to roll up my sleeves and get to work! While I've never built a plugin or app, I do have front-end dev experience and this seemed like a simple enough problem that I could fiddle my way through.

Resources:

Team of one handling design and engineering

Timeline:

3-6 weeks

My Role:

UI Design, Motion Design, Web Design, Web Development, CocoaScript

Exploration


I began by downloading some plugins that had similar features. I was looking for layer creation and manipulation examples and the basics of how a plugin is structured. After I figured out how to log stuff to the Sketch console, I basically started reading through huge lists of methods on objects to see if anything sounded like something I could use. After tons of trial and error, I finally got something working.

Sketch Automask Website

The Solution


Here were the features I ended up with:

  • An image mask that crops exactly to the selected image bounds
  • The mask stays selected so the user can easily alter it
  • A keyboard shortcut so users don't have to dig through menus

Let's Make a Product!


I did it! I solved my problem! But, why stop there? Let's get this thing online. Maybe someone else could use it.

The Hero

I created this CSS animation to both explain the concept and provide some visual interest. I used a simple SVG rectangle so I could animate the stroke. Everything else was built from HTML elements.

Choosing a Theme

I couldn't decide on a color theme so I picked multiple. CSS variables made this super easy. I defined some color palettes then used Javascript to randomly select one on page load.

AutoMask Theme

An Explanation

Every product needs an explanation. Here's mine.

Sketch Automask Website

Conclusion


I had a ton of fun making AutoMask, learned something new, created a tool I still use every day, and even made a little money through donations. What better sign of success?

Visit the Site