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.
Team of one handling design and engineering
UI Design, Motion Design, Web Design, Web Development, CocoaScript
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.
Here were the features I ended up with:
I did it! I solved my problem! But, why stop there? Let's get this thing online. Maybe someone else could use it.
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.
Every product needs an explanation. Here's mine.
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?