With seven offices in four countries and 300+ employees, Firewood Marketing is ready to partner.

At heart, Firewood is a digital marketing agency. Most of our design projects end up on the web in one form or another. That’s why I spend most of my design time in Sketch, the vector design program. Generally speaking, Sketch is a more efficient program for digital mock-ups than traditional design tools like Adobe Photoshop and Illustrator. It utilizes easily editable and repeatable elements, which is helpful for responsive layouts and many other types of digital media.

Not all designers are familiar with Sketch, but if you’re familiar with Adobe Suite, it’s an easy program to pick up. And there are some simple hacks that make it way easier to use. That’s why I send all the new designers on my team a list of the Sketch plug-ins I use on the regular, with the hope of improving their efficiency and decreasing their frustration. Here’s what’s on my list:

Nudge, Push, Shove

Anima Toolkit

Select Similar Layers

Rename It

Sketch Measure

Content Generator

Symbol Organizer

These plug-ins and the five tips I’ll explain next will help you build compositions (aka comps) super fast.

Tip 1: Customize your menu

When I open up Sketch on a new computer, the very first thing I do is reset the hero toolbar. I want easy access to the Add Image and Symbols tools, so I separate them from the Insert button in the default toolbar. The main reason I want these added is that the default toolbar requires you to use a drop-down to access both of these tools—and there’s no hot key for these functions—so it’s a huge carpal-tunnel-inducing time suck. (BTW, you can customize hot keys to specific functions later, but there’s always that one thing that you constantly need access to in the toolbar.) Obviously, customizing the rest of your settings is up to you, based on how you’ll be using Sketch.

Tip 2: Push your pixels

Install Nudge, Push, Shove and reset SHIFT ↑ to be 8 pixels instead of 10. I like my new “shove” to be huge so I can really move things across a layout. With this plug-in, instead of having to count pixels, I can just move objects and know they’ll stay in pixel alignment.

Tip 3: Buttons in a snap

Install the Anima Toolkit. It’s part of a paid program that can export your Sketch file to HTML and CSS or let you do some light UX animating. But I mostly use it for buttons, so I can lock in padding on text boxes. There are plenty of tutorials on this and Sketch has a tool with a similar function—but, in my opinion, they make you work too hard for the same result. So yeah, download Anima Toolkit, make a button with your standard padding, then make it a symbol and never think about resizing it again.

Image Source: https://medium.com/sketch-app-sources/anima-toolkit-for-sketch-87aed3cc9fe0

Tip 4: Download the deliver-me-results plug-ins

Select Similar Layers

Select Similar Layers lets you dive back into that old file with the wrong brand color and wipe it out in a few clicks. As the name suggests, this is a plug-in version of Illustrator’s Select > Same tool that can select similar fill, stroke, etc., and it works just as awesomely in Sketch. Enough said.

Rename It

Rename It is another does-what-it-says-it-does plug-in. It’s great for when you have 20 alts and need to name them alphabetically, or for when you need to clean a file by renaming your unnamed groups into something identifiable. I use it to rename elements like artboards all the way down to individual vectors.

Sketch Measure

Sketch Measure helps you call out the measurements and specs in your file. It works by providing a pop-out toolbar that has buttons for measuring in-between spaces, widths, copy specs, and margins. The measuring Is done simply by selecting an object, and the colors of your text and callout boxes can be edited via the Styles palette within Sketch.

Content Generator

Content Generator—is there actually a reason I need this plug-in anymore? Not really. Sketch has its own lorem ipsum generator as well as image, name, and number randomizers, but how else am I going to make mock-ups with Hipster Ipsum? Also, this plug-in is one of the Sketch plug-in originals that never seems to break with each unrelenting update.

Image Source: https://github.com/utom/sketch-measure

Tip 5: Symbol prep (this is a long one!)

The Symbols Function is a thing of beauty in Sketch. It’s a huge reason why I love using Sketch and why it’s faster to comp in than Photoshop. But people often forget how powerful symbols really are, so they build not-so-great symbols without nesting anything awesome inside.

Image Source: https://medium.com/sketch-app-sources/icon-sets-with-color-override-in-sketch-f6c893278bd3

First off, the ability to nest colors is great for those brand colors that are always in your icons, and you can keep them in an original file or make a library for all your friends. But nested symbols are so much deeper than just color changes—most symbols I have contain symbols within them. It’s symbols all the way down, man!

Those inner symbols are usually single images, icons, or buttons. For example, if you’re building a UX mock-up that will show two different albums, but you want the option to have another screen that doesn’t repeat the same artwork, then you can include any number of album-artwork thumbnails that can be used later with your symbol once it’s placed in layout. I recommend making the more complex symbol first and then creating a symbol out of the elements that are likely to be replaced (like our album artwork). That way you’re able to place in new images, buttons, icons, and colors without diving into your Symbols page and disrupting your other mock-ups that use the same symbol. At this point, if you also like a beautiful Symbols page, you can run Symbol Organizer and get all your related symbols grouped together.

Image Source: https://sketch.fordesignrs.com/plugins/symbol-organiser

Now that you have nested symbols, you just need a file that wants real copy instead of the Hipster Ipsum you mocked in. If the copy doc and client feedback dictate that you need to replace some artwork for the music displayed in the app, resist the urge to break your symbol. Just click once into a symbol to make an override section appear in the right toolbar and —voila!—copy is flowed into a symbol without destroying all your hard work.

You can check out this tutorial to see a detailed override section.

It’s also worth noting that if your symbol has shared parts and you replace the symbol with something like a button, it will copy over all of your overrides that are easily translatable.

And that’s it. You’ll be speeding through your designs in Sketch in no time.

If you know of any other plug-ins that are super helpful time-savers, leave them in the comment section below. Until then, design (and Sketch) your heart out.