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
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
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?
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
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
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
will this work in react native?