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.
01. Magic Mirror
If you're trying to make impressive product mockups but have to keep jumping into Photoshop to deal with the tricky stuff, Magic Mirror's likely to be a life-saver for you. It's an image perspective transformation tool, enabling you to create perspective mockups and other distorted effects without ever leaving Sketch.
02. Export More
Previously two different plugins - Generate ICNS and Generate GIF - Nathan Rutzky's Export More brings them both together in a single package that addresses a couple of glaring holes in Sketches export options. With it you can export icon designs as Mac-compatible ICNS files, and create simple animations that you can export as GIFs, all without ever having to step out of your Sketch workflow.
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.
04. 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.
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.
08. 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.
10. 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.
11. 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.
Next: more Sketch plugins to make your life easier