Provide a Craft Library for Sketch

[pugson]

Craft is an amazing plugin suite for Sketch. It includes Library, which is a powerful plugin for saving and sharing styles, shapes, colors, etc.

It would be great to see Open Color ported to Craft Library and making the imports much easier with just a pull of the repo.

[makepanic]

How does it work? Is there a spec that explains what format Craft expects?

[pugson]

I haven't found a spec anywhere but here's a sample Library structure: Open Color.library.zip

Looks like it's built with JSON and colors have some kind of decimal RGBA transcript.

Main metadata.json 👇

{
  "name": "Open Color",
  "modificationTime": 1491135549605,
  "categories": [{
    "name": "Uncategorized",
    "type": "layer",
    "index": 0
  }, {
    "name": "Colors",
    "type": "color"
  }, {
    "name": "Text Styles",
    "type": "textstyle"
  }]
}

Particular color metadata.json 👇

{
  "color": {
    "r": 1,
    "b": 0.2313725490196079,
    "g": 0.8313725490196079,
    "a": 1
  },
  "name": "OC Yellow", // optional custom name
  "category": "Colors", // section where this is displayed, Library allows for saving files and text styles as well
  "index": 1 // position on the list
}

[makepanic]

Hey thanks. From what I can tell:

• /metadata.json looks static
• each color has its own directory (/${UUIDv4}.color/metadata.json)
• each color uses template:

  {
  "color":{"r":${255/r},"b":${255/b},"g":${255/g},"a":1},
  "name":"${name}",
  "category":"Colors",
  "index":${index}
  }

• name field is optional

@dubstrike does craft library expects a zip file to import a color scheme?

Also do you think that we could remove the type: layer and type: textstyle objects from the root level manifests categories?

I'll see if i can build a generator tomorrow and upload a dummy archive. It would be great if you could test if it works.

[pugson]

Awesome, looking forward to it! @makepanic

I zipped it up just for sharing. Craft imports/exports a folder named Open Color.library

[makepanic]

Could you maybe export craft colors twice and see if the uuid of each color changes? I'd like to know if it's random or if they're reproducable .

[pugson]

@makepanic The UUIDs remain intact after I import the library again and start modifying it. Craft is reading and writing to that Open Color.library folder.

I just noticed there is a group functionality for colors. Here's a sample with groups: Open Color.library.zip

This is how it looks in the app:

[makepanic]

Here's the first version of the generated craft library directory. Can you check if it's possible to import it?

open-color-craft.zip

If there's things we could improve like color names, please tell :)

edit: looks like i've interpreted secondaryIndex and index wrong. edit2: i think now i've got it

The pattern inside groups is like

secondaryIndex++
  index = 0
  index++
  index++
secondaryIndex++
  index = 0
  index++
  index++

Thanks to the anonymous time donor that opened the archives I've generated 💯 edit3: i forgot black and white

It should look something like this:

@yeun do you have any additional suggestions?

[pugson]

@makepanic It works perfectly! Thanks for working on this.

Looks like it's ready as a PR unless @yeun has any comments.

[pugson]

One suggestion I have is locking the whole tree in the metadata.json file, so that the colors are not editable inside Craft, unless you click on the "unlock" icon. It might prevent accidental changes while using Sketch.

{
  ...
  "categories": [{
      "name": "Colors",
      "type": "color",
      "locked": true
  }],
  "name": "Open Color v 1.5.1",
  ...
}

[makepanic]

I've added locked: true to the colors category:

open-color_1.5.1.library.zip