Example showing how to transform design tokens into color palettes usable by designers
This is an example showing how to transform Design tokens into color palettes usable by designers:
.sketchpalette
: Sketch (with the sketch-palettes plugin).ase
: Adobe Swatch Exchange (Photoshop, Illustrator).clr
: macOS color paletteThis repository uses Material Design Colors as an example. Follow these steps to generate palettes with your own colors:
In a terminal, type:
git clone https://github.com/kaelig/tokens2palettes-example
(or clone your own fork of this repository)
Open package.json
and change the value of palettename
to something else:
"config": {
"palettename": "Material Design"
},
Define the color palette in ./tokens/colors.yml
following the design tokens specification.
Generate the color palettes:
yarn
yarn dist
Thats it! Color palettes are in the ./dist
folder.
./tokens/colors.yml
. Custom formats for ase
and sketchpalette
are passed to the Theo v6 command line interface, which does the rest and outputs files to ./dist
.ase2clr
takes the ase
file and exports it into a clr
filecolors.*
files something more human-friendly that designers will appreciate.