Sketch is becoming more and more popular amongst designers and developers as their web and UI design tool of choice. What some may not know is that there is a diverse and powerful community of people working to extend the functionality and features of Sketch by building custom plugins. In this article, I will run down some of my favourites.
Design can be a peculiar combination of freeform exploration and carefully structured process, and Sketch Style Inventory helps you marry the two: it gives you an overview of all the styles you've used and then helps you merge the styles of similar layers into one, enabling you nail down a final style from all your various experiments.
02. Day Player
Adding placeholder images to a design is a necessary part of prototyping but finding the actual images can be a pain. So rather than waste any time on it, leave it all to Day Player; it allows you to add customised placeholder images to any Sketch document, from a number of different placeholder image services, so the biggest decision you'll have to make will be whether you want Bill Murrays, Nik Cages or kittens.
If you want to retrieve CSS styles from your Sketch designs then a plugin like Marketch is absolutely essential. It enables you to export your Sketch artboards as a zip file full of HTML documents that you can then extract in order to pull out plenty of sweet CSS, ready to go.
Keeping your design team in sync is made easier by this plugin that holds your text styles, layer styles and colour palette in a Google Sheet. When you run the plugin it looks into the spreadsheet and changes your Sketch styles and colours to what's stored in there. A great way to share your styles instantly.
05. Segmented circles
Here’s a quick way to make segmented circles for charts and diagrams. This plugin can produce various styles of circular diagram including a dashed and tickmark circles, and the thicknesses are controlled via a simple list of comma separated values.
06. Icon Fonts
Save yourself the trouble of copy-pasting icons from icon fonts into your designs - this plugin enables you to view and add icons from within Sketch. It also spares you the bother of hunting for the names of icons if someone else has added them to a design, as the names of added icons are brought with them.
If you sometimes long for the efficiency of CSS when using Sketch, this one’s for you. It enables you to lay things out quickly by attaching a stylesheet to your designs, and it even supports Sass and Less.
08. Find and replace
Text editors aren’t the only place you need find and replace - it’s useful in Sketch, too! This one has lots of advanced options, and it searches the selected layers and everything contained within.
09. Sketch Toolbox
Sketch plugins are scattered all around the web, mostly on GitHub, and it can be very hard to discover them. Thankfully, Shahruz Shaukat decided to create a great little Mac app that lets you search, install and update all your plugins.
It's called Sketch Toolbox and it's very simple to use – just search for a plugin and hit install. Done. If you want, you can also click on 'View on GitHub' to check out the release notes and specific instructions.
This is the plugin that made me realise the true potential of plugins. Built by Timur Carpeev, this tool lets you generate random content, whether that be people's names, addresses, profile pictures, background photos – you name it. The way it works is simple: create a shape (for images) or a text block, select it, go over to the plugins menu bar, run Content Generator, and choose from a variety of options for the kind of content you would like to see.
This is extremely useful for populating designs. For example, to quickly mock-up a friends list on an app, you could create a grid with circles and a label below, select them and, with this plugin, generate profile pictures and names in seconds.
11. Generate ICNS
Built by Nathan Rutzky, this plugin does one thing and one thing well. Sketch offers a pretty handsome number of export file formats – PNG, JPG, SVG and so on – but if you are designing icons you will probably have to create an ICNS file. This is basically a bundle of different sized images. There are some good apps that do this well, but with this plugin you won't have to leave Sketch.
You can either create a single 1024 x 1024 icon, and the plugin will scale it down automatically, or you can create an artboard for each size, in which case the plugin will simply bundle them together. I recommend starting your project using an iOS or Mac app icon template (these come built-in with Sketch). That way you already have the right sized artboards.
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.
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.
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.
This was the first plugin I saw, and it made me 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 it hit the keyboard command again, and it will automatically update the shape surrounding it.
16. Generate GIF
It doesn't matter how you pronounce it, GIFs have been a part of the web since the 90s, and despite the disbelief of a lot of tech-savvy people, it looks like they are here to stay.
But GIFs can be more than a silent, animated video of a funny cat; they can be used to quickly and effortlessly prototype an animation or transition. This plugin eliminates the need to jump into After Effects or some other powerful tool if you want to create a quick prototype of an animation.
Create the desired animation, frame by frame, with an artboard for each, naming them 'Frame 1' , 'Frame 2' and so on, and activate the plugin to create an animated GIF. You even have the option to set the time interval between frames or to loop the animation.
Recently there was an article entitled 'Design Tools at Instagram' written by one of the company's designers. In this, the designer 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 either 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.
If I have to be completely honest, I never really understood all of the different resolutions and pixel densities of Android. Gladly I 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!
Next page: 5 more top Sketch plugins...