37 Sketch tools and plugins that will improve your design workflow - Heart Internet Blog - Focusing on all aspects of the web

Sketch remains one of the most popular tools for digital designers. One million people have bought a license, and the company behind it, Bohemian Coding, recently raised $20 million in venture capital. New features include Smart Distribute, which makes working with multiple layers quicker and easier, the ability to create new layers from SVG code, and an all-new fill popover with improved features and collapsible sections.

A major update is in the works, too: later this year Sketch will come to the browser, so users can render an entire document, add developer handoff and collaborate without having to leave the browser.

Tools and plugins, which can be installed to extend its functionality, are an important part of Sketch’s ecosystem. Many are even free to use. So in this article we round up the best ones that you need to know. Even if you don’t use Sketch, it’s worth having a skim through, as some of the tools are also available for Figma, InVision and Adobe XD.

Enjoy!

Official tools

Date and Time Data Plugin

Free

The makers of Sketch have just started building their own collection of official plugins. The first one allows you to generate random dates and times.

Print Export Plugin
Free

Another official plugin, this one enables you to export your Sketch artboards and pages for printing. You can export just a single artboard or entire pages with all your artboards, names and prototyping links included  —  perfect for sharing your user flows.

Essentials

Abstract

From $9 a month

Keep your design files organised and up-to-date with this version control tool for Sketch. No more wasted hours searching for files and never really knowing what changes have been incorporated and approved. Used by the likes of Shopify, Spotify and Cisco.

Craft

Free

A must-have plugin for everyone who uses InVision for quick prototyping and receiving feedback. Create prototyping links within Sketch before uploading the designs to InVision, which saves you a lot of time.

Flow

From $12.50 a month

Animate Sketch designs in seconds, auto-animate between artboards and export production-ready code for iOS, JavaScript animations for HTML, or create animated SVGs. Flow gives you accurate control over properties, timing, and easing.

Stark 

From free

Available for both Sketch and Adobe XD, this plugin enables you to design with accessibility in mind from the start. It features a contrast checker and a colour blindness simulation and soon will also suggest colours within the same colour family if your colours don’t pass inspection.

Design systems

Cabana

From $48

A design system kit for Sketch, which helps you create sites and apps in a more streamlined way, so you can easily improve your design workflow. Cabana includes more than 100 responsive components and is already being used by the likes of Amazon, eBay and Oxfam.

Visual System

$48

Visual System is a set of modules and components, available for both Sketch and Figma, that help you build consistent products. Another design system start kit featuring text and colour management, spacing control, a library of more than 100 elements, and more.

Design Starter Kit

$39

A starting point for your next design project, this set is built on the principles of the atomic system. Includes UI elements and components, a base icon and illustration pack, and premade grids and skeleton screens.

Prime

From $48

A UI framework for Sketch that speeds up the design system creation. The main library file contains all UI elements needed to create a digital solution, there’s also an illustration system, vector device templates, and two typography system files.

Eva Design System

Free

A customisable design system easily adaptable to your brand. Available for Sketch with mobile and web component libraries, including hundreds of symbols and dozens or styles configurations, Eva focuses on providing a lightweight process.

Superior

$38

A simple and customisable iOS UI framework for Sketch that you can use as a starting point for iPhone and iPad app designs. You can set up the library in a few minutes, there are two-premade themes, as well as placeholders and column layouts grouped by symbol type.

Email Design System

$10.80

One Sketch file, 10 templates for desktop and mobile aligned to a six-column grid, reusable components and styles, ready for you to customise HTML emails. Also works with Figma.

UX flows

Flowkit

From $29

This Sketch library, also available for Figma, enables you to quickly build out high-level flows to tell the story of your designs — perfect for presentations and documentation. Already being used by Apple, Nike, Facebook, Dropbox, and more.

Squid

From $24

Another UX flow toolkit that includes over 50 fully customisable UI templates, which will help you save time when designing user flows, diagrams and sitemaps in Sketch. Supports 56 connection types to show the flow between UIs.

UX Flow

Free (or donation)

A free flowchart kit for Sketch and Figma, including hundreds of fully customisable vector cards, arrows and elements for creating quick sitemaps, flow charts and diagrams. You can choose from 68 different connectors to save time on creating more complex projects.

Overflow

From $12 a month

This tool enables you to turn your designs into playable user flow diagrams. Tailored for designers, it syncs with the most popular design tools like Sketch, Figma and Adobe XD and features dynamic and interactive presentation capabilities.

Libraries and UI kits

Angle

From $50

