W3C Design Tokens in CSS using Style Dictionary

Learn how to turn your Design Tokens from W3C format into CSS using Style Dictionary.
0:00 - Intro
02:30 - W3C Design Token Format
03:34 - Style Dictionary tokens
04:02 - Style Dictionary Utils
04:20 - Setting up the project
06:44 - Using Style Dictionary
13:55 - Token aliases
15:07 - Preserve aliases in the output CSS
19:15 - Outro
W3C Design Token Format (Draft): tr.designtokens.org/format/
Style Dictionary: amzn.github.io/style-dictionary
Style Dictionary Utils: github.com/lukasoppermann/sty...
Code: github.com/mryechkin/style-di...
GitHub: github.com/mryechkin
Twitter: / mryechkin

[@LauraChan-lr7gw]

Exactly what I needed. Thank you!

[@flightstreamer]

Very useful! Didn’t know it is coming to W3C standards!

[@wollsale]

Very useful, thanks!

[@pedrobatista8966]

Very interesting, did you find a figma plugin that exports in this format?

[@mryechkin]

I just used the official sample "Variables Import/Export" one from Figma: github.com/figma/plugin-samples/tree/master/variables-import-export
But if you're looking for something a bit more advanced, then TokensBrücke looks promising: www.figma.com/community/plugin/1254538877056388290

[@pedrobatista8966]

@@mryechkin this helped thanks

[@andrew_leedham]

Are you using an extension to colour each level of the JSON nesting? It looks so much more readable than the default!

[@mryechkin]

Honestly I'm not 100% sure what's doing that - I don't have a specific extension for this per se. Might be my theme? I'm using the PowerShell Theme (Default) for VSCode