10 Sketch plugins you need to know about

[Rss Bot 1]

With the introduction of Sketch Cloud, a rethought file format and subscription-based pricing model, Sketch has had an exciting run. Besides a string of small but highly intuitive improvements, Sketch Plugins now update automatically, and outdated ones are disabled. 

Sketch plugin management is heaps better, and the library is getting bigger every day. 

So let’s take a look at 10 of the best Sketch Plugins that are drastically changing the way that we design user interfaces. Once you've spotted one you'd like, scroll down to the bottom of the article or click here to read how to install Sketch plugins.

01. Auto Layout

• Plugin Type: Added features
• Price: Free
• Summary: Responsive design for Sketch

Auto Layout is a responsive design solution for Sketch designers, turning static layouts into dynamic layouts

Group Resizing is a native feature that was added to Sketch late last year. It enables you to change the way that objects react when your artboards or parent groups are resized – it’s not exactly responsive design, but it’s close enough.

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 amount of px, 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. 

It also does something else, which we’ll discuss next.

02. LaunchPad

• Plugin Type: Website publishing
• Price: Premium plans from $9/m
• Summary: Convert designs to static HTML webpages

LaunchPad is an efficient way of converting .sketch designs into static HTML websites – domain and all

You’ve designed a website in Sketch. Great – now what? Design handoff? Nope, no need! LaunchPad offers an ultra-simple way to convert .sketch designs to static HTML webpages. 

I’m always healthily sceptical about ‘easy’ ways to ‘convert’ design to code, but LaunchPad delivers. LaunchPad was built by AnimaApp, the makers of Auto Layout. In fact, you can combine LaunchPad with Auto Layout to export responsive .sketch designs as HTML. Let’s have a look.

First, the expectations. LaunchPad doesn’t export a ‘finished’ design. You’re still expected to fine-tune loading times, further tweak the code to ensure responsiveness and adaptability to alternative screen sizes, and overall optimise the code output to ensure that the site loads quickly and runs smoothly.

LaunchPad doesn’t make web design easy – nothing ever will – but it does give you some pretty solid foundations to work with. After trying it out with a couple of low-fidelity mockups, I can see that the code output is relatively simple, which means that:

1. We don’t have to worry about bloated code, and…

2. It won’t replace developers by a long shot

Features:

• Responsive design (if combined with Auto Layout)
• Videos, links and forms
• Font-family fallbacks
• Publishing and domain management
• SEO (title, meta description etc)
• Social media meta tags (Open Graph etc)
• Version control (easy to rollback to older versions)
• Google Analytics (or similar) integration
• Keyboard-centric workflow for faster designing

What LaunchPad can’t do:

• Export dynamic websites with JavaScript

03. Color Contrast Analyser

• Plugin Type: Added Features
• Price: Free
• Summary: Analyses Colour Contrast

Colour contrast between two elements, most often between backgrounds and body text, is compared using a formula defined by the WCAG (Web Content Accessibility Guidelines). Nobody likes to deal with formulas on a daily basis (or ever, really), which is why Color Contrast Analyser makes our top 10.

While many Sketch plugins help you accomplish little things easier and/or faster, Color Contrast Analyser also helps you to make solid design decisions using internationally recognised design standards.

Color Contrast Analyser compares two colours and defines the contrast ratio between them. Contrast ratios are split into three levels (A, AA and AAA), and the contrast ratio should always meet the minimum requirement of AA. Of course, you will never know the contrast ratio without a tool that measures it, so the Color Contrast Analyser Plugin is a must-have for designers trying to improve both the readability and accessibility of their work. 

If only one layer is selected, the colour will automatically be compared against the background colour of the artboard.

While there’s no available keyboard shortcut, you can access the feature from the Plugins menu, or you can manually define your own keyboard shortcuts using this super neat trick in macOS.

04. ImageOptim

• Plugin Type: Added Features
• Price: Free
• Summary: Image optimisation in Sketch

ImageOptim brings a sophisticated image optimisation workflow into Sketch, a must-have for serious designers

While Sketch offers its own solution for optimising SVG files, compression for JPG and PNG image formats is still lacking the options to fine-tune using a range of compression techniques. 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) certainly needs to add ImageOptim to their toolbox, although it should be noted that you still 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.

05. Export More

• Plugin Type: Extended functionality
• Price: Free
• Summary: Animated GIF export

When you think animated GIFs, you think Dribbble shots and app demos. It’s no secret that GIFs are making a comeback, but the delicate art of making them isn’t exactly common knowledge. Do we use Photoshop for this? After Effects?

Both of those are terrific choices, but you don’t necessarily need a full-featured Adobe app to create cool GIFs, 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 choose the desired frame rate. It’s really, really easy – and fun.

06. Sketch IconFont

• Plugin Type: Time saver
• Price: Free
• Summary: Manage icon fonts in Sketch

Icon fonts are a highly efficient way of using virtually an unlimited amount of 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, Sketch IconFont 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.

07. Craft

• Plugin Type: Prototyping
• Price: Free
• Summary: Design and prototyping tools

Craft is a super useful toolbox that supercharges your design and prototyping workflow. It’s made by the guys at InVision

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.

Recently added to this list of functionality is 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. With design, prototyping and handoff tools, Sketch + Craft + InVision is a triple-threat!

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

08. Sketch Dynamic Button

• Plugin Type: Time saver
• Price: Free
• Summary: Dynamic widths for buttons

Buttons are very common in user interfaces – we use them to activate functionality, visually alert the user of important tap targets, and submit data to a web server. The problem is, not all buttons are made equal. Among other things, they often vary in size, depending on the character length of the text inside, which can make resizing each one in Sketch a bit of a hassle.

Sketch Dynamic Button isn’t a new Sketch Plugin, but it’s certainly one that can’t be stepped over. If you’ve never used it before, it allows the designer to specify a fixed amount of inside spacing (known as padding: in CSS). 

When you change the value of the text layer inside the button, the button automatically resizes while keeping the padding intact. It’s very useful despite its simple nature.

09. Swap Styles

• Plugin Type: Time saver
• Price: Free
• Summary: Swap styles with another layer

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

With the help of a handy keyboard shortcut, Swap Styles quite literally swaps styles with another layer. Although simple by nature, Swap Styles 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 (the visually highlighted link that describes where you are in the navigation) 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:

1. Awkwardly move things around for every artboard

2. 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. Simple but powerful, right?

10. Sketch Runner

• Plugin Type: Productivity
• Price: Free
• Summary: Spotlight for Sketch

Sketch Runner is macOS’s Spotlight equivalent for Sketch – it quite literally does all of the running around for you!

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.

Feature breakdown:

• Open Runner: Command+‘
• Run last action: Command+Shift+‘
•  Jump anywhere: type ‘goto’ , then an object name
• Insert symbol: type ‘insert’ , then a shared style/symbol name
• Create symbols and shared styles: type ‘create’ , then a name
• Apply shared styles: type ‘apply’ , then a shared style name
• Install more plugins: type ‘install’ , then the extension name

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 45) 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. 

This article originally appeared in issue 297 of net, the magazine for professional web designers and developers – offering the latest new web trends, technologies and techniques. Buy issue 297 here or subscribe to net here.

Read more:

• How to survive as a web designer beyond 2020
• 12 common JavaScript questions answered
• 8 CodePen features you didn't know about

View the full article