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
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).
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:
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
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.
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!
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.
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!
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.
We also improved how other token visualisations display on mobile version of your documentation.
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:
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.
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.
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.
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.
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!
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.
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.
It is now also possible to upload animated gifs as your profile picture as well!
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
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!
This is definitely not a teaser for a major upcoming feature. Nothing to see here, please move along!
See you next time :)