Top 25 OS X Sketch Plugins for Designers

Bohemian Coding is a software company most notably recognized for creating the OS X application Sketch. It allows designers to work with both vector and raster images in the same document. As you might imagine, this program has caught widespread attention from web & graphic designers all over the world. And if you design on a Mac then it’s worth testing out Sketch just to see what all the fuss is about.

For this post, I’ve collected 25 free & useful Sketch plugins meant for all types of design. Whether you create icons, interfaces, or anything else, these plugins will surely improve your workflow.

Mastering Sketch takes time and lots of practice. Since the program is still new there isn’t as much information online compared to other programs like Photoshop. But sticking with a routine of continual practice will yield amazing results – and these plugins can prove to be quite beneficial along the way.

1. Sort Layers

sketch sort plugin layers

All modern design programs rely on layers. These layers can hold multiple elements including text, graphics, or vector/bitmap artwork. Sort Layers is a Sketch plugin which can sort layer elements based on text, layer name, or even the position of layers(how they’re stacked).

Admittedly the interface does take a little time to get adjusted when you’re not used to dynamic layer organization. But it’s all very straightforward and Sort Layers is a wonderful plugin for those complex design mockups.

Homepage  Download

2. RenameIt

renameit plugin sketch layers

Layers are organized in a manner where you can give them names and drag/drop accordingly. RenameIt allows Sketch users to dynamically rename layers based on content or specific details.

The plugin runs using key commands while entering a name. For example %N will append numbers into selected layers. These digits will follow an order which can be lengthened by using more characters(ex: %NNN). It’s a great plugin for designers who want to save time batch-renaming multiple layers.

Homepage  Download

3. Sketch Toolbox

sketch toolbox plugins manager

Managing a whole bunch of plugins can be somewhat of a hassle. Over time you might even forget which plugins you’ve installed! That’s why Sketch Toolbox is a must-have for any Sketch users who are big on plugins.

This free toolbox creates a single menu where you can find all the currently-installed plugins. You have quick access to uninstall any number of plugins or access each plugin’s Github page. Sketch Toolbox also has the ability to update plugins with a single click.

It’s still in active development on Github with plans for new features coming soon. One pending idea is the ability to define custom keyboard shortcuts for different plugin menus. This toolbox offers the greatest time-saving solution for managing an assortment of Sketch plugins.

Homepage  Download

4. Sketch States Switch

sketch states plugins switcher

Photoshop has a well-known feature named layer comps found in the layers palette. This allows designers to create different “save states” for a document which can display elements in different locations. For example, a web designer might create a comp of a regular website layout and another comp of that same layout with the dropdown menu open.

Sketch has a very similar plugin named States Switch. It allows you to save different states of your sketch file with different layers(or layer groups) being visible or invisible. Then you can easily switch between these states without having to manually hide & show different layers.

This is most beneficial to UI designers who often have to design with interactivity in mind. This way you can demonstrate various design features in a mockup using different layer groups for elements like active buttons and link hovers.

Homepage  Download

5. Sketch Measure

sketch measurements plugin free

When crafting digital pixels it’s important to pay attention to the fine details. Margins, padding, and element sizes are crucial to ensure that a mockup can be replicated using code. Sketch Measure is a great plugin for determining the exact pixel boundaries of any element.

Once the plugin is installed you can access the menu from Plugins > Measure. The features include finding direct coordinates, dimensions, or even distances between elements. This info is displayed in little tags on the page which are only visible while editing files in Sketch. Measure can be a little tricky to learn at first, but with practice and memorization of keyboard shortcuts it’ll become like second nature.

Homepage  Download

6. Sketch Notebook

notebook notes comments sketch plugin

Adobe Photoshop has a built-in Notes tool where users can add little notes onto layers or elements. Sketch Notebook offers a very similar functionality. You just select a layer and create a new comment which is saved into the document.

This is an excellent way to manage resources, links, or to-dos without creating a separate file. Comments are tied to little numbered dots on the page so you know exactly which element is referenced in each comment. Without a doubt Notebook is the best plugin to handle comments and quick notes while working in Sketch.

Homepage  Download

7. Sketch Commands

sketch commands plugin

Meant primarily for advanced users, Sketch Commands is a bouquet of various scripts and features built for Sketch.app. The collection focuses on many small commands like alignment, alpha control, layer effects, and page guides.

These commands should be accessed from the Sketch plugins folder where you’ll find all sorts of different directories. The options range from duplicating documents to exporting/slicing PNGs from artboards. These are somewhat detailed features which are mostly geared towards advanced users. But, if you know how to apply them properly these commands are fantastic and powerful.

Homepage  Download

8. Sketch Distributor

sketch distributor plugin

Page elements often need to be organized in a clean-cut manner. Distribution is one feature released with Sketch, but is improved by using SketchDistributor. This plugin allows you to automatically distribute selected elements vertically or horizontally with even spacing between each element.

