Add New Swatch Groups

[demersdesigns]

It would be awesome to be able to add/remove custom color groups. I was able to do this manually by editing the plugin files, but it would be awesome to be able to do this out of the box. Maybe, it makes the most sense to add a button to "create a new group from document colors" and ask for a custom name? This may be more straightforward than having the user input individual color names and hex codes.

Maybe something down here?

[proxemics]

Agree, this would be a much used feature for me!

[FerdinandWerthwein]

Hi everybody. Just had the same thought as demersdesigns after using the swatches plugin for a few minutes. It would be a killer feature to have custom color groups since so many people out there can't wait to get rid of the ineffective color selection within the sketch app. Great plugin so far!

[wolfganglattermann]

+1 ;)

[mischugo]

Same for me +100 ;-) Would like to add may current colors (brand)

[josh-bbn]

+1 this would be super useful if only i could specify my client's branding colors!

[Frank-Pixelpusher]

same for me +1

[bobulated]

Yes, the plugin and UI are very nice but definitely would be great to have the ability to easily create and add custom colors.

[stephanie-walter]

+1, same here, if a button is not an option maybe just being able to add all the document colors as new swatch?

[tjmcwhiskers]

Is there any news on if this is going to happen?

[basedoncarbon]

Ok, so I am no programmer, but I've gotten pretty far on adding code to this plugin so I can add my own swatch file. I'll outline it below, and I also request HELP on the final part, which is getting the rows to have 16 swatches across. I just can't figure that out.

To make your own swatch file:

• Copy Swatches.sketchplugin
• Right-click the copied Swatches.sketchplugin, choose “Show package contents”
• Find a swatch color file to copy in Contents > Resources. I had copied the Google Material Design file because it had 15 swatches across, and I needed 16
• Keep your file in the same folder. I replicated the naming convention of the color files by adding “_colors” after my chosen name. Not sure if that matters?
• In the new file, replace “var init_material_design_colors = function(title) {“ with “var init_YOUR_FILE_NAME_HERE_colors = function(title) {"
• In Resources, open swatches.js and copy/paste a section (make sure you include the brackets and stuff). Then change the line from "title" : "Google Material Design", to
  "title" : “Your Name Here“, and change "handler" : "init_material_design_colors" to "handler" : “init_YOUR_FILE_NAME_HERE_colors”
• In index.html under the Resources folder, search for script src="colors/material_design_colors.js" and copy/paste. The order here determines the order in the Sketch plugin interface. Put your name in there like this: script src="colors/YOUR_FILE_NAME_HERE_colors.js"
• Then find the Swatches.sketchplugin file and double-click to install (in figuring this out through trial and error, I have had to delete the plugin via the Manage Plugins menu item and then restart Sketch in order to get things to work right).

This is the swatchbook I am copying. It is one the swatches installed in Photoshop/Illustrator called Visibone. I like it because it is arranged sort of like I would arrange paint on a physical palette.

So, this is the Google Material Design swatchbook that I was using as a template:

And this is my file. I only made one line of the Visibone colors, as I didn't want to waste time on this if I couldn't make it work. Remember that the Material Design swatchbook has rows of 15 swatches max, and that the Visibone swatchbook has 16 swatches across? Well, you can see that there is a "blank" line under the first row of colors. It's the row wrapping.

This is the part I can't figure out, how to tell the plugin the maximum number of swatches across, as the swatch interface window is not resizable. This is also important if you, gentle reader, want to make your own swatch file.

Help!

[basedoncarbon]

STOP THE PRESSES!

I fought through the whole thing only to fail at the 1yd line. Thanks to a friend, all you do is use a smaller px dimension in your color file. In my case, the material_design_colors.js file used 24px at its dimension. Changing all four instances to 22px solved my problem.

Yaaaa!