Reworked tokens and new data sources!

This is a big one! Totally reworked token managements including custom properties, new visualisation, persistent tokens and more. Also, we’re introducing data sources, a block variants selector, a self-service company monthly plan, component property sorting… the list goes on.

This version was released on October 6, 2022

 

As noted in the previous mini-release, we have been working on something larger for last few weeks and we hope you'll enjoy it as much as we enjoyed building it for you! This is one of the largest releases to date, so let's dive right in

Introducing: Shiny new token management

Token management was reworked from the ground up to solve few problems with the old view all at once. Now, token management can:

  • Relay much more information to anyone managing tokens quickly
  • Allow anyone to easily extend the design tokens with anything else you'd like to document
  • Allow any kind of structure data to be passed to the delivery platform
  • Give us great flexibility to easily extend token features going forward

If you're already using Supernova's component management, you'll feel at home (but you'll feel like that nonetheless, as we really tried to make it as friendly as possible).

New token view

We've completely reworked how the token view looks and is presented:

Compare this to the old view and you'll see the difference right away:

Too much wasted space, and not much information relayed to the editors. Not anymore!

Too much wasted space, and not much information relayed to the editors. Not anymore!

Custom token properties

You might have noticed that in addition to the base values of tokens, you can now also set custom token metadata — or as we call them, custom properties. Custom properties come in different types:

  • Text: Great for naming, descriptions or any other textual information. One such use case could be around different naming for different platforms.
  • Number: Same as text but numeric, such as contrast ratio
  • Boolean: Yes / No option, great for attributes like deprecation
  • Select: "Select one" option once again, but this time from a configurable list of options
  • Code: Similar to text, however, distinguished inside data pipeline with different attributes, so you can process it differently. It's also displayed as code in published documentation.
  • URL: For your notes, tickets, links to a repository, and so on
  • Documentation link: Same as URL but linking internally into the Supernova documentation editor, so you can deeplink to your documentation choices directly from your tokens

Property customization

To make things easier for you, we created some custom properties you can use right away — of course, if you don’t need them, you can delete all of them. The only properties that cannot be deleted are the token name, its value, and its description, as those are required for the core functionality of the cloud, documentation, and delivery pipeline.

You can add, delete or reorder custom properties to your liking

You can add, delete or reorder custom properties to your liking

We also made all token dialogs much simpler. Now, you only edit the values themselves, since all other properties can be edited inline within the tokens tab. See the difference here:

Don't worry if there are too many changes to keep up with — we also added an introduction dialog which appears when you open the new tokens page for the first time on your machine, so you'll get a quick refresher!

Persistent tokens

One small but very important change is that tokens are no longer persistently linked to the Figma files that they're imported from. This means that if you unlink (either intentionally or by accident) any Figma file, your tokens will still stay inside Supernova, where you can delete them yourself.

More token improvements

We' ve also added several improvements that make working with tokens more convenient, such as copying their values directly from the interface. Have fun exploring all these small changes!

New token visualisation

We've polished how tokens are presented in different modes in your user documentation sites. The new token views take advantage of the new data attributes, so you can truly let your tokens (and the data associated with them) shine.

#0b2737
Aqua 1100
Darkest aqua there is
React Name
-
Token set
Core
In settings
Themeable
Status
Deprecated
#193c4d
Aqua 1000
Slightly less aquatic, still deep as an ocean
React Name
-
Token set
Core
In settings
Themeable
Status
-
#265d71
Aqua 900
React Name
-
Token set
Core
In settings
Themeable
Status
-
#316c82
Aqua 800
Aqua with an amazing text-on-white contrast (AAA)
React Name
-
Token set
Core
In settings
Themeable
Status
-
#3a8396
Aqua 700
Aqua with good-enough text-on-white contrast (AA)
React Name
-
Token set
Core
In settings
Themeable
Status
-
#265d71
Accent
Use for primary buttons, links, and selected states
React Name
-
Token set
Semantic
In settings
Themeable
Status
New

We also improved how other token visualisations display on mobile version of your documentation.

Introducing: Data sources

After a lot of feedback, we decided to completely scrap Figma and Documentation source pages and merge them into the single Data source page, which now works as a replacement for both. No more confusion about which design on which page needs to be updated, as everything you need will be seamlessly updated at once, including the documentation!

You can access your data sources from anywhere in Supernova by clicking on the new icon on the left:

Data source modes

