tokens.json file - how to?

[lmormol]

Hi 👋

examples/adobe/tokens.json

I'm wondering how did you generate such a beautiful JSON file like this ? 🤔

Is there a possibility to see the Figma file with this variables setup ?
Did you use any current existing Figma plugins to create that tokens.json ?

BR, Ł

[drwpow]

No tools; just wrote a Node.js script to pull values from Adobe’s open-source Spectrum code on GitHub and put it in a JSON file. Then went back in and fixed it up manually in VS Code. A lot of ad-hoc string mashing and RegEx 😄

There’s no Figma file, though I am actively working on better Figma tooling to make that export process to design tokens JSON easier.

[lmormol]

Thanks for an answer. I really appreciate your work on Cobalt UI!

One short note for a future readers ...

Few months later I've found Figma plugin called TokensBrücke which started support COBALT UI and allows for an export handling collection modes.

[drwpow]

TokensBrucke is amazing! It’s actually listed in the docs now as a recommended Figma integration (Cobalt probably won’t ever have a Figma plugin, or at least not for a very long time)

[drwpow]

Small update—a lot of the public design systems I’ve moved here—https://github.com/terrazzoapp/dtcg-examples. There’s also a dtcg-examples package on npm for easier consumption.