Available for both Sketch and Adobe XD, here are 600 fully customizable mockups of mobile devices (iOS as well as Android) designed by Meng To. It’s a massive library that also includes a plugin that enables you to place your screen into perspective mockups.

Charts for Sketch

Free

The most comprehensive collection of scalable Sketch charts, graphs and diagrams for web and mobile. Almost 100 charts in the most popular categories, three colour schemes, neatly organised nested symbols and overrides and more.

Material Icons Library

Free

A massive set of over 1000 vector icons for Sketch, Figma, InVision Studio, Adobe XD and Photoshop. The icons are taken from Google’s Material Design and separated into different style categories.

Chat Messaging UI Kit

Free

A high fidelity chat UI kit for Sketch that covers five essential use cases: live streams, team collaboration, messaging, customer support and gaming. Design responsive chat interfaces with all the elements required for fully interactive chat experiences.

Velocity

Free

A responsively-designed UI kit for Sketch, Photoshop and InVision Studio, to jumpstart your next design system and speed up large projects. Includes 10 page layouts, over 70 components and more than 300 UI elements, inspired by an imaginary self-driving car company.

uiLogos

Free

This plugin, also available for Adobe XD, helps you get more than 25 placeholder logos (both logomark and logotype) and over 190 country flags directly into Sketch.

Hue

Free

A collection of hand-picked colour palettes, available as a free Sketch file. The system is based on the 60-30-10 colour ratio rule and helps you balance and apply the colours to your design.

Head

Free

Kickstart your designs with some hand-crafted ideas for your website headers. Head is a starter kit, featuring six scalable headers for Sketch that will save you time and increase productivity.

Storyboards

$9

An illustration library that helps you create quick storyboards right from Sketch. Great for prototyping and communicating user experiences and journeys. Includes 37 environments for banking, retail, healthcare, hospitality, home life and more.

Workflow

Anima

From free

Install the plugin and create responsive and interactive high-fidelity prototypes within Sketch and use Anima to build consensus with stakeholders. Version 4 features a new way for designers to collaborate with developers, who can access relevant React code.

Felipe

Free (or donation)

Speed up your Sketch workflow by visually turning basic layers into symbols. Instead of searching through a long list of symbols, just draw simple shapes or text layers, and magically turn them into the symbols you meant to add.

Runner

From free

Another plugin to speed up your workflow. Perform Sketch actions quicker with your keyboard. The RunBar lets you navigate back and forward between artboards and jump to any layer with just two clicks. A command-driven approach to using Sketch.

Marvel

Free

Marvel reimagines the Sketch workflow: seamlessly import prototypes (that update as and when you make changes in Sketch) and sync artboards from Sketch into Marvel, then handoff code.

Timelapse

$12

A plugin that lets you create beautiful high-speed time-lapse videos of your work in Sketch with a single click. Track your design work over time and show off your progress to your boss, team or Dribbble followers.

Miscellaneous

Data Populator

Free (or donation)

Say goodbye to Lorem Ipsum. Here’s an open source plugin for Sketch and Adobe XD to populate your design mockups with realistic and meaningful data. Prepare JSON data with corresponding keys that fill the placeholders in your design.

Sketch Auto Translate

Free

Save time when localising your designs. The Sketch Auto Translate plugin handles language translations, so you can create multilingual apps within minutes instead of hours. It translates text layers and symbol overrides from and to 40 supported languages.

SocialSizes

Free

Find the correct image and video sizes for social media — all in one place, with templates for Sketch, Adobe XD and Photoshop. Now you can create social media assets with the right dimensions.

P5.sketchplugin

Free

A plugin for using p5.js in Sketch. Create rich and editable complex graphics, generative visuals and data visualisations inside Sketch with just a few lines of JavaScript.

Dribbble for Sketch

Free

Use the official Dribbble plugin for Sketch to upload your work to Dribbble without ever leaving the app. There are also integrations for Figma, Adobe XD, InVision and Flinto.

xPal

Free

Here’s one for all the iOS developers out there. This small tool that takes the artboards from a page in Sketch and generates an asset catalog for your Xcode project that contains all the colours named and grouped appropriately.

Also check out 10 reasons why you should bring prototyping into your design process here on our blog. 

Subscribe to our monthly Heart Internet newsletter, filled with the latest articles about web design, development, building your business, and exclusive offers.

Subscribe now!

Comments

Please remember that all comments are moderated and any links you paste in your comment will remain as plain text. If your comment looks like spam it will be deleted. We're looking forward to answering your questions and hearing your comments and opinions!

Leave a reply

Drop us a line 0330 660 0255 or email sales@heartinternet.uk