24 top Sketch plugins

Rss Bot · March 12, 2018

Sketch is the go-to UI tool of choice for many people working in the design industry. What you might not know is that there's a diverse and powerful community of people working to extend Sketch's functionality and features by building custom plugins. In this article, we'll share some of the best Sketch plugins around.

The good news is that the management of your Sketch Plugins is even easier now. Plugins update automatically and outdated ones are disabled, plus a string of other small but highly intuitive improvements have been made.

Making the plugin ecosystem even more useful is Sketch Cloud, a file-sharing service that anyone can sign up for, where you can view, download and comment on Sketch documents that have been shared publicly, or privately straight from Sketch.

So let’s take a look the best Sketch Plugins around – the ones that could drastically change the way we design user interfaces. Once you've spotted one you'd like, read up on how to install Sketch plugins.

01. React Sketch.app

This Sketch plugin helps you manage design systems

Price: Free
Summary: Render React components to Sketch

Managing design assets can in Sketch can be difficult. This handy Sketch plugin provides an easier, more reliable way to manage your assets. Implement your designs in code as React components, then use this plugin to render them into sketch. It also makes it easier to fetch and implement real data into your Sketch files.

React Sketch.app was developed by Airbnb for use with its design system, with the aim of helping bridge the gap between designers and developers.

02. Git Sketch Plugin

Price: Free
Summary: A Git client built into Sketch

This plugin aims to bring version control into Sketch. It works by exporting an image for every part of the design, then generating pretty diffs so it's clear what changes have been made. By documenting each step of the design process, everyone on the team can see the how the design has progressed.

Git Sketch Plugin was created by Mathieu Dutour, who has since moved on to creating a more comprehensive, paid version control system called Kactus.

03. Auto Layout

Price: Free
Summary: Responsive design for Sketch

Group Resizing is a native Sketch feature that enables you to change the way objects react when your artboards or parent groups are resized. Auto Layout, built by AnimaApp, takes this functionality a little further.

Where Group Resizing lets you create fluid elements and pin objects to a corner (think: :fixed positioning in CSS), Auto Layout also lets you offset elements by a certain number of pixels, define minimum and maximum dimensions for elements (think: min-: and max-: in CSS) and do everything that Group Resizing allows you to do but with a much less confusing UI.

04. Launchpad

Launchpad is an efficient way of converting .sketch designs into static HTML websites

Price: Free
Summary: Convert designs to static HTML webpages

LaunchPad offers an ultra-simple way to convert .sketch designs to static HTML webpages. It's from the same people who created Auto Layout, and in fact you can combine these two Sketch plugins to export responsive .sketch designs as HTML.

LaunchPad doesn’t export a ‘finished’ design – you’re still expected to fine-tune loading times, tweak the code to ensure your design responds properly to different screen sizes, and optimise the code output to ensure the site loads quickly and runs smoothly.

However, it does give you some pretty solid foundations to work with. After trying Launchpad out with a couple of low-fidelity mockups, I can see that the output is relatively simple, so there's no need to worry about bloated code.

05. ImageOptim

ImageOptim brings a sophisticated image optimisation workflow

Price: Free
Summary: Image optimisation in Sketch

While Sketch offers its own solution for optimising SVG files, there is no range of options for compressing JPG and PNG images. Since ImageOptim has been offering a solid service for a number of years, it makes sense that it would bring this functionality to Sketch.

Any designer who cares about loading times and image optimisation (which should be all designers) should add ImageOptim to their toolbox. Note that as well as the plugin, you'll need the core ImageOptim app (free) installed on your macOS system, and you still need to mark layers as exportable in Sketch (navigate to ‘Export and Optimise All Assets’ to begin).

06. Magic Mirror

Price: From $4/mo
Summary: Image perspective transformation tool

If you're trying to make impressive product mockups but have to keep jumping into Photoshop to deal with the tricky stuff, Magic Mirror could 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.

07. Export More

