W3C Design Tokens in CSS using Style Dictionary
Вставка
- Опубліковано 6 сер 2024
- 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 - Наука та технологія
This is really useful. I wasn't aware of the style dictionary tool. I'm working on a Figma plugin, and this will be a useful tool for some functionalities that I want to implement there. Thanks for making this video.
Very useful! Didn’t know it is coming to W3C standards!
Exactly what I needed. Thank you!
Very useful, thanks!
Are you using an extension to colour each level of the JSON nesting? It looks so much more readable than the default!
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
Very interesting, did you find a figma plugin that exports in this format?
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
@@mryechkin this helped thanks