Top 10 Free OS X Sketch Plugins for Designers

Design & Media

If you’re a web design developer and have owned a Mac or currently own a Mac then you’ll surely have heard of Sketch. Sketch is a very powerful Mac application that allows you to design websites to the best of your abilities incorporating your favourite plugins and more for ease of use and to enhance it’s original abilities. We’ve decided to compile a list of 10 best free Sketch Plugins for web designers to help you become more productive and creative than ever.

Sketch Toolbox

03-sketch-toolbox-plugins-managerLet’s begin this list by enabling you to manage all the plugins you’re going to be installing with the Sketch Toolbox. This simple plugin allows you to manage and see all your other Sketch plugins in one space making it easier to manage and edit your plugins.

Sketch States Switch

04-sketch-states-switch-plugin-compsIf you often find yourself wanting to create different states within you web design in Sketch then this is the perfect Sketch plugin for you as it allows you to save multiple states of your website. Examples of use of this would be saving a state of the site without a menu open, then another with the menu open, allowing you to not have to save different files just to see a minor visual change.

Sketch Notebook

06-notebook-notes-plugin-sketchIf you often find yourself needing to add notes into your web design on certain layers then Sketch Notebook is the perfect plugin for you. It allows you to select a certain layer and then in a menu that slides out, you can add notes so you can view your notes at the same time as viewing your work. It’s a great tool for those that look to write down ideas as they work.

Sketch Dynamic Button

09-dynamic-buttons-sketch-app-previewBoth mobile and web designers often find themselves needing buttons to represent links in their work. However, it os almost always next to impossible to be able to space these buttons correctly simply using the hand of eye. However, with this plugin, when you create a button, it will not only use a clever algorithm to work out the space between the two previous buttons but also change your box size to match the text inside the box.

Sketch Preview

16-skala-preview-sketch-plugin-demo

 

If you need to have a preview of your work as you go along, then this the perfect plugin for you. It allows you to see your work within a preview window as you go along which is perfect for those working on a mobile platform or those people that are looking to create a very specific website and need to make minor incremental adjustments regularly.

Dynamic Reposition

10-sketch-reposition-elements-plugin

If you’re someone that considers themselves a very precise designer when it comes to building the look of your website then look no further than the Dynamic Reposition plugin. Dynamic Reposition allows you to simply rescale the container and then go to Plugins > Dynamic Reposition(or use the keyboard shortcut CMD+P) and then all the elements will automatically reposition themselves based on their original sizes.

Sketch Measure

05-sketch-measurements-measure-plugin

When you’re working with fine digital design and many millions of pixels on a display, ensuring that everything is the right width, length and in the right place is crucial for making your website look as professional as possible!

Content Generator

12-persona-filler-content-faces

One of the most popular things to do when coming up with ideas and creating website designs is to fill text spaces with Lorem Ipsum which is the standard and well known text placement used to signify text in-place. However, with Content Generator, they go one step further and enables you to fill space with dummy text, details, names and faces as well pulled from different sites.

Material Design Color Palette

20-material-design-color-swatches-plugin-sketch

 

If you’re someone that is writing or design a website/app based around the Android or even Google eco-system then this plugin is perfect for you as it gives you the material design colour palette right in front of you, allowing you to select colors that are Android specific.

Add @3x

14-add-3x-retina-plugin-sketch

 

However, if you’re working with iOS then you’ll understand that there are now three different screen resolutions that you need to work with if you’re going to optimise your application for each different screen size. @3x is a plugin that automatically resizes your sketch into these required 3 resolutions saving you potentially a lot of time redrawing each one.