How to Collaborate With Your Team Using Sketch

I often spend my spare time surfing the net, looking for useful resources and articles about Sketch–anything that might help improve my design workflow and inspire me to write my own articles. Two discussion topics I regularly encounter go something like “But Sketch is only for Mac users, what can I do if I have a Windows machine?” or “Guys, what are the best practises out there for a good teamwork workflow with Sketch?”

Let me share with you some ideas, links and resources which will help with these questions. Collaboration deserves an in-depth look if you’re thinking about introducing Sketch into your team workflow, or you need to share your designs with developers.

1. A “Traditional” Sharing Workflow

This one is easy, as long as every person involved in the project has a Mac: share your .sketch files with them! Be sure, also, to make available all the assets needed, like non-standard fonts or any documentation which explains the design.

Photoshop comes packaged with Adobe’s libraries and linked smart objects to maintain up-to-date components across multiple documents and authors, and it works really well. Unfortunately, features like “shared styles” across different files, or even an external symbol library, is something that Sketch doesn’t offer at the moment. It’s therefore really useful if you spend some time creating a style guide in order to keep consistency across the site or app you want to design. Consider things like Style Inventory, Sketch Measure or Sketch Notebook to share all the asset details. Your teammates will thank you!

One common example of a traditional sharing workflow is this scenario I’ve seen on SketchTalk.io:

“We currently keep a centralized master document on our server, and we each copy that document to work locally. After local versions get to a complete enough state we copy/paste the artboards back into the master document. – JohnnyMuir

Maybe you’re working remotely so local sharing is not an option. Try email, FTP or a cloud solution to share your Sketch files instead. Use email attachments only if you’re sending complete designs which won’t need several changes along the way. Consider sharing your files using services like Google Drive, Dropbox or even Github; these will give you access to versioning of your documents.

2. Using Symlinks and Cloud Sharing

Let’s go one step further in our traditional workflow sharing, again using cloud storage services, but this time leveraging shared templates. We already know that symbols and templates are great (see our Using Sketch Symbols and Templates tutorial). Now we’re going to take a look at this idea by Jean Paul Bondy at SkethTalk.io:

“I’m using Symlink and Dropbox to share Sketch templates, as opposed to each individual having them locally. – JeanPaulBondy

Well played! By default Sketch looks in the templates folder on our local hard drive, but using a symlink (a “soft” link), it can redirect us to a Dropbox folder where we then put the template files. Brilliant! Learn more about symlinks on Wikipedia.

By doing this, we don’t have to email templates to all of the other designers, then email again with any updates to templates. When a designer creates a new document from a template, Sketch looks in the template directory but our symlink will point to the Dropbox folder and load the last updated version.

How to Setup a Symlink

To create a symlink, open Terminal. We’re going to use ln command plus the modifier -s The “ln” command is used to create hard links. “ln -s” makes symbolic links.

Step 1

Let’s setup an example: say you want to sync a single .sketch file located in your Dropbox public folder called “words”. First go to Sketch and check the Reveal Plugins Folder option under Plugins to be sure about the location of your template’s directory.  You should see a “Templates” folder already made. Create it now if you don’t see it.

The entire location should look something like  /Library/Containers/com.bohemiancoding.sketch3/Data/Library/Application Support/com.bohemiancoding.sketch3/Templates/ or /Library/Application Support/com.bohemiancoding.sketch3/Templates. 

Step 2

Now we know the name and location of our sketch file and where the local templates folder is, go back to the terminal window. The code you have to type should be:

ln -s "/Users/YOUR DROPBOX USER ACCOUNT NAME/Dropbox/Public/words.sketch" "$HOME/Library/Containers/com.bohemiancoding.sketch3/Data/Library/Application Support/com.bohemiancoding.sketch3/Templates/"

Hit Enter. When you come back to Sketch again, you should see a new option under the New From Template option in the main menu.

Alternatively, you can check other tools like Droplink or MacDropAny to sync any file or folder on your Mac with Dropbox.

Note: unfortunately, when you update a template containing symbols, the files that have already been created with those symbols won’t be updated automatically. Let’s wait for a solution from the Bohemian Coding guys in future releases of Sketch!

Using cloud storage services like Dropbox also helps us work with other tools like Invision and Marvel, which offer Sketch integration. Take a look at our Invision tutorials and our introduction to using Marvel to learn more.

3. Sharing Sketch Files With Windows Users

You’ll have gathered by now that it’s only possible to design using Sketch if you work on the Mac platform. However, if your design is ready to go and you have to send it to a developer who has the task to build the layout, they also need a way to access the content of your design files. 

You can prepare all the assets by yourself, or use a different workflow by introducing Avocode to your dev team.

Using Avocode you can upload your sketch files and share them with other people, then using the Avocode app, they will see all the contents, even if they’re using Windows or Linux!

You’ll need the Avocode Sketch plugin (Sketch 3.2+ needed) to upload your Sketch design files into the app, then share the project with the rest of the team.

Take a look at our in-depth tutorial about inspecting files using Avocode to learn more.

Alternatively, check out Zeplin, another interesting service for inspecting Sketch files, even without access to a Mac.

Both services offer different plans, pricing and features, so try both!

Room for Improvement

These methods are the best processes that I’ve discovered to date with regards to working with other people using Sketch. Having said that, I think there is space to improve these workflows, maybe with the release of new features in future versions of Sketch. The ideal process would be one where we could create styles, symbols and templates in perfect synchronisation between different files, right? Fingers crossed.

Did you find these ideas interesting? Do you have any improvements to add? How do you work with your team? I’m curious. Let’s talk in the comments!