23 top Sketch plugins

13. Sketch Dockpreview

Preview your work on the OS X Dock

Preview your work on the OS X Dock

This is a great utility if you are working on a Mac app icon – a simple Shift+Cmd+D will preview your current artboard on the OS X Dock, replacing the Sketch gem. Useless if you are working on a web page or an app, invaluable if you are working on icons.

14. Swatches

Type in the HEX values of the colours you want to use and this plugin will generate a palette of swatches

Type in the HEX values of the colours you want to use and this plugin will generate a palette of swatches

Swatches is a plugin that will generate a palette of colour swatches for you. That's it, and that's the beauty of it. Run the plugin from the plugins menu bar, and type in the HEX values of the colours you want to use. The plugin will automatically create a grid with the colour itself, a label, HEX and RGB values.

15. Color Contrast Analyser for Sketch

Find out if your colour combinations meet MCAG guidelines with this plugin

Find out if your colour combinations meet MCAG guidelines with this plugin

Florian Schulz created this nifty utility that will calculate the colour contrast of two layers, and evaluate this against the Web Content Accessibility Guidelines (WCAG). It's indispensable if you value accessibility, legibility and all-round good design.

16. Sketch Dynamic Button

This was the first plugin we saw, and it made us realise the potential of them. Sketch Dynamic Button allows you to create buttons with a fixed padding, no matter how long the text is – just like you would with CSS.

Here's how it works. You create a text block and press Cmd+J. The plugin then creates a group with your text block, a shape for the structure or background of your button, and renames the text block to '0:0:0:0'. These values are the padding values for your button, exactly like CSS's syntax.

So you can rename this layer to something like '10:20:10:20' and your button will have 10px padding on the top and bottom, and 20px left and right. If you change the text of the text block, all you need to do is hit the keyboard command again, and it will automatically update the shape surrounding it.

17. SketchSquares

Give your designs a real-world look by replacing layers with Instagram photos

Recently, one of Instagram's designers shared a simple tool that enabled users to automatically generate a random Instagram photo in Photoshop. It didn't take long for Aby Nimbalkar to port that same tool to Sketch.

Similarly to the Content Generator plugin, with SketchSquares you start by creating a layer that you want to replace with a photo, and run the plugin. You can select from a variety of options, such as the source (your own feed or the 'Popular' page, for example), the preferred size, and even if you want to replace the shape with the new bitmap photo or use the photo to fill the shape. This final option is especially handy when dealing with round shapes, for example.

18. Generate Android Assets

If we're completely honest, we never really understood all of the different resolutions and pixel densities of Android. Gladly we never really had to, and it's probably this plugin's fault.

Design once, activate the plugin, choose which pixel density you've used (usually MDPI) and this plugin will automatically export your work in MDPI, HDPI, xHDPI, xxHDPI and xxxHDPI. Designers rejoice!

19. Sketch to App Store

This superhero plugin creates and exports all the screenshots you need for the App Store

This superhero plugin creates and exports all the screenshots you need for the App Store

This plugin got a lot of exposure when it came out, mostly because it's so brilliant. If you design or develop for iOS, you probably are familiar with the pain of creating a range of screenshots for the App Store, especially now there are two new iPhone screen sizes.

What this plugin does is take your screenshot, create a simple but completely customisable template with an iPhone and text on top, and export 45 screenshot images: a set of images with the iPhone and text, and a set with just the screenshot (and an extra Android one), all in JPG format and ready to upload to iTunes Connect. Just read that last sentence again – I know!

20. Sketch Notebook Plugin

Include comments for your client in a tasteful sidebar

Include comments for your client in a tasteful sidebar

When it comes to presenting your designs to a client or co-worker, sometimes it's nice to explain the thinking behind it. This plugin will add a tasteful sidebar to the right of your document. You just have to select an element of the project, hit Ctrl+Alt+Cmd+9 and type your comment. The plugin will add the appropriate number and respective comment in the sidebar.

21. Sketch Measure

Add overlays with useful information to your designs

Add overlays with useful information to your designs

If you work alongside other people, especially developers, it's great if you can deliver your final mockups with some specs overlaid – things like the distance between elements, the dimensions of those icons, the HEX code of the colour you are using, or the font of a label, for example.

If this sounds familiar to you, Sketch Measure will make your life easier. With a couple of clicks of your mouse, you can automatically create overlays on your design that contain this kind of information – all in the most unobtrusive way possible, and easily hidden.

22. Divine Proportions

See examples of golden spirals or golden ratio grids to help guide your design

See examples of golden spirals or golden ratio grids to help guide your design

Designers love grids. They love logic behind emotion, and divine proportions are just that – divine. This plugin takes a shape and generates, for example, an overlaid golden spiral or golden ratio, or a grid based on the sections created by the golden spiral, or it divides it by the rule of thirds. You name it. It's a fundamental tool when it comes to layout work.

23. Send to Slack

(Image: © Send to slack)

If you use Slack as a communication tool on your team, you are probably tired of exporting assets and artboards from Sketch, finding the files, and sending them through Slack. If you work in a medium-to-large company as a designer, this should sound very familiar.

This great little utility allows you to share artboards to specific Slack groups, channels or users, directly through Sketch's menu bar. Select any number of artboards, go to Sketch > Plugins > Send to Slack and choose whether you want to share to a group or a channel – and you are done! A great time saver.

This is an edited and updated version of an article that originally appeared in issue 265 of net magazine.

Related articles: