Essential Sketch Plugins
For Web Design

Better Work, Faster with Sketch Plugins

Sketch is seriously awesome. It didn’t take long before all the designers at NMC switched over to Sketch full-time. Ashley, Lenny, and I use it for all our client web work and now with version 3, it’s both feature-rich and stable enough for professional work (though in the office you may occasionally hear me refer to it by its affectionate nickname, “Crashy McHangsalot”).

Clients love it because it helps us do better web design, faster. The enthusiastic community that has sprung up around it in support (many of us Fireworks refugees) has grown tremendously in a very short amount of time. You can find tons of great tutorials and free assets all over the web. If you're just getting started, I highly recommend Meng To's fabulous "Design + Code" tutorial web site and e-book.

There’s not yet a formal repository of plugins — nor a proper 1st party plugin manager — which means you have to tool around github, twitter, Medium, and Design News to find the best ones. Bomber Studios maintains a terrific and continuously updated plugins list on github, but that includes everything and the kitchen sink. You want the steak, dear reader, not the sizzle, but fear not — I’ve done the hard part for you! Below, please find my essential sketch plugins.

First and Foremost

Before we get started, go download Sketch Toolbox, which is a simple 3rd-party plugin manager for Sketch. Many text editors (such as Sublime Text, Coda, or Atom) have had similar functionality for years but it’s relatively atypical for graphics drawing applications to have them. And while Toolbox is still in beta, it's fast, stable, and useful. It provides a directory of plugins on github that you can browse and install directly. (I'm not 100% how the directory is populated, though.) My favorite features are:

1. You can search by plugin name, description, or developer name
2. It downloads and installs the plugin for you
3. It shows you which ones you’ve already installed

All of the plugins I mention in this article can be downloaded and installed via Toolbox (plus a whole lot more!). You’re welcome to install them manually since all these below are available in Toolbox, it's much simpler. Maybe someday Bohemian Coding will roll this kind of functionality into Sketch itself, but that day is not today.

Enough Already, Get to the Plugins

All right all right, hold your horses. I’ve split the list into two categories: one for Workflow, which is about the the actual design process, and one for Utilities, which help with other tasks like exporting, fetching remote data, setting up the artboard, or saving time via shortcuts.

Workflow

Swap Fill & Border

Sometimes your Fill and Border colors are backwards. Swap them with a single keyboard shortcut for all selected layers. (In Fireworks, this was the ‘X’ key and it’s still hard-wired into my brain.)

Clear Styles

As the name implies, the Clear Styles plugin will automatically remove any style properties for the selected layer. Properties include Border (Stroke), Drop Shadows, Inner Shadows, Blur, Reflection, and any blending modes. Note that it does not consider solid Fill a property: activating the plugin leaves whatever solid fill it has. Custom fills like Gradient, Pattern, and Noise Fills, however, it does remove.

Dynamic Button

The Dynamic Button plugin has probably saved me more time than any other plugin especially for large sites where we have to document many interior pages and view states. Sure, symbols lets me set global properties to an object that is instantly propagated to every instance in the artboard, which is essential for things like buttons and inputs. But there’s simply no telling how much text a button will have! Size it for copy like "Contact Us" initially but then later I need to write "Click me! Click me! Hey, over here!" and suddenly it doesn't fit. And it’s not like I’m going to calculate the appropriate padding and re-size every element manually. At best I may eye-ball it but that leaves my pixel-perfect OCD in a quandary. Much better to let Dynamic Button do it for me.

Dynamic Button creates buttons with fixed paddings that adjust to the length of text. Select the text, type the new words, hit command + J, boom. Super simple. Check the video to see it in action:

Child Layers

When you’ve got a group, clicking it selects the group folder. You can hold the command key to select individual layers within it and, if you’re like me, you then hold both the shift and command keys and select each layer like a neanderthal. Child Layers selects all the layers in a group for you: just click the group and type control + option + A. Suuuuuper handy. I use it literally all the time.

Note: for some reason, the Child Layers plugin doesn't work when you install it via Sketch Toolbox; you have to do it manually. Not sure why but I asked the developer and he confirmed it!

Measure

