The Beginner’s Guide to Writing Sketch Plugins Part 7 — Creating a Shared Color Palette

For this article, we’ll be taking a bit of a different approach. It’s more of a case study plus walk-through, rather than a step-by-step tutorial. It’s also much more complex, but hopefully after reading the first few, you guys are ready! Instead of focusing on one topic and how to create a plugin for that specific situation, we are going to create a custom solution using built in features plus plugins to solve a complex problem.

Sketch in all it’s prowess, is lacking one huge feature, a color palette that syncs across multiple documents. There are already some great plugins out there (Consistency, Sketch Palettes, Craft), but none of these completely fit my needs. Exporting and importing a color palette is fine when you have a visual style locked down. But if you are in the midst of finalizing a visual style, as I am on the game I’m currently working on, your color palette is constantly evolving.

So instead of manually updating colors, I’m looking for something more automated. Meaning, when I update a color in my palette, I want all instances of that color across individual documents to also update.

Shared Styles are a great way to sync colors within a single document. But there’s really no good way to share these styles across different documents. We know from the last article that Sketch can export data, so we can easily export a color palette. But now we’ll take that idea a step further and find out how to import data.

Our overall solution will look like this:

  1. Create a Sketch document to hold our color palette using Shared Styles
  2. Create a plugin to export colors from that color palette to a JSON file
  3. Create an import plugin that 
    - Imports that JSON file to Sketch documents
    - Either creates a new Shared Style or syncs existing ones
    - If a style already exists, update all instances of objects using that style in that document
    - Creates Document Colors for easy access with other features

As a disclaimer, this solution doesn’t sync colors that are used in Text Styles. Since Sketch handles Shared and Text Styles uniquely, syncing colors across Shared and Text styles can be more complicated than we have the time for. So this solution isn’t perfect, but it at least provides a better way than what is included natively.

Create a Color Palette Document

Let’s begin by creating a color palette. To do this we’ll make a very simple Sketch document with one artboard, colored Rectangles, and Shared Styles based on those colors.

Download my example palette here, or follow these instructions:

  1. Create a new Sketch Document and save it Colors.sketch
  2. Add an artboard (any size you want)
  3. Add a Rectangle (any size you want)
  4. Change the fill color to anything you want
  5. Create a Shared Style and name it anything you want
  6. Repeat for additional colors

You can organize this however you like, but mine looks like this:

And I named my colors: Primary, Secondary, Error, and Neutral. I always find it better to name your colors something generic. This is especially helpful since your colors could completely change, so you wouldn’t call something ErrorRed, when your error color might end up being blue.

And you’re done with your color palette file! It’s super simple to make and easy to add, remove and edit.

If you do update your color later, be sure to always update your Shared Style by clicking the Refresh icon!

Create an Export Plugin

Now we’ll use what we learned in the last article to create a plugin to export these Shared Styles to a JSON file.

To do this, we’ll need a for loop to iterate through all the shared styles and push the info we need to an array that we’ll export to JSON.

Like usual, create a variable to access the document:

var sketch = context.api();
var doc = sketch.selectedDocument;

To get the Shared Styles of a document you’d use this:

var sharedStyles = doc.sketchObject.documentData().layerStyles();

We only really need the name of the Shared Style and the hex value, so to iterate through the sharedStyles array to get that, you’d do this:

Now we’ll add some of the code we used last article to create a panel for a user to select where to save the file, pushing the info we need to an array, and exporting it as JSON.

I won’t go into specific detail on how this is created, but I’ve commented each line and here is the final plugin:

In the imported common.js file, I’ve added a few helper and reusable functions, some of which we’ll be using later:

Run the Export Color Palette plugin and you’ll get a JSON file that looks like this:

{
"Color Palette": [
{
"name": "Primary",
"value": "#BEA8FF"
},
{
"name": "Secondary",
"value": "#6792F6"
},
{
"name": "Negative",
"value": "#CA1111"
},
{
"name": "Neutral",
"value": "#E8E8E8"
}
]
}

Create an Import Plugin

Now that we’ve found a way to export these colors, let’s create a plugin to import them. Just importing them is the easy part, figuring out how to update them if they already exist is what makes this a bit more complicated.

First we’ll analyze the existing document to see if there are already Shared Styles. This is important, because we don’t want to overwrite anything new we’ve done in that document.

To import a JSON file you’d use this method, which is pretty similar to the export code from earlier:

Now we can reference the palette array in that JSON file and compare it to the existing styles, to either add a new style or update an existing one.

We’ll do this in a custom function and pass certain variables we need to reference:

updateSharedStyles(doc, sharedStyles, palette, existingStyles, filePath);

As I explained earlier, to combat the problem of not being able to sync colors in text, we’ll make these colors accessible in the Document colors, so let’s create an array to hold them:

var documentColors = [];

Now we can loop through the palette array using a nested for loop, since the information we need is in the first array item:

This will give us the values from the JSON file, and we can easily create new Shared Styles from this, but how do we check if the style already exists?

Here’s where one of the functions from the common.js file come into play:

This takes the name of the imported style and compares it to the items in the existingStyle array. If the name you’re checking exists, the function will return a true value, false if it doesn’t.

If the style doesn’t exist, creating a new style is pretty simple:

If the style name already exists, we’ll compare the color values to see if they need to be updated. If the values are the same, we’ll leave them alone. To do this, we’ll loop through the existing Shared Styles:

All of this works great, but unfortunately Sketch doesn’t auto update layers with the new style. So we’ll have to loop through the entire document and check for usages of the style and update them.

To check what style a layer is using, you need to use the objectID class. First let’s get the objectID of the updated style.

var styleID = layerStyle.objectID();

Then we can create a custom function to check if any layers are using this ID, and if they are, update them.

updateAllExistingStyles(doc, styleID, sharedStyles, k);

Here’s the entire plugin. You’ll also notice where I pushed the colors into the documentColor array, and updated those colors.

And that’s it! Well, it was a lot of code, so it wasn’t that easy. But who said writing code as a designer would be?

Now we have a process to combat the lack of a shared color palette in Sketch. It isn’t perfect, but it also isn’t too overly complex. This solution might not work for you either, but it shows how much control you can have when using a combination of native functionality plus plugins. So be creative, but don’t try to reinvent the wheel.

Download this entire plugin example here or view it on GitHub.

I want to thank a few people, as I looked really closely to their work for code reference and inspiration while writing this.

Aby Nimbalkar — Sketch Plugin Snippets for Plugin Developers and Sketch Headers

Andrew Fiorillo — Sketch Palettes

Florian Schulz — Sketch Style Inventory

Nils Hoenson — Shared Text Styles

As always, feel free to contact me with feedback or suggestions for the next articles: Twitter, Facebook, or Email.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.