The spacing value can be adjusted repeatedly as long as the elements are still selected. This is a rather simple plugin but it provides an elegant feature that does come in handy more often than you might assume.

Homepage  Download

9. Sketch Dynamic Button

dynamic buttons sketch app plugin

Website and mobile app designers will always need to create buttons. These are the cornerstone of many layouts and often require different effects, sizes, and padding.

The Sketch Dynamic Button plugin was created for UI designers who need evenly spaced buttons on-the-fly. You simply add button text and the plugin will generate even padding and resize the length of the button to match. You can do this with buttons of any color or texture and it’s great for web designers.

Homepage  Download

10. Dynamic Reposition

sketch dynamic reposition plugin

Perhaps one of the most useful plugins for graphic designers would be Dynamic Reposition. When scaling a container element smaller or larger it can be troublesome trying to keep internal elements at the same positions.

With Dynamic Reposition you simply rescale the container and then go to plugins > Dynamic Reposition(keyboard shortcut CMD+P). All internal elements will automatically reposition themselves based on their original proportions. Talk about saving time!

Homepage  Download

11. Divine Proportions

golden ratio divine proportions plugin sketch

The Golden Ratio is a common term used among both print and digital designers. This is also known as the Fibonacci sequence or “divine proportion” which is a natural proportion found all throughout nature.

Designers like using this divine proportion because it feels natural to most people. By using the Divine Proportions plugin you can dynamically build a path which is shaped in the typical spiral/box pattern. This ratio is commonly seen as 1:1.168 and can be used all throughout many forms of design like website layouts, icons, and photo compositing.

The Divine Proportions plugin is a clone of a Photoshop plugin which offers similar functionality. If you’ve never designed with the golden ratio before then this plugin can help you get started.

Homepage  Download

12. Content Generator

content generator sketch plugin

Web designers are all too familiar with the pain of filler content. Lorem Ipsum is the most common resource used to fill in headers & paragraph text on a sample website mockup.

The Content Generator plugin allows Sketch users to create not just dummy text, but also dummy photos and usernames. Content is pulled from 3rd party websites like Unsplash for photos and UI faces for avatars. Anyone who creates interface mockups will save loads of time by relying on this plugin to fill in the extra details.

Homepage  Download

13. Clear Styles

clear styles plugin sketch

Sketch layer styles are created in a very similar manner to Photoshop. Each layer can have a handful of styles which affect the background, tone, color, and texture. But sometimes you’ll duplicate a layer and wish to clear all of these styles quickly.

It’s possible to do this manually, or you can use the Clear Styles plugin. With one click all styles will be cleared from any elements or text on the layer. It’s a somewhat lesser-used feature but can be relevant to Sketch users of every discipline.

Homepage  Download

14. Add @3x

3x ios retina sketch plugin

Newer iPhone 6 designs have large retina screens which require @3x resources. This can become even more difficult work for app designers who already need to create @1x and @2x resources for retina screens.

Thankfully the good fellows at @bomberstudios created a solution. The Add @3x plugin was created solely for Sketch users who also need to export @3x resources. The only current download is found on CloudApp with a small Gist page of raw code. It’s a tricky plugin to find but iOS app designers will seriously appreciate the convenience.

Homepage  Download

15. Generate Android Assets

generate android assets xxhdpi

Android mobile apps follow a similar retina screen pattern found on iOS devices. Android app designers need to create a series of scaled graphics from MDPI(medium) all the way up to XXXHDPI. While iOS only requires 3 sets of assets, Android has the potential for 5 different screen resolutions across various devices.

This is where Generate Android Assets comes in handy. The plugin will automatically generate all of these asset sizes for Android devices from any Sketch document. It is preferred that Android designers use the Sketch Android kit built for XXHDPI screens. From there it’s a lot easier to get high-quality exported resources at all sizes.

Homepage  Download

16. Sketch Preview

sketch preview plugin skala

Photoshop users have many options for testing their designs on devices using Skala Preview. This is an app for OS X which can connect into iOS or Android devices. Mockups can be sent directly to a device for testing an app UI at the exact pixel-perfect resolution.

Thankfully a great developer named Marc Schwieterman created Sketch Preview built for Skala. Once installed a new “Preview…” link appears under the Plugins menu. It’s easy to customize and format the design so that it’ll fit perfectly onto any device, then you can test exactly how it would look on anything from a smartphone to a tablet.

Homepage  Download

17. Style Inventory

style inventory sketch plugin

Organization is crucial to a successful design regimen. Style Inventory may be perhaps one of the most useful plugins for every Sketch designer. It allows you to access a full collection of all styles used in a document.

This makes it easy to update styles across pages or even copy styles onto new layers. Plus you can export full style inventories to import them into other documents without recreating the styles from scratch. Style Inventory has been marked as “experimental” but from my tests I never bumped into any trouble using the plugin.

