Sketch Plugins: 14 Useful Tools to Level Up Your Design Game
If you read my last post about Sketch, then you know that it’s an incredibly capable tool by itself. With its built-in plugin architecture, you can level it up with even more nifty tricks. Whether you want to generate placeholder content, improve how you work with others, or simply design more efficiently, there’s probably a plugin to help!
Just the essentials
These plugins are universally handy. If you don’t need them now, there’s a good chance you will soon.
Sketch Toolbox
First of all, start with Sketch Toolbox. What is it? It’s an app that lets you browse, install, and manage your Sketch plugins. It’s not without its flaws: the site claims it’ll look much nicer soon, but it hasn’t been updated on GitHub in 7 months. For now, though, it’s the tool of choice for discovering, installing, and managing Sketch plugins.
Sketch Runner
If you love keyboard shortcuts and tools like Spotlight, Launchbar, or Alfred, you’ll love Sketch Runner. With a simple keyboard shortcut (⌘'), Sketch Runner unlocks the ability to quickly use your keyboard to:
- run any menu action or plugin;
- go to any page, artboard, group, or layer;
- insert a symbol by name;
- create (and name) a symbol from selected layers; or
- apply a shared style to selected layers
All without using the mouse. This plugin combined with a familiarity with the Sketch keyboard shortcuts can help improve your flow tremendously.
Craft from Invision
If individual plugins are like individual superheroes with specific powers, then Craft (from Invision) is a superhero team like the Avengers. It packs a whole raft of helpful tools:
- Library: lets you share design assets (styles, elements, and more) in a reusable pattern library across your team. When someone makes changes to an individual element, they can sync them back to the rest of the team automatically.
- Photos: allows you to quickly import and place random photos from specific folders, Dropbox, Unsplash, or elsewhere on the web.
- Type: gives you more relevant placeholder copy based on the type of data you want to mock up. Instead of greek text, why not fill in real articles, names, addresses, and more? You can even create custom data sets to pull random text from or pull from specific content on the web.
- Duplicate: supercharges your copy/paste, letting you copy one element (or group) and duplicate it with fine-grained results like grids, spacing, and more. You can play around with how lots of similar data looks without the hassle of worrying about pixel perfection between individual sets.
- Prototype: Labelled as coming soon, this plugin promises to let you create interactive prototypes directly within your Sketch files, presumably from Invision’s purchase of Silver Flows.
Not only does it have all these great plugins, but it comes packaged as an app that installs them for Sketch or Photoshop (for a subset of the plugins), automatically keeps them up to date, and selectively turns them on and off.
AEFlowchart
Sometimes making a flowchart is the easiest way to understand a process or interaction. AEFlowchart will let you quickly convert simple text layers into a flowchart with different styles and connections. It’s a bit simplistic compared to the more complex tools available so don’t expect this to replace Omnigraffle or Visio, but for getting a quick flow out of your head and somewhat presentable, this can be a handy tool in your belt.
Find & Replace
Design often involves working with lots of text. Sometimes, you may need to change the same text in more than one place (like, for instance, in navigation elements, buttons, etc.). Find & Replace lets you do just that, with options for handling case sensitivity and searching across your entire file or just within a single page.
For interface designers
While these tools can be helpful for nearly anyone, UI designers may find them particularly essential.
Sketch Constraints
Whether you’re designing layouts for apps or websites, you will often have to take into account multiple screen sizes. Sketch Constraints helps you do that by constraining elements and resizing them based on their parent. This lets you duplicate an artboard, resize it, and have your elements reposition and resize according to their relationship to that artboard (or their respective parents).
Relabel Button
The basic Symbol behavior that allows you to override the text inside a symbol is pretty nifty, but also pretty basic. What if you have a button and want to assign longer text than would normally fit inside it? What if your button has extra elements like icons or dropdown elements? In that case you’d have to adjust each of those manually. With Relabel Button, you can change button text and it will handle all of those extra details for you, from resizing the button to repositioning other elements that are part of it.
Color Contrast Analyzer
There are few things more frustrating to users than difficult to read text. You already know you should choose colors with good contrast, but the Color Contrast Analyzer plugin for Sketch will quickly compare two colors and let you know if they provide enough contrast according to the WCAG guidelines.
Making it more iconic
Like any other good vector software, Sketch works beautifully for both producing icons or reusing them.
AEIconizer
An icon isn’t just one size. For iOS alone, you’ll need at least 14 different sizes to account for how it appears on the home screen of different devices, settings screens, multi-tasking screens, the App Store, and more. Creating all of those individually can be quite a nuisance! AEIconizer lets you select a single icon and generate properly sized artboards iOS and watchOS icons.
Sketch Icon Font
Does your team use icon fonts? Sketch Icon Font is a handy tool to help you find and insert icons directly from any icon font. It also names the icon layers smartly so that developers who look at your Sketch file will easily know the name of the icon you used. If you decide to switch from icon fonts to SVG, it even provides a tool to convert your icon font to shapes. The new layers are named with the font name AND the icon name to help you find the right icon again later.
ICNS
I have a confession. This next tool isn’t a Sketch plugin. It’s a really handy little iOS app instead. Sometimes you want to preview your app icon directly on the device. Normally you’d have to create a stub app with the icon and publish it. Or jump through hoops to display it like a fake screen. With ICNS you can preview your app icon on the device next to other popular icons and with a variety of backgrounds (from light to dark, complex to simple). This will help you see how it fits in the overall environment and how well it will work no matter what background your users choose.
Share your work
No designer is an island. Eventually you’ll want to share your work for get feedback or hand your designs off to the development team. These tools will help along the way.
Sketch Measure
Sketch Measure is a handy way to capture and export the dimensions and styles of your design for others. Quick keyboard shortcuts let you measure and display the size of an element, the spacing between elements, and other layer properties like font, size, color, and shadow styles.
Sketch Notebook
If Sketch Measure is useful for annotating exact details of your design, Sketch Notebook is equally helpful for documenting less concrete details about your design, like the intent behind certain elements. You can select elements and add a note to give others more detail about it.
Zeplin
https://www.youtube.com/watch?v=tbKZAGthUgQ
Need something a little more powerful for quickly sharing your design documents and style guides across your team? Zeplin may be right up your alley. Zeplin takes your Sketch file and automatically generates assets, creates interactive design specs with style guides and more. Designers and developers can comment on specific elements to get more detail, and you can share when the design is updated automatically on Slack.
Share your favorites
These are just a few of the nifty plugins available for Sketch. Do you have others you rely on regularly? Get in touch and let me know! Better yet, tell other people about them!
Where to find more:
There are quite a few places to look for more Sketch plugins, including these gems:
Originally published at uxcellence.com on May 27, 2016.
