Lars Damgaard
strategic user experience designer
March 7th 2016

Working in teams with atomic design using a Sketch template file, symbolic links and Dropbox

I work in a department with two multidisciplinary scrum teams, each team with two designers. We’re currently working on a big project using atomic design. That’s all good.


Sketch is a good tool for atomic design, especially when using a shared template file via Dropbox.

As designers, we needed a way of being able to quickly share the styles that have been committed to the pattern library in a way that makes it easy for a us to quickly re-use design elements for new parts of the project.

Agile atomic design

Despite of an agile development process, the designers are sometimes ahead of the developers because we often work with design spikes.

Follow me on twitter for updates on user experience design

We have a web based atomic design pattern library that is built in production code, which is really cool, but because the design is often a few steps ahead of the current sprint, the web based pattern library is often one step behind relative to what we are working on in a design spike.

Why to do it

Brad Frost who invented the term atomic design is a pretty talented guy, who knows as much about front end technology and responsive web design as he does about ux design. Which is a lot in both cases. I know that he would argue that ux design and front end technology should not be separated, though he is aware that “at the end of the day, it’s not about the tools we use to create pattern libraries, but rather how we use them.“. That being said, the underlying premise about atomic design still seems to be that it’s done in code.

I don’t feel strongly opinionated about the whole discussion about whether or not designers should code, but the pragmatic fact is that most designers probably still work in a design tool rather than in code, which leaves a rather futile gap in the work flow.

As designers, we might want to take advantage of atomic design and its core methodology about building living design systems instead of dead pages and use that at as a central part of our product development process, but that doesn’t mean we’re ready to throw away our design tools. At least for our two teams, such a gap existed.

We design in Sketch which means that we need to share our atoms, molecules and organisms in a way that works in Sketch.

How to do it

Using one of the approaches in this post by Armando Sotoca, my clever colleague Mette came up with a good and simple solution that so far seems to work very well for us:

  1. Use Dropbox
  2. Set up a Sketch file that contains your pattern library elements, preferably as symbols and or text styles where possible since these will be inherited to your new file. Save this file as a template to your local template folder using the “save to template” option from the file menu.
  3. Open Terminal.app and create a symbolic link between your template folder and a Dropbox folder that all designers have access to. If you’re uncomfortable using Terminal, this can be done easily using some of the various tools mentioned here
  4. Restart Sketch.app

Whenever a designer on your team needs to work on a new project, all they have to do is to create a file “from template” (from the file menu) rather than just a new, blank file in Sketch. The new file will inherit all text styles and symbols.

Whenever a designer needs to commit new atoms, molecules and organism to the template file, all they have to do is to open the template file from Dropbox, add the new stuff and save it and wait for Dropbox to sync. After that, all new files made from that template, will inherit the stuff that was committed.

Unfortunately, but quite logical, new “commits” will only appear in new projects made from template, it won’t affect old projects. If you need that kind of functionality, an idea for a nasty workaround would be to create a new file from template and then copy / paste your content over from the old working file. I haven’t tried this though.

It’s not a perfect setup, but it’s probably the best I can imagine under the current technical circumstances in Sketch.

Thanks for reading.

Related to what you were just reading
July 3rd 2013

Axure 7: my favorite features so far

A new version of one of my most frequently used tools has been beta-released: the much awaited Axure 7.

1002749_10151556361944527_1306880868_n

One of the main features, which I guess is also one of the main reasons why the release is somewhat delayed is the ability to work…

Read more







January 12th 2014

Lightweight team projects: Axure custom libraries and Dropbox

When designing in Axure, I often need to collaborate with other designers. Until recently I would achieve this by creating a team project in Axure and place the working file on a shared drive or in a cloud based repository. In my…

Read more







October 8th 2013

Productivity tip: use font awesome for prototyping in Axure

When working with rapid prototyping it’s important not to indulge yourself in details in the beginning of a project.

However, as you move along you often want to increase the fidelity of your prototype and as a part of that process, you…

Read more







December 13th 2013

Using Evernote to share designs with colleagues and stakeholders

For years I have been looking for an ideal way to share designs with people. However, I never really found a good solution up until a couple of weeks ago when my colleagues and I started using Evernote as a design sharing tool. It’s not…

Read more