Words by Ben HamiltonAugust 10, 2018
During the early stages of a web design project, I find it useful to try out different colour options for the various elements that make up a page design. If you’ve already fleshed-out a design that uses one or more colours prominently for things like buttons, rollovers, calls-to-action etc. then here’s a nice trick that will let you quickly preview colour variants in Sketch.
In the file above, I wanted to tweak the shade of blue I had used on the left and try out something darker like the blue on the right. Having already set up a large number of fiddly design elements such as dropdown arrows, radio buttons and check boxes it would have been a time-consuming process to manually go through the file and adjust the colour. Luckily, I was able to swap out everything that used the lighter blue in a matter of seconds. This is how I did it using the ‘find and replace colour’ command in Sketch:
Setting up the file
The first thing to do is add the alternative colours you’d like to try to your document colour palette. I usually create a number of small squares to the side of the artboard with the shades I want to preview and then simply add these to the document colour palette by choosing ‘fills’ and clicking on the little ‘+’ at the bottom of the menu:
Replacing the colour
After this, it’s largely an automatic process to try out your other swatches.
You’ll see that this catches all instances of the first colour, and even applies to any symbols that you might have created.
It’s worth noting that because the command replaces every instance of a given colour across all artboards (including locked items and those on different pages), it’s not possible to repeat this trick in a single Sketch file and retain your colour versions side by side. You’ll either need to export a jpeg of each colour option or create duplicate sketch files so that you can keep a record record of your tests and share them with your team and/or the client.
I hope this little trick helps you to save time in your design tests, and if you have any comments, questions, or other tips and tricks you’d like to share with me, please leave a comment below.