30 Oct 15 top Sketch Plugins
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, you will find 15 top sketch plugins,
- 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.
- Content Generator: 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.
- 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.
- Sketch Dock Preview: 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: 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.
- Color Contrast Analyser: 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.
- Sketch Dynamic Button: 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.
- 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.
- SketchSquares: 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.
- Generate Android Assests: 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!
- Sketch to 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.
- Sketch Notebook: 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+9and type your comment. The plugin will add the appropriate number and respective comment in the sidebar.
- Sketch Measure: 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.
- Divine Proportions: 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 overlaidgolden spiral, or a grid based on the sections created by the golden spiral, or it divides it by the rule of thirds. You name it. For me, it’s a fundamental tool when it comes to layout work.
- 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.