No video

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

Пікірлер: 9

  • @mohit-tater
    @mohit-taterАй бұрын

    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.

  • @LauraChan-lr7gw
    @LauraChan-lr7gw3 ай бұрын

    Exactly what I needed. Thank you!

  • @flightstreamer
    @flightstreamer8 ай бұрын

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

  • @wollsale
    @wollsale4 ай бұрын

    Very useful, thanks!

  • @pedrobatista8966
    @pedrobatista89663 ай бұрын

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

  • @mryechkin

    @mryechkin

    3 ай бұрын

    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

    @pedrobatista8966

    3 ай бұрын

    @@mryechkin this helped thanks

  • @andrew_leedham
    @andrew_leedham4 ай бұрын

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

  • @mryechkin

    @mryechkin

    3 ай бұрын

    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