Background Image

23 top Sketch plugins

Discover the best Sketch plugins, where and how you can get them, and how to make the most of them.

Sketch is the go-to UI web design 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.

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

react sketch plugin

This Sketch plugin helps you manage design systems

Price: FreeSummary: 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 was developed by Airbnb for use with its design system, with the aim of helping to bridge the gap between designers and developers.

02. Git Sketch Plugin

Price: FreeSummary: 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: FreeSummary: 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 sketch plugin

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

Price: FreeSummary: 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 Sketch plugin

ImageOptim brings a sophisticated image optimisation workflow

Price: FreeSummary: 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/moSummary: 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

Export More

Make Mac-ready icons and animated GIFs with Export MorePrice: FreeSummary: 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 CC for or After Effects CC 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

Sketch Style Inventory

Pull all your designs into a single style to rule them all Price: FreeSummary: 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

Day Player

Fancy using Bill Murray as a placeholder image?

Price: FreeSummary: 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

Marketch sketch plugins

Turn your designs into lovely CSS with MarketchPrice: FreeSummary: 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

Sync Sketch Plugin

Convenient syncing for your design teamPrice: FreeSummary: 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 circles plugin

Segmented circle diagramsPrice: FreeSummary: 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 plugin

Sketch Runner is macOS’ Spotlight equivalent for Sketch

Price: FreeSummary: 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

Icon fonts in Sketch

Price: FreeSummary: 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: FreeSummary: 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

Original Source

Print Email

{SCPinterestShare href= layout=standard image= desc= size=small}
Web Statistics
Web Statistics