This version was released on November 16, 2022
Today, we have proudly announced a new investment into Supernova and we have also launched our new Token Manager on Product Hunt! Therefore, we feel it is about time we finally released the most requested feature to date, integration with Figma Tokens plugin. Enjoy!
Introducing: Supernova CLI
We have just released a new Supernova CLI utility - This utility allows you to run a unique command supernova sync-tokens in your terminal OR in any code pipeline (CI/CD). We have big plans with the CLI going forward, but what does it do today?
Introducing: Figma Tokens integration
The CLI utility allows you to take JSON definition of tokens in Figma Tokens plugin format (either in single-file or multi-file mode) and synchronize them with your Supernova design system, fully automatically, and works well with tokens, brands and even themes we are announcing today as well!
The integration can also be embedded into your existing pipelines, such that when you push a new token changes into your repository through Figma Tokens plugin, they'll be immediately synchronized with Supernova as well, propagated to your documentation and everywhere else you are using them.
Because the integration can do many great things, we have prepared a standalone tutorial that walks you through all its options and intricacies. You can read the tutorial here.
However, we have felt that most workflows already use version control provider and commit JSON definition into their codebases, so we assume the newly introduced CLI will still be the most used option going forward. Stay tuned!
CLI <> GitHub workflows
We have taken great care to make sure the new CLI works in every environment you might need.
As a first properly documented example, we have created a full GitHub Workflow that you can just configure and copy-paste into your GitHub pipeline, which will immediately start synchronizing your tokens as you push changes to your repository.
We'll be releasing documented workflows for all remaining Figma Tokens-supported version control providers, for now, enjoy the first tutorial! You can also visit a fully configured repository with GitHub Actions pre-defined so you can see how the integration works in practice.
Introducing: Theme visualisation!
With the addition of themes, we are also super excited to bring improved rendering of the tokens to support the themes as well. All token blocks within your documentation were enhanced with the new option to apply themes alongside existing brands and rendering variants:
If you select a theme to show, the tokens will show a split view mode with the default value of token, plus the value with applied theme of your choosing.
Upon rendering, those 2 columns will show up depending on your configuration. We love the stack variant of token rendering, so here is a preview how such tokens can look like!
Introducing: Token property selectors
Finally, it is now possible to select properties which will show inside the documentation alongside your base token and newly introduced themes. When you combine together everything announced today with features already available, you will get token visualisation that are out of this world:
Onwards to a new chapter of Supernova
That's it for this release, but we'll be back with more soon, there are troves of goodies in store for you going forward. As always, if you'd like to see something new, fixed, or improved, join our Discord community — we're always there and we will happily help you setup the Figma Tokens integration if you need to. You can also request a feature on our Feature Request Portal.
Thank you for your support, we'd not be where we are without you!