Here's an idea that I'm currently developing...
A @storybookjs addon that extracts the Style Dictionary-friendly design tokens out from the current story.
Here's why this is helpful:
1) For documentation (without having to jump back and forth between Style Dictionary).
2) For allowing teams to build UI components as usual, copy and paste the underlying, agnostic tokens into a tool like Style Dictionary, and then format them for sharing with other teams.
This flips the traditional approach to a design tokens pipeline. Instead of generating your tokens first, and then consuming them in your UI library, you can create the UI library first and then extract the tokens.
In a word, you can reverse engineer a design tokens pipeline.
This may not be an ideal use case or best practice, but it could be helpful in SOME cases (i.e. a team that only has a UI component library, no formal design system team, and wants to quickly get a Style Dictionary pipeline going.)
Here's the WIP: github.com/michaelmang/addon-kit
Created the addon, here's the diff that summarizes how I built this: github.com/michaelmang/storybook-tokens/commit/e86294e73870b015455cc5bf15cc18296c306abc
Michael Mangialardi
@michaelmangial1
Christian | Frontend Engineer | Design Systems Engineer. 📚 Author of “Design Systems for Developers” and "Rethinking Agile"
