ment-mx/prism

Creates a beautiful artboard color palette with all your 'Document Colors' and their respective color label in a variety of formats.

| Download | Features | Usage | Customization | Changelog | Next | Contribute | Credits |

(Formerly ShareableColorPalette)

Creates a beautiful artboard with all the colors in your Document Colors with its respective color label in a variety of formats. (Sketch 41)

Important: Make sure to download version 1.0.3 or higher to use Sketch 45 plugin auto updates. 😎

---

Features

• Beautiful color palette generation.
• Automatic color naming.
• Fully customizable.
• Export as code in a variety of formats (CSS, SASS variables, Swift, etc).
• Color renaming (Alias).
• Rebuilt from the ground up using Coffeescript and love.

Usage

1. Install plugin.
2. Add your colors to your Document Colors.
3. Run command [ctrl cmd c].
4. Voilà!

Changing a Color Alias

To change the color alias, just change the text on the Name layer. If you want the default color name, just delete the text on that same layer.

Exporting Colors as Code

1. Select the colors you want to export (optional)
2. Click Export Selected Colors [ctrl cmd s] or Export All Colors [ctrl cmd e]
3. Select the format to export.
4. Save your color code file or copy the colors to clipboard.

Customization

Under the Prism menu, there's an option called **Show Template File...** that opens the Template.sketch file located under the Prism.sketchplugin package, this file contains all the layers that are used as templates and are later copied over to your palette.

Changing Palette Template

The template file is a normal sketch file that has multiple pages, each page with its own cell Template, you can add or remove all the pages you want to manage your own templates, to select the style you want just open the file and save it on the page your desired template is. Now just generate your palette to see the changes.

Editing Template

Prism offers a lot of freedom to let you customize your own templates, however, in order for your template to play nicely with Prism you just have a few restrictions:

• Your template page must have only one artboard layer that is exactly named Prism Palette, users can then change the name of the artboard once the palette is generated in their sketch files. Your cell doesn't have to be inside this artboard, but it would be good practice, as future releases may use this cell-inside-artboard to specify the spacing between cells.
• Your template must have a layer group named exactly Cell, everything that your cell includes must be inside this group, you can then go ahead and add as many groups as you like inside of it ;)
• Inside the Cell group there must be a layer named exactly Color, it must have at least one solid Fill and this fill must be on the bottom of all the other fills, this layer is the one that Prism uses to display the real color.
• Inside the Cell group there must be a text layer named exactly Name (lol), this is the layer that Prism uses to display the automatic name and can be edited to add or remove aliases.
• Prism uses the name of the text layers to format the color of the cell, for example: if there's a text layer named "RGBA_CSS", prism will try set the layer's text value to the specified format.

You can have as many text layers for formats as you want. Also, layers can be locked or invisible as long as they conform to this restrictions.

If you wanna dive deeper on this process, you should check out the Cell.coffee and Template.coffee files.

Adding Format

1. Create a new formatter Coffeescript file inside src/formats
2. Create a subclass of FormatterBase for your new formatter class.
3. Overrides some methods defined in FormatterBase.coffee.
   • id and name are required to override.
   • If you plan to one text based format file like HexFormatter, then
     • formatText and format required to override.
   • If you plan to one binary format file like CLRFormatter, then
     • You need to override supportClipboard to return false
     • You need to override exportAsFile.
   • If you plan to export several files like ColorSetFormatter, then
     • You need to override type to return EXPORT_TYPE_FILES

See FormatterBase.coffee for details.

Contribute

The best way to get things done is by doing them yourself, if you want to specify a format or a add a new feature or fix a bug, just submit a pull request!

I have included a compile.sh file that automatically compiles all the files inside the src/ folder into the build/ folder, however, if you add new files you must import them in the right order inside the Prism.cocoascript file.

You will need coffescript v1 for the plugin to work as v1 compiles to EC5 syntax accepted by cocoascript

You can easily install it with npm by running this: npm install --global [email protected]

You can then run the compile.sh file by typing this in the terminal inside the Prism.sketchplugin/Content/Sketch folder:

  ./compile.sh

What's next

• Gradients support
• Better template selection

Credits

• Lalo & Adrxx: Creators
• griffin-stewie: New format structure
• Special thanks to Gauth for his color classifier and dataset.

prism's Issues

There are no colors on your Document color

Hello
I am getting this error while generating colors.
"There are no colors on your Document color"