Make Mac-ready icons and animated GIFs with Export More

Price: Free
Summary: Export Mac-compatible icons and GIFs

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 Sketch's 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.

This Sketch plugin is ideal for embracing the renewed enthusiasm for GIFs – while you could use Photoshop for or After Effects for your GIF design, you don't necessarily need a full-featured Adobe app, especially when creating relatively simple animations.

Export More treats each artboard as an individual frame and combines them together. You can then choose whether to have the GIF play once or on a continuous loop. Navigate to ‘Plugins > Export More > Artboards to GIF’, choose the desired playback method (default or loop), then select the desired frame rate.

08. Sketch Style Inventory

Pull all your designs into a single style to rule them all

Price: Free
Summary: Manage your styles easily

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 to nail down a final style from all of your various experiments.

09. Day Player

Price: Free
Summary: Automatically generates placeholder images

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. This 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 to use Bill Murray, Nicolas Cage or kittens.

10. Marketch

Turn your designs into lovely CSS with Marketch

Price: Free
Summary: Turn Sketch artboards into HTML and CSS

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.

11. Sync Sketch Plugin

Convenient syncing for your design team

Price: Free
Summary: Share styles via Google Sheets

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.

12. Segmented circles

Segmented circle diagrams

Price: Free
Summary: Create precise circular graphics

Here’s a quick way to make segmented circles for charts and diagrams. This plugin can produce various styles of circular diagram including dashed and tickmark circles, and the thicknesses are controlled via a simple list of comma-separated values.

13. Sketch Runner

Sketch Runner is macOS’s Spotlight equivalent for Sketch

Price: Free
Summary: Spotlight for search

Sketch is well-loved for its minimalist keyboard workflow. That being said, there’s always two or three keyboard shortcuts that you always seem to forget or confuse with another design app like Photoshop – and let’s not forget those less common tools and features that don’t have a keyboard shortcut and are hidden deep in the Sketch menu.

Sketch Runner solves these issues and does so in a way that macOS users are familiar with – Sketch Runner is the macOS Spotlight, but for Sketch.

14. Icon Font

Icon fonts in Sketch

Price: Free
Summary: Manage icon fonts

Icon fonts are a highly efficient way of using icons in your web designs without having to export and optimise a ton of image assets. Typically we reference icon fonts in the <head> section of HTML webpages, as we do with CSS and JavaScript. However, using them in Sketch is a little more complicated. Thankfully, Icon Font makes it easy.

After downloading and installing Sketch IconFont, download SVG font files or download this font bundle, which includes the font files for FontAwesome, Material Design Icons, Ion Icons and Simple Line Icons. When you’re done, navigate to ‘Plugins > Icon Font > Install a Font-Bundle’ , select the downloaded fonts from the Open File dialog, then navigate to ‘Plugins > Icon Font > Grid Insert > [your desired icon font]’ in order to insert an icon.

Even if you’re intending to design a custom icon set for your design, having ready-made icons at your disposal can help you with rapid prototyping in the early stages of design, adding a little more clarity/fidelity to your low-fidelity mockups.

15. Find and Replace

Price: Free
Summary: Find and replace text in selected layers

Text editors aren’t the only place you need find and replace – it’s useful in Sketch, too. This plugin has lots of advanced options, and it enables you to search for instances of particular words or phrases in the text in selected layers (and everything contained within), then replace it easily.

Next page: More time-saving Sketch plugins

16. Content Generator

Generate random placeholder content to populate your designs

Price: Free
Summary: Generate dummy data

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.

17. Sketch Dockpreview

Preview your work on the OS X Dock

Price: Free
Summary: Preview your icon design in the Dock

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.

18. Swap Styles

Swap Styles uses a handy keyboard shortcut to swap styles with another later

Price: Free
Summary: Swap styles between two layers

With the help of a handy keyboard shortcut, Swap Styles quite literally swaps styles with another layer. It's is a huge time saver when designing hover states.

