Figma tokens & CLI!

What better way to celebrate the announcement of new investment and Product Hunt launch than with release of by far the most requested feature - integration with Figma Tokens plugin and token CI/CD pipelines!

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.

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!

Primary
#4589ff
#ffffff
Success
#00a454
#008141
Critical
#d23031
#9e2122
Warning
#e36b00
#ba4e00
Upgrade
#9f78ed
#874ce6

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:

#4589ff
#ffffff
Primary
Primary interactive color
Token set
Semantic
Themeable
React Name
colors.semantic.primary
#00a454
#008141
Success
Success states, Confirm actions
Token set
Semantic
Themeable
React Name
colors.semantic.success
#d23031
#9e2122
Critical
Failure states, actions which can not be undone
Token set
Component
Themeable
React Name
colors.semantic.critical
#e36b00
#ba4e00
Warning
Use when something is wrong but not critical
Token set
Component
Themeable
React Name
colors.semantic.warning
#9f78ed
#874ce6
Upgrade
✏ Use for upgrading plan
Token set
Component
Themeable
React Name
colors.semantic.upgrade

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!