Brand new components (and no more spreadsheets!)
We’ve also introduced new health statuses, new component lists and better design system overviews, plus new Figma components pickers, and data deeplinking. This is one big release!
This version was released on May 24, 2022
Welcome to MEGA release #69. We are absolutely thrilled to show you what we've been working on recently, and we hope you use it to take your design systems to the next level! ❤️
As you might have seen previously when working with Supernova, components were not exactly involved. Well, that changes today, as we are introducing a complete overhaul of the component system - using the new system we invented that reimagines what it means to manage your design system data in one place.
The Components tab is now the replacement for all of your "design system spreadsheets" - bringing together the constellation of data that represent all of the facets of your components in one place - from design components, to code components, to metadata used to govern processes around them.
Here are some features that we are launching the components with!
With this version, we are introducing semantic components - objects that can hold all pieces of information about your components! Basically, you can now create real components that will link all pieces of design system data together, however different they are. Here are some examples of what data you can link together, which is by no means and exhaustive list!
Link components with Figma - and never lose track of where that component is, even if you move it inside Figma! Also, all this is automatically tracked, so if you make change inside Figma - it will automatically update in Supernova for you :)
Link documentation pages together with components - and make those pages as done, work in progress, or any status that you want to. You can also immediately jump to the right page. Of course, if you restructure, change, or rename the page, it will still be tracked - no additional work is needed!
Storybook / Codebase Deeplinks
You can link to any kind of codebase / storybook / other visual platform and bind code and developer documentation to the object this way.
Statuses / Processes
We are super excited to also announce statuses! With statues, you can track all kinds of metadata and the different processes you have inside your design system. In the following example, we are tracking all metadata about component accessibility and some additional features that may or may not be present for each of the components!
The data structure of your component object is unique to your design system, so we are bringing forth complete customization of it. Add/remove data, columns, and components however you like to - always connected to the sources you have pulled in.
New Documentation Options!
Alongside the release of the component overhaul, we are also releasing expanded ways how to document your design system components. You can now use the data that you create to enhance your documentation in many different ways.
First, you are able to create component health blocks that will make your pages stand out, fully connected to the data in your "control dashboard". Simply type /health in the documentation and link a new block with the component you'd like to show!
If you create a health status, this is what you get (don't forget to click on it):
You can now create component checklists (/checklist), allowing you to visually represent your control dashboard in a nice visual way. This can be customized visually as well, enjoy the experimentation! Here is a small preview of what can be done with it!
Finally, you can also show overview of all components in your design system, with you in charge of controlling what gets shown, and what not.
New Figma Component Picker
We have added a new Figma component picker that you can use to select your components - and component views are the first place where this comes to play!
This is just a beginning
With the hyper-flexible system that we are announcing today, we are establishing base for all our efforts going forward - and our dream of completely customizable, yet interconnected design systems where all lives at one place. We hope you will enjoy this feature as much as we enjoyed working on it!
Note that this feature is in a beta/preview release right now, and will be evolving rapidly in the upcoming sprints - so we would like to join us and comment on what we can do better, and how to improve it! To do so, Join our community and let us know!
We have additionally squashed few additional bugs that few of you reported - thank you!
- We have fixed a very rare issue that caused all assets to download as 1 kB big broken .zip file.
- We have fixed issue with exporter occasionally not working in docs when you used tokens with aliases
As always, if you would like see something new, fixed or improved, join our Discord community - we are always there. Thank you for your support!