Homepage  Download

18. Icon Symbols

icon symbol font creation sketch plugin

Designers love to use icon fonts because they’re mostly free and render perfectly in all modern browsers. New designers have taken to creating their own free icon fonts like Captain Icon. These are perfect for freelance projects and for building recognition of your name as a designer.

Enter the fabulous Icon Symbols plugin for Sketch users. After creating a series of icons you can export the set as an icon font collection. This plugin will generate all the CSS along with the important webfont filetypes(TTF, OTF, SVG, EOT, WOFF). All you have to do is install Gulp.js as an automation tool and the plugin handles everything else.

Homepage  Download

19. Icon Stamper

ios icon stamper generate sketch plugin

Mobile apps require many different icon sizes for uses all throughout the OS. Icon Stamper is a Sketch plugin for automating the icon resize functionality. Just create your icon at the largest size, ideally using the pre-built Sketch “iOS App Icon” template.

Then you simply run Icon Stamper from the plugins menu and the icon will be duplicated across each artboard. Check out the Github page for a step-by-step guide.

Homepage  Download

20. Material Design Color Palette

google material design color palette sketch plugin

Google’s material design has become a staple among Android app designers. But the material design trend has also spread onto the web as UI designers are following many of the same rules.

By using the Material Design Color Palette plugin you can build a dynamic color palette following Google’s material design guidelines. You simply choose a hue and updated related colors. Swatches will be created where you can select from traditional color matches for a new material design app or website layout.

Homepage  Download

21. Subtle Patterns

sketch plugin subtle patterns

Subtle Patterns is a free online catalog of tileable background patterns created by professional designers. The Subtle Patterns team has released a Photoshop plugin which offers direct access to this library.

Thankfully another developer Duncan Beaton has released Subtle Patterns for Sketch. This is a plugin which offers direct access to the library of pattern textures from within Sketch. All features are located in the plugins menu under “sketch-subtlepatterns”. If you find yourself frequently relying on this pattern library then this plugin will most definitely prove useful.

Homepage  Download

22. Sketch Page Switch

sketch page switch plugin

Keyboard shortcuts are the best way to improve your natural design workflow. Adobe Photoshop offers custom shortcuts by default, although sometimes a great plugin can enhance shortcuts dramatically.

Sketch Page Switch is a simple plugin which creates keyboard shortcuts for quickly switching between pages in a document. CMD+L and CMD+K alternate between next/prev pages. CMD+’ will open a dialogue to select a page while CMD+P will create a brand new page. The plugin is easy to install, easy to learn, and behaves exactly as you would expect.

Homepage  Download

23. AEFlowchart

aeflowchart flow chart sketch plugin

Flowcharts may not be a common problem for UI designers but they are part of many graphic design projects. Even some websites use flowcharts to create in-page sitemaps and infographics.

AEFlowchart is a Sketch plugin dedicated to creating brilliant vector-based flowcharts. You can easily customize flowchart node shapes and styles like background gradients. Simple text labels are converted into shapes and then connected into a dynamic and reusable flowchart.

Homepage  Download

24. Efficiency

efficiency plugins collection sketch

Efficiency is a large suite of plugins built for Sketch. It contains an assortment of various features like dynamic text leading & line spacing, symbol spacing, and randomization features.

There’s a lot to explore if you have the time, but some designers may not find a whole lot of use in this package. Efficiency was designed to make complex tasks a little simpler. But if you don’t find any of the tasks relatable to your workflow then it’s probably not worth installing.

Homepage  Download

25. Color Contrast Analyser

color contrast analyser sketch plugin

Contrast is one of the most important features when designing a user interface. No matter if you’re creating a website or mobile app, text needs to be readable. This means high contrast is vital between text & background colors.

The Color Contrast Analyser is a neat little contrast checker plugin for Sketch. You select an element with some text and run the analyser from the plugins menu. Contrast is measured in ratios with three different grades. AAA is best, AA is okay, and below that is failure.

All content is tested against the Web Content Accessibility Guidelines which are created by the W3C. If you build any text-based interfaces then this plugin is a must-have for checking your color choices.

Homepage  Download

Closing

Almost every designer who has moved from Photoshop to Sketch gives nothing but raving reviews. It seems the creators of Sketch really knew how to make a product that would solve troubling issues found in the Adobe Creative Suite.

Although Sketch is still young it has matured quickly in just a couple of years. The wide variety of 3rd party plugins should be a testament to the passion and dedication of Sketch users. If you’re already a user then you should find a couple of these plugins very helpful. And if you’re brand new to Sketch try playing with the free demo – it might convert you into another fan of Bohemian Coding’s world-renowned design application.

For More Helpful Plugins, Check out:

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

Comments are now closed on this post.