Batman is an application that lets you create tasks in Asana. Each task belongs to at least one project. You can associate a project to a colour from a finite list. When I dabbled with Sketch to decide on a design for Batman, I needed those colours.

Asana projects’ colours

A project’s colour can be one from a finite list so the best way to represent them is a Swift enum. Each of these colours has a “raw” representation as a UIColor.

enum ProjectColor: String {
    case darkPink = "dark-pink"
    case darkGreen = "dark-green"
    case darkBlue = "dark-blue"
    case darkRed = "dark-red"
    case darkTeal = "dark-teal"
    case darkBrown = "dark-brown"
    case darkOrange = "dark-orange"
    case darkPurple = "dark-purple"
    case darkWarmGray = "dark-warm-gray"
    case lightPink = "light-pink"
    case lightGreen = "light-green"
    case lightBlue = "light-blue"
    case lightRed = "light-red"
    case lightTeal = "light-teal"
    case lightYellow = "light-yellow"
    case lightOrange = "light-orange"
    case lightPurple = "light-purple"
    case lightWarmGray = "light-warm-gray"

    var raw: UIColor { /* ... */ }
}

My goal was to have all these values available as Document colours. That is, colours that I could reuse across my document.

Sketch open file format

Sketch is an amazing tool for designer and dabbling developers like me. What is even more awesome is the open file format they chose to go with in Sketch 43.

TL;DR: every Sketch document is now a zip file.

All the informations are available on this post. A quick look into the content of the unzipped folder shows that it’s the document.json file that we care about. This is the one that contains the list of colours used in a Sketch document.

Listing all values of an enum

I added a command line tool called ColorDump to my project. ColorDump takes a path to a Sketch file and adds all the colours back to the Sketch document. That is:

1. Unzip the content of the Sketch document
2. Parse the content of the documents.json file we mentioned earlier
3. Retrieve all the colours for a project, extract the red, green and blue components. If you look back to the content of the documents.json file, Sketch stores a colours in this format.
4. Set those values to the object representation of the documents.json and write it into the file.
5. Re-zip the folder

Listing all the values of an enum is cumbersome as there is no compile check that you haven’t forgotten a value. This is even more problematic that you have to remember to update this list when you add another case. While this was a very small issue, it gave me a good reason to finally try Sourcery.

Sourcery is a meta-programming tool that will generate code for you. Using the following template I got access to all possible values for my enum. Even better, I can safely update my code if Asana decides to add a color.

Finally, I used Process to invoke the zip command line tool. The path to the Sketch document is injected using an argument. The whole script is quite straightforward.

Conclusion

This was a fun couple of hours spent on hacking my way into my Sketch document. As a reminder, Batman is an iOS application to create tasks in Asana. It’s open-source and available here under the MIT license.