Tools for Effective Design Collaboration in Sketch

One of the biggest lessons I’ve learned throughout my career is that there’s no such thing as a “complete”, all-round, full-stack, genius designer.

Design is a collaborative sport, so the question is: how to collaborate in a smart and efficient way when multiple people work remotely on the same files? In Netguru, it’s a challenge we face every day as a 30+ strong team, often working remotely in pairs or small groups. We create our designs in Sketch, so we took a closer look at tools that we can integrate with Sketch to make our collaborative efforts more efficient.

When it comes to the design process, it has improved significantly over the years. The market finally realised how ineffective those huge, bulky, feature-packed tools were, and how completely unsuitable they were for the responsive digital world. Many great tools may have appeared, but one problem had remained unsolved until last year: version control. Version control is a simple concept that developers nowadays can’t really imagine their lives without. As designers, we had had to wait very long for someone to recognise our struggle, but we finally got our version control systems, and the choice is wider than ever.

Option 1: Google Drive/Dropbox

Simple Libraries sync setup with Google Drive desktop app

In October 2017, Sketch released Libraries with its 47th version. Libraries didn’t mean version control per se, but they allowed users to share Symbols across more than one document. When used with Google Drive or Dropbox, Libraries are quite handy for small teams – you can split work into manageable parts, which will all be based on the same visual components. If some Symbols need updating along the way, you just edit the Library file and other teammates will be notified of the change and will be able to sync the file.

It’s all very convenient, and the setup is a breeze (although bear in mind, that you’ll need a Google Drive/Dropbox desktop app for it to work), but there still are some drawbacks. First of all, the problem of file version conflicts persists. If two people are trying to edit the Library file at the same time, they are doomed. You must merge libraries manually and fix any new symbols added to the design files. The problems with merging may increase as the number of people working on a project grows, so this solution might better be suited for smaller design teams. It does not allow you to work on the same files simultaneously – you can only share Symbols between them – but considering it’s free, it’s still worth including in your workflow if you don’t use any other tool for version control (or have no budget for it).

Option 2: Abstract

A few months before Sketch released Libraries, in July 2017, something else shook the design world: the public launch of Abstract. This one got everybody super excited, as it was the equivalent of Git but for designers – pretty much all we were looking for! The thing is, this tool will feel much more intuitive to people with (any) previous coding experience, and the concepts of branching, committing, and merging may be a little bit harder to grasp for the others at first. When you get the hang of it, though, you will appreciate the value Abstract can bring to your work. Abstract lets you view a file’s full history (with particular artboards and symbols highlighted) and view all single changes in individual commits (including non-visual changes, such as the version of Sketch used!).

Abstract offers an option to flag changes you are working on (‘work in progress’, ‘ready for a review’, etc.) and give feedback to each other inside the app. What’s important, you can integrate all of this with Slack. It might come in handy if you use Slack and emails for giving and receiving feedback on a daily basis. Adding another feedback channel might lead to many misunderstandings, omissions and, in consequence, decreased efficiency, which defeats the purpose of version control in the first place.

What’s an absolute game changer, is that everybody in a team can work on a feature at the same time, while others can still preview and comment on it, without constantly switching between multiple Sketch files/InVision boards/JPGs in mild confusion. And then, instead of manually merging all the files or copy-pasting artboards or single elements, you can make use of Abstract’s conflict resolving feature. Whenever you merge your changes with the Master branch upon changes made by another teammate, you can review all mutually edited elements and pick the final version. And while this might sound like roses and rainbows, there is some room for improvement.

The major issue with branching is that you have to create a new branch every time you want to make a change. Yes, this also includes such minor changes as moving a button 10px higher or changing the copy somewhere. It might be a bit unnerving when you make a few minor changes in a row and also have to provide comments for your teammates.

When you add in that each file must be opened from the Abstract window – not Finder or Sketch – you are likely to come to a conclusion that it might take too much of the time you could spend more productively (doing actual designing, for instance). For this reason, I would highly recommend using it only with Libraries then working on particular views on independent files.

Tracked file history in Abstract

Tracked file history in Plant

Option 3: Plant

Although the concept of implementing the typical developer’s workflow one-to-one in the design environment one might seem alluring at first, it’s worth reflecting on how the processes differ. Do the same principles apply to both of them? According to the creators of Plant, you can’t really translate the developer’s experience directly onto the design process. Plant, while still deriving from the classic version control system, does not include branching, and it only supports linear history. This really elevates the whole process, so if Abstract’s advanced features gave you a headache, Plant might be your best shot. Plant is essentially a Sketch plugin, and you don’t need to open anything else before beginning your work. When you’re done, you just pick an option from the side panel, and you’re good to go (you can also use keyboard shortcuts). Merging conflicts looks similar to how it’s done in Abstract, except you do it inside Sketch by interacting with artboards. Plant seems to fit the design workflow more accurately – it’s more intuitive.

Beware, however, that Plant’s simplicity also entails some shortcomings. The lack of more advanced review process leads to situations, where you only deal in absolutes – you either accept the change or dismiss with no further comments. Also, the plugin only allows one file per project (unlike Abstract, where you can create whole collections), which might be an inconvenience for some people.

Summing up

Last year was a game-changer when it comes to synchronizing designers’ collaborative efforts. And although currently available tools are certainly heading in the right direction, we’re yet to see the ultimate solution. It’s hard to predict whether it is something more of Git-like version control or Figma’s real-time collaboration. The year 2018 is bound to bring something new to the table – with the Picnic plugin for Sketch or Invision’s Design System Manager launching soon, there’s nothing else left to do, but sit comfortably in our chairs and witness this small revolution.