Even I am using colors. I don't know what happened. Please guide I have attached screenshot.
using latest Sketch 48.2 and macOS high Sierra.

don't work on sketch 39.1

yes.

[Feature Request] Integrate with Sketchpacks Relay to serve auto-updates

More details found @ https://github.com/integration/sketchpacks-relay

Example

json format export?

Would be nice to have a json format export option as well.

Fails With Masking - Can we get support for Masks / Complex Shapes?

Hi!

First off love Prism. Really loving how powerful it is for making swatch sheets. This is great.

When trying to make templates can support for masking the "Color" fill layer be added?

However - maybe the issue is using compound shape masks? I'll detail what I'm trying to accomplish below - clearly I hope.

It fails to generate if you do the following (sorry for excessive detail):

• Install Prism
• Edit Template
• Duplicate "Android" Template
• Rename to "New Android"
• Duplicate "Color" Fill Layer
• Rename dupe "Color" Fill Layer to "CardHeader"
• Delete android Backing
• Take android icon and "CardHeader"
• Combine them to make a mask
• Stretch "Color" Fill Layer to "fill/colorize" android icon and "CardHeader"
• Save Template
• Generate in File
• Does Nothing
  • (if existing prism palette artboard exists its erased.)

Multiple Palettes

Some projects I deal with have hundreds of colors (they are for sports team colors in a league)

It would be handy to be able to create a palette for each level of named colors defining them using the standard Sketch hierarchy of using /'s, i.e.

• Team 1 / Color 1
• Team 1 / Color 2
• Team 1 / Color 3
• Team 1 / Color 4
• Team 2 / Color 1
• Team 2 / Color 2
• Team 2 / Color 3
• Team 3 / Color 1
• Team 3 / Color 2
• Team 3 / Color 3
• Team 3 / Color 4
• Team 3 / Color 5
• Grays / Gray 1
• Grays / Gray 2

Would output 4 palette artboards

• Team 1 would have 4 color chips
• Team 2 would have 3 color chips
• Team 3 would have 5 color chips
• Grays would have 2 color chips

omit duplicate colors

can you make the plugin more great?
please omit the duplicate colors
see this:

I use the color white to organize my colors in the picker

thanks!

Different hex code than in Sketch color panel

Hi, and thank you for this nice plugin!

I noticed that hexadecimal values are sometimes different between Sketch color palette, and the palette artwork generated by Prism.
For example:

• rgb(72, 119, 143) is hex coded as #48778F by Sketch, and coded as #48768F on the palette artwork generated by Prism.
• rgb(184, 214, 230) is hex coded as #B8D7E6 by Sketch, and coded as #B7D6E5 on the palette artwork generated by Prism.

Is it possible to ensure that all codes are the same between Sketch and Prism?

Thanks a lot!

Sketch Version 3.7.2

Hi, Do you have an issue with that plugin and the current Sketch Version 3.7.2?

Here you see what happens

Export Color not working

Hello,
the function that allow you to export color code is not working (neither copy to clipboard nor save to file) on Sketch 47.1 and High Sierra.
Is it normal? It's hard to fix?

Using named colors

Now that we can name colors in Sketch 53 it would be great if Prism could use those colorises the color names. PS Than for making it 53 compatible :)

PMS

Might be a bit tricky to do but it would be cool if it had PMS colours too to help print producers understand a digital palette.

Templates

Using slash separated values for colors means that the color names can end up being quite long and might not fit in the space of the template.

Being that Sketch now supports auto layout in Symbols would it make sense to make the templates actual Symbols?

I am also unsure on how to generate a palette from the other Symbols, maybe it would be good to be able to configure the name of the template to use in the plugin?

export to xml or java code not working in v.43

export to xml or java code not working in v.43

it exports a file but its blank same for copy to clipboard

Sketch 45.2 generate only Black color

Support Sketch 45 plugin update system

Hi there!

This is a quick note to remind you that Sketch 45 will include a plugin update system.

