Post

Another experiment: I wanted a new representation of my design tokens, so dtgraph draws them as a node graph. One node per token, one edge per reference. A few thousand tokens is hard to hold in your head. Much easier to look at. julien-deramond.github.io/dtgraph/

16/9/26, 1:30 pm2 reposts3 likes

Julien Déramond

@deramond.dev

16 Sept

Drop DTCG files in the browser, nothing to install and nothing uploaded. The layout does most of the work. Tokens settle next to whatever they reference, so the groups draw themselves, and the primitives most of the set points at end up as the biggest dots on their own.

Julien Déramond

@deramond.dev

16 Sept

There's also a CLI, an MDX/Astro component and a Storybook panel in the repo, but they're rough drafts. Everything so far has gone into the graph itself. github.com/julien-deram...

Julien Déramond

@deramond.dev

16 Sept

It's v0.1 and still moving a lot, parsing and graph model both. Every token set I've tested it on is one I already know by heart. If you've got a big pile of real token files, I'd like to see what it makes of them.

kott studio

@kharnaa.bsky.social

16 Sept

one node per token, one edge per reference, such a simple rule and it makes the whole graph legible