mastodon.world is one of the many independent Mastodon servers you can use to participate in the fediverse.
Generic Mastodon server for anyone to use.

Server stats:

8.5K
active users

#designtoken

0 posts0 participants0 posts today

Our #DesignSystem's #DesignToken pipeline has become more of a hydra...

Figma vars & styles
|
+-> DTCG file
|
+-> CSS custom properties
+-> CSS utility classes
+-> Storybook stories for util classes
+-> TS code
+-> TS interface

...and there's more to come: React Native components, docs, etc.

Also, longterm I want to make Figma an output from the DTCG file (or have some kind of 2 way sync), rather than it being the source.

I know it's been done a million times (incl. a few by my past self), but it still feels like magic when demoing a #DesignToken pipeline.

In our case, the demo was:
- Static HTML, React & Angular web apps are all open in browser windows, displaying some of p
our #DesignSystem components
- An Android emulator running a React Native app, also using DS components, is open too.
- I open a Figma library, edit the color of a variable
...

Quite pleased with the #DesignToken pipeline I've just cobbled together:

Figma vars ➡️ Tokens Brücke ➡️ DTCG file in a git repo ➡️ Cobalt UI (configured to output CSS vars) ➡️ PostCSS (with CSSNano) ➡️ CSS file

The hard part was that our source Figma lib has *multiple* modes AND I wanted the final output to only include semantic tier tokens (so all the brand-specific color ramps and whatnot are just internal implementation details of our theme). Had to make a custom Cobalt plugin for that.

Thinking about #DesignToken documentation lately as we'll be doing a lot of that at work soon.

Have you seen any great examples? What about them stands out to you?

Beyond the obvious listing tokens with names, descriptions and previews, what *else* are people doing?

For themeable systems there are potentially different audiences too:
- theme makers
- component implementers
- componnent consumers trying to tweak styling

How do you help each find what they need to know?