It would be awesome if you could add support to it (it's really easy!) before Sketch 45 comes out. Ideally, you should release an update for your plugin while we're still in Sketch 44, so your users will have a nice & easy experience when 45 is released.

For more details, please check http://sketchplugins.com/d/229-updating-plugins and http://developer.sketchapp.com/introduction/updating-plugins/

Thanks in advance!

Doesn't work with Sketch 69 color variables

Prism seems to ignore color Variables (that now replace Document Colors)

It reports: "There are no colors on your Document Colors."

Sketch 53 support

When I try to use any feature of Prism in Sketch 53 nothing happens.

Exported Sass variable names includes apostrophes

When exporting color as Sass variables, the color name, e.g. Payne's grey has its apostrophe included in the Sass variable name which breaks in Sass.
E.g.
$payne's-grey: #414141;

Instead of the expected:
$paynes-grey: #414141;

I would except the Sass variable names to have special (Sass breaking) characters stripped out. Whilst it's certainly easy to manually edit the names to fix it, some people might find it confusing when the Sass output doesn't conform to Sass standards.

Thank you for a great and time-saving plugin!

The plugins doesn't work even after delete it and re-install it

Hi,

First of all I'd like to say that this is a great, amazing, time-saving plugin !
I have an issue : When I firstly installed it everything worked perfectly but now, even after launching the script by shortcuts or the Prism menu nothing works. I delete it and installed it again and again and nothing works,

Is there an error log file that I can check ?

not work! not work!

The plugin does not work. Sketch 42

Broken in Sketch 44.1

Hi,
It seems the plugin is broken in Sketch v44.1. Nothing happens after choosing "Generate color palette" from the menu…
I was looking forward to the "fixed hex values" update :(
Any idea?
Thank you,

text colors not getting populated

sketch 53

Only shape colors listed out text colors are not there
EDIT: it seems it only enlists colors added manually to document

WCAG compliance

Wonder if there is a way to nicely show the level of contrast re WCAG 2.

Could be:

• color on white background
• color on black background
• white on color background
• black on color background
• small size
• large size

Issue with Version 41.1 (35376)

Hey Guys,

Seriously the best Sketch Plugin in the world.

I'm having issues with Version 41.1 (35376) and can't seem to get Prism to work. I had a previous version installed, and downloaded the newest version. I installed it, which replaced the previous version. I don't get any error messages but I'm willing to help track down any errors if need be.

Generates invalid variable names

The name generated for my color was called "St. Patrick's blue". Prism then generated the following scss variable name: $st.-patricks-blue: #1A237E;. The "." in "St." is an invalid character.

Prism is not working

Sketch Version 41.2 (35397)

doesn't work with sketch 40.2

I love this plugin. But now with version 40.2 it doesn't work. Any idea?

Prism not working in Sketch 42.

Just installed the plugin and watched the video for how it's supposed to work. I have my document colors loaded, when I choose "Generate Color Palette", nothing happens. I have uninstalled the plug-in, reinstalled, quit and relaunched Sketch, still nothing. I even went so far as to turn off other plug-ins thinking there could be a conflict. But that didn't work either.

Images aren't displaying

All of the images on the page are not displaying. Please fix, anxious to see the plugin in action

Doesn't appear to work with 41 (35326)

Unable to generate sass file

Hiya,
thankyou for making this plugin! I have created the color palette and it all works fine hoveever, when i try and save the sass file from > generate sass file. However when i go to folder where its meant to save, its not there? Could you please help me :(

Color Renaming on Palette Regeneration

Hi Team,

First of all, this is awesomeness! Quick question:

Is there a way to maintain the custom names I'm giving the colors that are outputted in the artboard? For example, if I rename "Teal" to "Primary 1" on the output artboard and proceed to add another color to the document colors > regenerate output artboard, then "Primary 1" changes back to "Teal" even if I've locked the layer. Perhaps I'm missing something or doing something incorrectly. Thoughts?

Thanks!

• AK

Request: HSLA Export

Hey, there, amazing plugin, thanks for doing it!
Is there any plans to allow HSLA values as a Format on the Cell Templates and exportable files?
I would like to see and export HSLA values to then add them to YAML files on a project i'm working on but i am a designer, so have no idea how to do this..
Thanks

not working with sketch v43.2

Sketch Version 3.8.3 (29802)

Is there an update for Sketch Version 3.8.3 (29802)? The plugin stopped working before this patch even on a un-install/re-install.

Android export not as good as needed

Hi there,

thanks for your plugin. I am an Android developer, and I want to tell you our needs.

In Android it is very common to place the assets next to the code. So colors are defined in XML. Your export only suits the JAVA code, not the XML.

In more details we need something like this: https://developer.android.com/samples/BasicMediaRouter/res/values/colors.html

Maybe you can help us?

Greetings,
DaRolla

Add support to export as osx .clr file

Would be great. Thanks!

It would allow to integrate nicely with https://github.com/mac-cain13/R.swift