Sketch App plugin : RandomColors

As a designer, at times you need to apply a color palette to a group of objects randomly, consider confetti effect for example.

While true randomness is hard to get. It was easier than I initially thought to build this little plugin for sketch app.

The Problem

Apply x number of colors to n number of objects, randomly.

The Solution

• Define a list of colors
• Select objects one by one
• Fill each object with a color from the list, randomly

Although one can do it by hand for desired effect and precision, I decided to do it with a plugin; as a learning exercise on making and publishing a plugin for sketch app.

RandomColors Testing

Writing The Code

Most of the coding was just copy and paste exercise. I searched and found some plugins here, here and here, doing similar or related tasks. having a look at the source code and finding needed code blocks was not very difficult.

To handle the random distribution of colors, a few google searches returned the code needed to select a pseudo random number between a predefined minimum and maximum constraint.

To makes sure one color does not appear twice in a row, a simple if..then..else did the job.

Code in a glance

The source code is well commented, here is quick run through.

Define the colors
Each variable holds one hex value. One can add or remove variables as and when needed.

// Define color palette
var color1 =  "#FC583B"
var color2 =  "#FFD100"
var color3 =  "#3ADCBE"
var color4 =  "#5071FF"
var color5 =  "#014EEF"
var color6 =  "#FFF200"
var color7 =  "#78379D"
var color8 =  "#FE4F20"
var color9 =  "#40BE65"
var color10 =  "#EDC054"
var color11 =  "#EDC054"

Note: Copy Fill Color Sketch Plugin is a quick way to copy hex value of a fill color by hitting command +Shift + F

Selecting a color at random
This random number generator function accepts a min and a max value, between these values a random number will be generated.

/Select a random number
function getRandomIntInclusive(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min)) + min;
    }
// Define array of previously set colors, for iterative color selection inside the loop.
var colors = [color1, color2, color3, color4, color5, color6,color7,color8,color9,color10,color11]

Loop And Select
Next is selecting each object in the current selection one by one and applying a random color to it.

// Get the current selection
var selection = context.selection
// Prepare for looping through objects in current selection
var loop = selection.objectEnumerator()
// Loop through object and change its fill color
while (item = loop.nextObject()) {
if (item.class() === MSShapeGroup) {
//Get layer style
                  var shapeStyle = item.style();
//Get layer style fills array
                  var fills = shapeStyle.fills();
//Set fill style if not created
                  if(fills.count() <= 0){
                      fills.addNewStylePart();
                  }

Fill A Random Color
Finally a random color is applied to the selected shape, and color value is stored to avoid any colors appearing twice in a row.

//Get first fill layer style
                  var fill = fills.firstObject();
//Get a random color to fill layer style
                  var r = getRandomIntInclusive(1,11)
//Avoid repeat colors
                  while (lastColor == r) {
                    var r = Math.floor(Math.random() * 11)
                  }
                  // Fill the color
                  [fill setColor:[MSColor colorWithSVGString: colors[r]]];
// Remember last used color
                  var lastColor = r
             }
  }

Thats it. Oh yes, currently It only works with shape layers other layer types are ignored as of now.

Find the plugin down below or Download it with Sketch-Toolbox

avadhbsd/RandomColors

Ability to make plugins for Sketch is real power in designer’s hands, a few lines of code saves hours of pixel pushing. But at the same time My plugins menu is about to explode, a topic for another brain dump.