Let’s take a menu navigation, for example. A menu navigation would appear on every screen, although the active state would differ from screen to screen. On the settings screen the ‘Settings’ menu item might be underlined, and on the newsfeed screen the ‘Newsfeed’ menu item might be underlined. You usually have two options: either awkwardly move things around for every artboard, or create an insane amount of shared styles and/or symbols.

In this example, Swap Styles lets you move the active state style to another menu item simply using the keyboard shortcut: cmd+ctrl+S.

19. Color Contrast Analyser

Find out if your colour combinations meet MCAG guidelines with this plugin

Price: Free
Summary: Check your colour contrast meets accessibility guidelines

To ensure your website is accessible to most users, there needs to be a certain amount of contrast between different design elements (for example, the background and body text). This contrast is measured using a formula defined by the WCAG (Web Content Accessibility Guidelines).

Color Contrast Analyser is a handy Sketch plugin that compares two colours and defines the contrast ratio between them. Contrast ratios are split into three levels (A, AA and AAA) – AA is the minimum specified by the WCAG. If only one layer is selected, the colour will automatically be compared against the background colour of the artboard.

This plugin helps you make solid design decisions using internationally recognised design standards, and is a must-have for designers trying to improve both the readability and accessibility of their work.

20. Craft

Craft is a super useful toolbox that supercharges your design and prototyping workflow

Price: Free
Summary: Suite of design and prototyping tools

Craft does a lot more than sync your .sketch designs with the InVision web app. In fact, most of Craft’s features can be used without having an InVision subscription at all. Craft supercharges your design workflow by letting you build your design with realistic data and images, rapidly tile objects horizontally and vertically, and create libraries of styles and assets that can be stored in the cloud, shared between your team and accessed at any time.

There's also Craft Prototype, which not only lets you demonstrate user flows, transitions and dynamic components such as fixed headers/footers, but also sync those demonstrations into the core InVision app with Craft Sync, bringing your entire team into the loop with an abundance of top-class communication, collaboration and design handoff tools.

InVision app subscriptions start at $15 a month, which is suitable for small teams. However, Craft itself can be used for free.

21. Sketch to App Store

This superhero plugin creates and exports all the screenshots you need for the App Store

This plugin creates and exports all the screenshots you need for the App Store

Price: Free
Summary: Generate App Store images easily

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.

22. Sketch Notebook Plugin

Price: From €4.99
Summary: Manage functional documentation and notes

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+9 and type your comment. The plugin will add the appropriate number and respective comment in the sidebar.

23. Sketch Measure

Add overlays with useful information to your designs

Price: Free
Summary: Overlays your design with specs

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.

24. Divine Proportions

See examples of golden spirals or golden ratio grids to help guide your design

Price: Free
Summary: Check your design against classical ratios

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 overlaid golden spiral or golden ratio, or a grid based on the sections created by the golden spiral, or it divides it by the rule of thirds. You name it. It's a fundamental tool when it comes to layout work.

How to Install Sketch Plugins

Sketch Plugins can be installed in a variety of ways. Most developers simply upload their extensions to GitHub in the form of a .sketchplugin file. This is easy enough, but you’d have to check back regularly for updates as extensions are known to break when newer versions of Sketch are released.

We can also use Sketch Toolbox to search for, install and manage Sketch Plugins. However, there’s no assurance that you’ll be given the latest versions, and some (such as Craft and Zeplin) aren’t even included in the toolbox.

SketchPacks is updated more often and usually includes the big boys like AnimaApp – yet it’s still missing the private-source plugins like Craft and Zeplin.

The newest version of Sketch (version 48) tries to update Sketch Plugins when it can, but using Sketchpacks or even the GitHub GUI – if you’re familiar with GitHub – could serve as a suitable alternative. For more guidance, look here.

This is an edited version of an article that originally appeared in net magazine. Subscribe here.

Related articles:

View the full article

Sign In