It's finally here — the biggest product refresh in Supernova's history!
We're so proud to introduce you to Supernova 2.0. We've redesigned the app from the ground up, giving it a completely new design language, useful new features, and streamlined workflows and settings throughout.
Keep reading to discover what's in store for you!
Documentation
Our documentation editor has gone through the most exciting changes of Supernova 2.0.
New: Multiplayer editing
Collaboration just became a lot easier with our new multiplayer editing! You can now see your teammates create and edit content in the documentation editor in real time. This not only makes working together much easier but also prevents overwriting anyone's work by mistake.
New: Property panel
We've implemented a new way to edit your content blocks: A property panel found at the right of the editor. There is now one consistent, organized place to adjust content block property settings.
Block variants
Some block variants are now reflected in the editor, so it’s easier to understand how they'll look in your published documentation.
Select text across multiple blocks
It’s now possible to select text across multiple blocks at once.
Infrastructure and performance
We've made big improvements to performance, redundancy, security, scalability and stability throughout the entire webapp. The app is noticeably more responsive (and we've unlocked further improvements to come), and the app is easier maintain and support, which should shorten our support request response times.
Plus, we're building the app in a way that allows for expanding into other regions.
Brand new information architecture and experience
Not only have we streamlined our information architecture, we've also built a whole new design language for Supernova, encompassing both user experience and user interface.
New design language
We’ve undertaken the biggest design refresh in the history of Supernova, updating the look and feel and overall structure of the app to make it cleaner, friendlier, and easier to navigate.
Improved search
Searching for specific tokens and components in your design system is now much easier — just start typing in the search bar. You can also search for tokens by their descriptions to find what you need.
Collapsible navigation panel
Need some focus time? Our left navigation panel is now collapsible, you so can get back some valuable screen real estate and cut out the noise. It’s also persistent, so you’ll always be able to find your way around the product whenever you need to.
New: Detail editing drawer
We’re introducing a new way of editing design data and content detail throughout the app — a righthand drawer for editing content detail. Tokens and components will all feature this drawer so you can view and edit detailed information about these important elements of your design system.
Global command menu
We've introduced a global command menu that allows you to quickly launch the most important actions in Supernova. All you need to do is type command/control-K on your keyboard — or click Search ⌘K in the left navigation menu — and search or select your command from the menu.
Importing design data
We’ve redesigned the import workflow to make it cleaner and more informative.
- Scopes are now selected automatically based on where a file is imported from.
- Connecting the same file twice is handled properly. Now, Supernova simply adds a new import scope to your file right away.
- The import summary can now be found in its own drawer, where you can see import info more clearly.
- We've improved the error messaging for failed imports, so you can identify the problem more easily.
- The Components and Frames scopes have been merged into a General scope for import. This is automatically enabled, so your frames and components will always be imported when you connect a file, unless you choose not to have them.
Design tokens
The Design tokens section has received a significant overhaul.
Token detail drawer
Use the new drawer to zoom in on token details and make changes all in one place (including custom property values).
Fixed name column
The token name column stays fixed in place on the left, so you always see which token you’re looking at no matter how far you scroll.
Column reordering
Columns can also be quickly dragged and dropped within the Tokens table, so you can reorder them with ease.
Token reordering
You can also drag and drop any tokens you’ve created within Supernova to reorder them quickly.
New: Rework of the token categories
- New options section with Text decoration, Text case, and Visibility tokens.
- You can now display multiple layers of shadow tokens, and if they were created within Supernova, you can edit them too.
- You can search for specific tokens within token groups (when changing/setting).
- Typography tokens now use separate tokens for font family and font weight.
- Opacity tokens can now be referenced from color tokens.
Better property definition
We’ve improved the experience of adding and editing custom properties, with things like pre-defined select colors.
Components
Of course, it's not only tokens that we've worked hard at improving. Components got a refresh too.
Component detail drawer
The new component detail drawer allows you to examine a component’s details up close and edit them at the same time (including custom properties).
Share component detail URL
Copy the URL to component detail view to share the page directly with other team members for discussion.
New: Interactive Figma component view
You can now link Figma components you’ve imported and see an interactive preview of the component itself in the detail drawer.
Better property definition
We’ve improved the experience of adding and editing custom properties, with things like pre-defined select colors.
Assets
Search assets in your design system
You can now search for specific assets in your design system by name and group.
Group by data source
Imported assets can also be grouped by data source, so you can quickly determine where they came from.
Import assets from a new source directly from the page
You can now import assets from a new design data source without leaving the Assets page to do so.
Removed download
We’ve removed the download button from the assets page within the documentation editor. Instead, you can download assets from your published documentation.
Code automation pipelines
Our code automation section has also had a complete overhaul to simplify the experience.
We’ve changed what were previously Builds and Hooks into Pipelines. When building your new code pipelines, you can select specific exporters, events, and delivery destinations for automating your code. You can use events as before or trigger pipelines manually, just like creating a build.
There is also a new Exporters tab, which is replacing the “Store” and “Installed” sections in the old app.
We've simplified things and added a Create pipeline button so you can quickly set up an entire code pipeline using your chosen exporter.
Custom exporters can be created in the Custom section.
Workspaces and Team Management
We've redesigned the Billing section in your settings, so you can easily manage your plan and your billing settings. Whether you want to upgrade your plan, view your invoices, or add more seats to your workspace, you can do it all in the Billing section.
We've also added a new Workspace members section, under Team and access in your settings. Add new team members, change roles, and manage every member of your workspace right here.
New settings
There are a few more exciting changes in your settings too!
Fonts
There's a new font management section, where you can upload fonts and use them as previews in your font family and typography tokens.
IP allowlisting
Our IP allowlisting section now has a much clearer and more intuitive user interface.
Documentation settings
The extensive documentation settings now have their very own section and can be found directly in the documentation editor.
...and even more improvements!
- You can now edit names and descriptions of Versions.
- Renaming your workspace and design system is more straightforward.You don’t have to manually set slugs, and renaming your workspace, design system, and brand won't break bookmarks.
- If you have only one brand, the brand selector is hidden.
- We've improved the placeholders for custom properties to make them clearer.
- Referenced tokens with very long paths now have their paths shortened with ... in the middle.
We know there are a lot of difference between the new app and the old one, so we've condensed the most important ones here.
|
Previous feature |
New feature |
What's it all about? |
|---|---|---|
|
Design sources |
Design data |
We've renamed Design sources to Design data. You can find this section in your left navigation panel. From here, you can import data to Supernova via Figma, our Figma Variables Sync plugin, or our Tokens Studio integration. |
|
Code integration |
Code automation |
We've renamed Code integration to Code automation. You can find this section in your left navigation panel. Here, you'll find our new Pipelines feature, and our exporters. |
|
Design system data |
Design tokens, Components, Assets |
We've split what was previously called Design system data (or content) into separate sections for Design tokens, Components and Assets. You can find these sections in your left navigation panel. You'll find a smoother data management experience, and better detail editing here. |
|
Hooks and Builds |
|
We've removed the individual Hooks and Builds sections, and replaced them with Pipelines. |
We're really excited for you to explore Supernova 2.0 and see what you think. As always, you can reach out the to the team with any questions!