How to name things to integrate with Style Dictionary

[dbanksdesign]

Forking the conversation from #40, using this as a thread to discuss how to name things in a Sketch file to integrate with Style Dictionary.

To start, there are many different ways to do this, depending on how you want to both structure your Sketch file and your Style Dictionary tokens.

1 Using shared styles

This is a bit more limiting because you are limited to the types of information that you can store in a shared style or color swatch. This is easier to implement the parsing mechanism, because these are just stored in arrays in the document.json (Document class) in a Sketch file. You can get the data, massage it and send it to Style Dictionary.

2 Using pages, artboards, and groups

For this, you can create a nested structure where pages become the top-level namespace, artboards inside each page are the next level down, and groups are all the rest of the object structure until you get to a group with some signifier, like a text layer named 'value' and the text in the layer is the actual value, like the color or font size. This is a bit more complex because you will need to build an object from walking down nested classes, but is more flexible.

I'll see if I can get a working example for each of these