Alongside merging all data together into one unified view, we're also introducing a new degree of control over your data. With each linked data source, you'll now be able to decide what content you want to import from it. Simply add a new data source (or edit your existing ones) and choose which content you'd like to start using from it.

Select file to import from, and then decide what content you're interested in

Select file to import from, and then decide what content you're interested in

Background import (finally!)

We have reworked our data update engine to work in the background, both when you request updates manually from the cloud, and when your updates are imported automatically. During any updates, you'll now be presented with new update interface:

Because the entire update now happens in the background, you can leave whatever page you're on, and continue working while your data magically updates and propagates through the entire cloud. Once finished, you'll get a new notification telling you either that your data was properly updated, or informing you if any problems happened during the import:

Finally, you'll also get information about the imported data and what went wrong, if anything. If the import failed for any reason, the loading indicator on the left icon will turn red and stay red until you have fixed the issues.

Import optimizations

We have made several performance improvements to importing, the most important of which is that importing will no longer check files that have had no changes made to them, using a new algorithm we devised specifically for this. This should greatly speed up the import process, especially if you have multiple data sources, multiple brands, or your design system files are very large.

Introducing: Block variants selector

One of our most amazing features (and one of the most overlooked!) is the ability to render documentation blocks in different variants. So, we made it easier to find and use, and you can now select block variants directly in each block that supports it — like token blocks, tabs, components, frames, tables, and so on.

 

Introducing: Self-service company monthly plan

We are continuing our efforts to make onboarding and management as easy as possible, and today we are happy to announce the introduction of a self-service company monthly plan, which gives you all the advantages of our company plan (all our features without any limits), minus SSO, a dedicated account manager, security checklist review and yearly billing (but you can still get all this and more tailored to your company on a yearly plan, of course).

As we really value transparency (we always have, and always will), we are also making the pricing information publicly available, which is $100 per editor seat per month, without any additional hidden fees. There is also a minimum of 3 editor seats on the Company plan, but the number of viewers is unlimited.

We've also made it easy to request the yearly plan once you're ready to make Supernova your permanent design system home!

Component property sorting

It's now possible to sort components using different properties, and we'll be bringing this functionality to the new token view soon as well.

Documentation GIF (re)support

We had to temporarily remove GIF support some time ago, but we are happy to report that it's back, and we can finally start filling our release notes with great GIFs once more.

Ha, ha-ha, ha-ha-ha (get it, Flash?)

Ha, ha-ha, ha-ha-ha (get it, Flash?)

It is now also possible to upload animated gifs as your profile picture as well!

More improvements

But wait, there's more! We've also improved the behavior of the following systems:

  • Clicking outside text fields in dialogs clears the focus properly now
  • Texts in all tooltips are properly aligned now
  • We updated the descriptions for all validators
  • Upgrading from a Team to a Company plan no longer requires you to enter the billing information again
  • A Company plan can be downgraded to Team or Personal one now
  • We updated all descriptions and features once more in accordance with the latest changes
  • The onboarding menu is updated to reflect the changes we did with Data sources page

Bugfixes

The following annoyances were also squashed. Keep 'em coming!

  • Fixed a rare issue which caused Storybook block to not load properly when its URL used
  • Resolved Error initialize Figma API errors, which happened as a result of overloading Figma API. Our system should now be much more optimal, but we're continuing our efforts to make it flawless.
  • We've made extra sure that it is no longer possible to create duplicate design systems
  • The Welcome to Supernova checklist and Zendesk chat icon no longer overlap
  • Flutter exporter exports the Letter Spacing property from typography tokens properly now
  • Search results in frames/assets/components now include groups as well
  • Changing your plan from a monthly to a yearly plan will no longer cause the wrong state under any rare circumstances
  • Trying to downgrade your Company plan to a Team plan no longer throws an error
  • VIEW button no longer disappears if the documentation deployment fails
  • The close button in hover information is now the proper height even when there is more than one line of text
  • Deleting an option in custom properties is working properly again
  • Fixed a very rare issue which caused Roman fonts to be recognised as Regular

 

That's it for this release, but we'll be back with more soon.

As always, if you'd like to see something new, fixed, or improved, join our Discord community — we're always there. You can also request a feature on our Feature Request Portal. Thank you for your support!

Nothing to see here...

This is definitely not a teaser for a major upcoming feature. Nothing to see here, please move along!

See you next time :)