Supernova is a design system platform that manages your assets, tokens, components and allows you to write spectacular documentations for your entire teams. And because you found your way here, you are probably interested in its most advanced functionality - automatic hand-off of design and development assets, tokens and data in general. To learn everything Supernova, please check out our developer documentation.
The Design Tokens Format Module Exporter allows you to convert Supernova tokens and styles into design token module format by W3C DTCG, so you can freely integrate them with other tools supporting this format. You can generate DTCG format definitions either manually - on demand - using Supernova's VS Code extension, or automate your code delivery pipeline using Supernova Design Continuous Delivery.
Once you have run the exporter against your design system, you can start using the code in your codebase right away. Exporter creates the following definitions:
-
colors.jsoncontaining all colors tokens -
typography.jsoncontaining all typography classes -
shadows.jsoncontaining all shadow tokens -
gradients.jsoncontaining all gradient tokens -
measures.jsoncontaining all measure tokens -
radii.jsoncontainin all radius tokens
Each of the .json files can be used inside other tools. The exporter properly follows the structuring of the tokens inside respective categories, adding groups as nesting inside the definition:
{
"color": {
"ui-elements": {
"primary": {
"$value": "#4589ffff",
"$type": "color"
},
"success": {
"$value": "#00a454ff",
"$type": "color"
},
"critical": {
"$value": "#d23031ff",
"$type": "color"
}
}
}
In this case, critical token was defined inside Colors category, in success group. Of course, the exporter also properly exports references when you used token aliasing inside Supernova:
{
"color": {
"ui-elements": {
"primary": {
"value": "#4589ffff",
"type": "color"
},
"primary-copy": {
"value": "{color.ui-elements.primary.value}",
"type": "color"
},
}
}
Finally, if you are tokens using mixins - such as using measure tokens inside typography, the exporter draws from those as well and will properly export all references, even across different definition trees. This way, everything you defined in Supernova is always exported.
If you are using token descriptions, the exporter includes them under comment key:
{
"text": {
"welcome-screen": {
"sign-in": {
"$value": "Please Sign In",
"$type": "text",
"$description": "Use this everywhere user creates a new account"
},
"sign-out": {
"$value": "Sign Out from the application",
"$type": "text"
},
"forgot-password": {
"$value": "Did you forget your password?",
"$type": "text"
}
}
}
}
Multi-line descriptions are also supported, and will be exported with \n where newline occurs. If the token doesn't have a description, the comment key is not generated.
- Typography tokens exports only values that are supported by the Design Tokens Format Module, not for all typography properties that we have in Supernova. Missing typoraphy values: (tbd)
In order to make the Supernova Design Tokens Format Module exporter available for your organization so you can start generating code from your design system, please follow the installation guide in our developer documentation.
In order to faciliate easy communication and speed up delivery of fixes and features for this exporter, we require everyone to log all issues and feature requests through the issue tracking of this repository.
Please read through the existing issues before you open a new issue! It might be that we have already discussed it before. If you are sure your request wasn't mentioned just yet, proceed to open a new issue and fill in the required information. Thank you!
If you have an idea for improving this exporter package or want a specific issue fixed quickly, we would love to see you contribute to its development!
There are multiple ways you can contribute, so we have written a contribution guide that will walk your through the process. Any pull requests to this repository are very welcome.
Would love to help us build more but maybe need a little bit of support? Join our community and drop us a message, we will support any of your wild ideas!
This exporter is distributed under the MIT license. We absolutely encourage you to clone it and modify it for your purposes, so it fits the requirements of your stack. If you see that you have created something amazing in the process that others would benefit from, we strongly recommend you consider publishing it back to the community as well.
- To learn more about Supernova, go visit our website
- To join our community of fellow developers where we try to push what is possible with design systems and code automation, join our community discord
- To understand everything you can do with Supernova and how much time and resources it can save you, go read our product documentation
- Finally, to learn everything about what exporters are and how you can integrate with your codebase, go read our developer documentation
We are developing and maintaining exporters for many major technologies. Here are all the official exporters maintained by Supernova:
- iOS Token & Style Exporter
- iOS Localization Exporter
- Android Token & Style Exporter
- React Token & Style Exporter
- Flutter Token & Style Exporter
- Angular Token & Style Exporter
- Typescript Token & Style Exporter
- CSS Token & Style Exporter
- LESS Token & Style Exporter
- SCSS Token & Style Exporter
- Style Dictionary Exporter
Additionally, you can also use asset exporters for all major targets, enjoy!:
- SVG Asset Exporter
- PDF Asset Exporter
- PNG Asset Exporter
- iOS Asset Catalogue Exporter
- React Native Asset Exporter
- Android Asset Exporter
- Flutter PNG Asset Exporter
- Flutter SVG Asset Exporter
To browse all exporters created by our amazing community, please visit the Supernova Exporter Store.