Style Dictionary transforms and configurator

Поделиться
HTML-код
  • Опубликовано: 23 мар 2023
  • Many of you have faced/are facing the challenge; The Style Dictionary pipeline from the Tokens Studio JSON to code. To make this a lot easier we have been working on 2 cool project that should make life a lot easier!
    👉 Style Dictionary Transforms [beta]:
    A dedicated package of style dictionary customer transforms that does all the heavy lifting for all token types that can be created in Tokens Studio.
    👉 Style Dictionary Configurator [beta]:
    To make it even more easy to get started, we built a real-time playground where you can import your tokens, define output targets for different platform and generate tokens automatically and validate the output in real-time. It even detects themes if you have them defined and generates separate outputs for each theme. The playground uses the SD Transforms package mentioned above.
    🛠️ Try the configurator: configurator.tokens.studio/
    🛠️ Use the SD Transforms: github.com/tokens-studio/sd-t...
    📣 We always love your feedback! If you have any, make sure to let us know in the dedicated channel on our Slack (tokens.studio/slack): #style-dictionary-configurator
    💡 Install on Figma: www.figma.com/community/plugi...)
    🚀 Subscribe to our channel: / @tokensstudio
    💬 Join our Slack: tokens.studio/slack
    📄 Docs at: docs.tokens.studio/
    ℹ️ More information on www.tokens.studio

Комментарии • 6

  • @aysamuel1347
    @aysamuel1347 8 месяцев назад

    The themed section was informational for me.
    Please my question is, in the example it was a themed folder, what would the settings look like if they are all in a single file and the core, light, dark are parents rather than a separate file of its own. I have similar situation

  • @renatebrokelmann2749
    @renatebrokelmann2749 10 месяцев назад

    for me it only works in Safari. Could you provide any hints for a Style Directory configuration for Tailwind CSS, that works with the Token Studio output?

    • @TokensStudio
      @TokensStudio  10 месяцев назад

      You can checkout this example: t.ly/tqjpd
      For a more elaborate answer I would redirect you to our Slack channel (tokens.studio/slack), where there are more discussions around this topic

  • @vaanresvaanica
    @vaanresvaanica 11 месяцев назад

    Guys, I export tokens from Token Studio Plugin in Figma, but when I imported to Style Dictionary Configurator, this tool can't generate the output file

    • @TokensStudio
      @TokensStudio  11 месяцев назад

      hey, I think you overlooked the step mentioned here, which should solve your issue: ruclips.net/video/dr3RWjZ28BE/видео.htmlsi=2UIRvpg07q8cdK83&t=110
      Additionally we have a separate group on our Slack community (tokens.studio/slack) about this topic #style-dictionary-configurator

  • @sreerammounika7722
    @sreerammounika7722 4 месяца назад

    will this work in react native?