As a Senior Experience Designer at BCG Digital Ventures Sydney, Raymond Yang is dedicating to solving user needs, creating delightful interfaces and continuously improving his craft. Read on as he discusses the pros and cons of the latest Sketch Workflow Tools and Plugins. 

One of the greatest attributes of Sketch is that it’s lightweight. You can customize it however you want with plugins and tools depending on the project. It’s matured since its first release in 2012 and we’re now faced with not only abundance of useful add-ons, but also competing plugins that solve similar problems.

I’ve compiled some of these tools which have been useful and some which require further consideration. The purpose of this list is for you to decide which tool is appropriate for your workflow and provide some insight into the barriers I’ve encountered.

Abstract App 

Picture1

Abstract is a third-party application for archiving and collaborating on Sketch files in the cloud – a much needed improvement on a traditionally ‘local’ workflow. One of the most important features Abstract includes is version control, removing the hassle of managing backup files. No need to prefix your files “v1.234,” “-02,” and “-finalFINAL,” finally.

Pros

Version control in Sketch files means you no longer need to store and manage multiple files locally. Having a version history assigned to users also improves accountability in projects where there are multiple designers involved in a single file. The ability to decide between changes in Symbols when syncing means there won’t be any accidental, unaccounted changes.

Cons

Using Abstract requires accessing Sketch files through the application. This means Abstract will need to become a critical part of the workflow to maintain file posterity.

Working in an environment with high security barriers means that storing sensitive information in a third-party platform may potentially become problematic where IP, confidentiality, or client  identities are involved.

Verdict

Abstract is a great tool for maintaining design files and version control within large design teams. The only potential issue is if your organization adheres to strict security protocols.

Autolayout 

Picture2Autolayout aims to make UI workflow simpler by including advanced object positioning and artboard resizing options.

Pros

A powerful addition onto existing Sketch layout properties which will allow you to create elements that are more responsive. This will ultimately reduce the amount of tedious adjustments required in making changes.

Stacked Groups makes automatically spacing elements such as navigation bars and masonry layouts much simpler.

Cons

Autolayout brings a little less value now that Sketch has updated their layout properties. As of 14/09/2017, assigned properties are not recognized by Zeplin and will not export properly.

Verdict

This allows UI design to become more flexible on the artboard. Ways to reduce tedious tasks in the design process will become a time saver down the line, but be mindful of potential bugs like exporting to Zeplin.

Chain

Picture1

Chain automatically updates multiple color properties of fills or borders with a single reference object.

Pros

Linking object layers together to update colour properties automatically can be a big time saver, especially in rapid prototyping scenarios where you don’t have the time to set up the Sketch file properly.

Cons

An improvement would be a way to see existing object ‘chains’ to have an overview on what is currently being affected.

Verdict

As a new release, this plugin does exactly as it’s advertised – it’s a similar function to Text Styles in that it’s a system to manage multiple object properties at once.

During prototyping, I can see this as a quick and dirty way to make amendments. For final delivery, Chain could be a useful way of managing Symbols without making them too complex.

Craft

Picture4

Craft is a suite of plugins that helps streamline workflow with InVision by automating tedious actions and pulling in more realistic placeholder data.

Pros

The Sync and Prototype features make it a powerful/valuable bridge between Sketch and InVision. Everything is essentially done within Sketch without the need to enter InVision in the browser, which makes it a less destructive workflow as well in regards to hotspotting.

Duplicate, Data and Freehand features means less time is wasted on creating placeholder content, repetitive actions and collaborating with stakeholders.

The cherry on top is that it’s free to use.

Cons

Sync and Prototype features are redundant unless InVision is incorporated into workflow.

There have been ongoing issues with sharing Text Styles within Craft Library. Until there is a better solution for managing styles, it’s best not to rely heavily on this feature.

Choosing a Transition type was removed from the final release of Craft Prototype. However, it can be accessed if the Gesture is changed to one of the mobile gestures.

Verdict

If you use InVision at all during your workflow, Craft is a must-have. That being said, the Duplicate, Data and Freehand features alone are worth having Craft installed.

Launchpad

Picture1

Pros

Immediately output a webpage from a Sketch file with zero coding required. There is also the option to connect to a custom domain with a payment upgrade.

When pages are linked together, a pseudo-responsive effect can be simulated when the browser dimensions hit the breakpoints.

An option to embed video into containers.

Cons

Launchpad exports designs immediately with elements that are all positioned “absolute.” Although it exports markup which can be immediately hosted online, it’s throwaway code which would be difficult to be improved upon.

Outputted pages are hosted on Anima servers which is potentially a privacy concern.

Verdict

There is less value in Launchpad presenting prototypes compared to something simpler like InVision and the breakpoint feature that snaps screens together only gives the illusion of responsiveness.

That being said, Launchpad is definitely a valuable tool for quickly generating pages for market testing without the need to involve development time.

Lingo

lingo

Lingo facilitates uploading and sharing assets in raster and vector formats with web access available for non-OSX users. “Lingo Kits” integrate particularly well with sharing Sketch assets and entire artboards.

Pros

The ability to batch push/pull assets and artboards makes archiving and sharing assets more seamless. It’s a simple process with low difficulty – Lingo preserves Symbols, Layers and all of the naming conventions.

When pushing assets, change management features allow you to choose between updates.