Sometimes in the early stages of a design, you need to indicate the dimensions of a particular on-screen element, say to another colleague on your team. Alternatively, you may need to provide a reference document for developers to use during the build-out. In either case, it’s really handy to draw an element that can be instantly converted into width and height measure marks that includes the dimension in pixels automatically.

Think of it this way: when you use the smart guides and it shows you in real time how far apart things are? It’s like if you could freeze those. The video does a good job demonstrating what I mean:

Content Generator

Speaking of needing dummy content, Content Generator has you covered. Select any text layer and you can randomly assign it things like:

• City name (France)
• Full address (USA)
• Province (Netherlands)
• Female name
• Email address

Or, select a rectangle and it becomes a random nature image or band photo. Maybe you just need a generic male or female avatar photo? Or how about a panda illustration? The possibilities are endless!

Sketch’s “Type something” becomes Philadelphia! Or Diane Garcia! Or Clovis, IN 34908! Or rking@roodel.gov! Or some random music artist! Generate your some hipster ipsum text! What will Content Generator come up with next?? Why did I drink so much coffee this morning?!?!!one!1

Day Player

Not a nature lover? That’s cool. Maybe you’re a more sophisticated connoisseur of placeholder images. And boy, what a hassle it is to grab them manually — developers have it easy because they can use services like placehold.it, lorempixel.com, placekitten.com, and my new favorite fillmurray.com. Day Player fetches these for you automatically. Trigger it, choose your service, type in the appropriate options like dimensions, color, and category, and Day Player inserts it. How great is that? I wish I could go back and tell my 20 year-old self how awesome 2014 is.

Utilities

Page Switch

Not super sexy but it drove me bonkers that there was no keyboard shortcut for jumping between pages. Page Switch assigns some sensible shortcuts: command + l for next page, command + k for previous, command + ` to prompt a page to select, and command + p to create a new one.

Sketch Commands

Commands is a whole suite of automated tasks. Ported from Fireworks (called Orange Commands), it assigns keyboard shortcuts to common tasks. For example, type control + 1 to set the selected object’s alpha to 10%. Or duplicate the artboard below or to the right of the current one, or clear / repeat all guides horizontally in the current document, or move down by 100px, or scale to 16:9, or my personal favorite convert text to upper- or lowercase. Tons of great stuff, all at the press of a button. You're not going to use or need all of them and many will make sense only after trying them out.

Sketch Plugins

Simply called ‘Plugins’, this collection “an assortment aimed towards working with horizontal/vertical grid layouts and typography” with a smattering of basic color manipulation. You can handy things like toggle lock / unlock all layers, draw a typographic scale, align text to the baseline, create a random color palette, copy the HEX color value, or automatically convert your grid into rulers / guidelines. Recommended!

Bonus Round

Did you know you can re-map any key binding or shortcut in any app universally? It's an OS-level feature available in the "Shortcuts" tab under System Preferences > Keyboard. Here's mine:

I use this for when either a default shortcut doesn't make sense to me or is too hard to use / remember but mainly for those shortcuts that don't already have shortcuts. In particular, the "Show / Hide Slices" command doesn't have one and I find it a giant hassle to click to select an element only to find that I keep selecting the slice instead. (I went ahead and remapped "Show / Hide Layers" to be consistent). Also, "Arrange > Align Objects" has the "Vertically" and "Horizontally" commands which I use constantly and so mapped them to something easy. Remember, you have to type the name of the command exactly as it appears in the menu, including capital letters and three periods for the ellipsis, to work.

Also, in case you want to see all the default menu keyboard shortcuts at a glance in a handy, attractive layout, I've got you covered.

1. Sketch Plugins 2. ??? 3. Profit

Sketch's 3rd party plugin community is vibrant and growing and these few have already become essential to my workflow. This collection really just scratches the surface — you can find tons more and you're not limited to how the developers name them. Whatever you call the file or folder is how it will appear in your Sketch Plugins menu dropdown, so go ahead and call it what makes sense to you. You could also number them to force the order.

Together with keyboard shortcuts, you'll never need to touch the mouse again (which, naturally, is the goal). Doing more in less time means you work faster, which makes you a better designer and your clients happier.

Have any favorite Sketch plugins you can't live without? Add them in the comments and we'll put them in an Honorable Mentions list.