- Notifications
You must be signed in to change notification settings - Fork47
Creates a beautiful artboard color palette with all your 'Document Colors' and their respective color label in a variety of formats.
License
ment-mx/Prism
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
|Download |Features |Usage |Customization |Changelog |Next |Contribute |Credits |
(FormerlyShareableColorPalette)
Creates a beautiful artboard with all the colors in yourDocument Colors
with its respective color label in a variety of formats.(Sketch41)
Important: Make sure to download version 1.0.3 or higher to use Sketch 45 plugin auto updates. 😎
- 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.
- Install plugin.
- Add your colors to yourDocument Colors.
- Run command[ctrl cmd c].
- Voilà!
To change the color alias, just change the text on theName layer. If you want the default color name, just delete the text on that same layer.
- Select the colors you want to export(optional)
- Click
Export Selected Colors
[ctrl cmd s] orExport All Colors
[ctrl cmd e] - Select the format to export.
- Save your color code file or copy the colors to clipboard.
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 templatemust 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 exactlyColor
, 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 atext layer named exactlyName
(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 theCell.coffee
andTemplate.coffee
files.
- Create a new formatter Coffeescript file inside
src/formats
- Create a subclass of
FormatterBase
for your new formatter class. - Overrides some methods defined in
FormatterBase.coffee
.id
andname
are required to override.- If you plan to one text based format file like
HexFormatter
, thenformatText
andformat
required to override.
- If you plan to one binary format file like
CLRFormatter
, then- You need to override
supportClipboard
to returnfalse
- You need to override
exportAsFile
.
- You need to override
- If you plan to export several files like
ColorSetFormatter
, then- You need to override
type
to returnEXPORT_TYPE_FILES
- You need to override
SeeFormatterBase.coffee
for details.
I have included acompile.sh
file that automatically compiles all the files inside thesrc/
folder into thebuild/
folder, however, if you add new files you must import them in the right order inside thePrism.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 coffeescript@1.12.7
You can then run thecompile.sh
file by typing this in the terminal inside thePrism.sketchplugin/Content/Sketch
folder:
./compile.sh
- Gradients support
- Better template selection
- Lalo &Adrxx:Creators
- griffin-stewie: New format structure
- Special thanks toGauth for his color classifier and dataset.
About
Creates a beautiful artboard color palette with all your 'Document Colors' and their respective color label in a variety of formats.