Cons

Compared to a competing app like Abstract, Lingo is considerably more expensive.

Verdict

There are other competing systems aimed at sharing and managing assets. Lingo is a great option with a friendly interface but it’s ultimately down to organizational preference.

With the release of Sketch 47 Libraries feature, the value of Lingo is slightly diminished.

Map Generator

Picture7Map Generator quickly and easily inserts a map image directly into a shape which ultimately saves time manually creating placeholder data.

Pros

Map Generator is simple to use and has a built-in hotkey. You can immediately insert maps into object areas with specific addresses as well as SnazzyMaps skinning code. It’s simple and has just enough customization.

Cons

The generated map will be cropped to the dimensions of the object it’s being inserted into. This means extra work will need to be done if the object needs to be scalable or responsive on the artboard.

Verdict

Creating placeholder maps has always been a tedious task, and this plugin is a simple solution to that problem.

Merge Duplicate Symbols

Picture8

Merge Duplicate Symbols does exactly as it’s named.

Pros

Duplicate Symbols are removed, and all of their instances replaced by the one chosen. With this plugin, you can easily identify multiple symbol instances with the same layer name.

Cons

Batch removing elements can be a destructive process when there’s not enough oversight into how the Symbols are implemented especially when the plugin targets solely by layer name.

Verdict

Older versions of Sketch were plagued with bugs involving Symbols duplicating and this would have been a perfect solution for that issue. As Sketch improves, this tool becomes less useful and functions more as a final check before delivering files.

Mirr.io

Picture1

Mirr.io is a simple hotspotting/prototyping tool within Sketch with the same fidelity as InVision.

Pros

Mirr.io is free to use and has the option to live preview on devices. The fidelity of interactions is the same as InVision but with the benefit of not having to go into a browser.

Cons

At the moment, you need to click into Plugins > Mirr.io > Add Action for every interaction. This could be simplified by creating a custom shortcut manually.

Verdict

Mirr.io is a no-frills alternative to achieve similar results to InVision.

RenameIt

Picture10Ever had the issue of finding a list of Layer 1 through to 30? Need to include a new suffix or prefix before your Symbols? RenameIt does all of that and some more.

Pros

Easily batch rename layers with either sequenced ascending, descending, dimensions or including suffixes and prefixes. Helpers are accessible on the modal window itself.

Cons

Batch renaming layers wouldn’t be a regular situation if files are set correctly from the beginning. This could mean more learning each time it’s used but that’s solved by the helpers on the modal.

Verdict

Unless you enjoy manually renaming each layer, there’s ultimately no downside to having this plugin in your kit.

Segmented Circles

Picture11

Segmented Circles automatically creates precise circular graphics for data visualization and dashboards.

Pros

This plugin provides options for generating either stroked, filled, dashed or ticked circles. It’s a practical way to create pie or donut charts on the fly.

Cons

None

Verdict: Keep it in mind

The plugin functions as advertised with no dependencies and I haven’t had issues with it to date. Regardless of whether styled circles are a big part of the project, it’s worth having this plugin on hand for when it’s needed.

Slinky

Picture12

Slinky is a plugin that exports Sketch files into EDMs. This essentially means that it outputs HTML markup in table format which can be viewed in _most_ email platforms.

Pros

You can potentially save time with Slinky by moving into testing phase quicker, since it removes the initial requirement to code the basic structure of the email.

Slinky will automatically export image and icon assets – they simply need to be individually marked as Exportable.

Cons

Unless the EDM is an extremely simple design, relying on a generator to build an HTML structure may come back to bite you when the inevitable issues arise. It will take extra time to understand the exported code and potentially even more time to restructure it.

Verdict

At the very least, using Slinky is more effective than EDMs made up of sliced up raster images. Being able to incorporate HTML text into an EDM will help email clients identify the content inside and make inbox search more accessible.

As it stands, Slinky is only useful for very basic designs, but it’s a great start.

Sync to Slides

Picture13

Sync to Slides is a plugin that will help you upload your artboards to Google Slides directly.

Pros

This plugin will allow you to create slides in Sketch instead of Powerpoint. The tool creates a raster image layer of the entire artboard with empty placeholders positioned on top. This can be used to create complex slide layouts in Sketch.

Cons

The plugin requires access permissions to Google Slides in order to sync which may pose a security concern.

The fact that the it creates a raster image layer of the entire artboard with empty placeholders means the content will need to be recreated in order to be editable within Google Slides.

Verdict

I could imagine a workflow where basic wireframe or placeholders are created in Sketch before being synced to Slides where the information and high fidelity details are created.

Zeplin.io 

Picture14

Zeplin streamlines the workflow between design and development.

Pros

Zeplin makes a traditionally painful process for developers simple by having generated annotations in the design. You no longer need to manually annotate designs which is a tedious and time consuming task.

CSS snippets are available in the export as well as commit messages when updates are made.

Zeplin also offers browser access for users who don’t have the application.

Cons

The only artboard organization that can be done within the Dashboard is adding ‘tags,’ which makes it slightly more difficult to categorize projects with a large number of artboards.

Verdict

Zeplin was one of the earliest solutions to bridge the gap between Sketch and development. Since then, there have been competitors offering alternative features which may be more suitable depending on the project.

To learn about more valuable tools used by the DV design team, read here.