Release #69

We are killing the spreadsheet behind the design system - and replacing it with something much better! Also completely new components! And health statuses! And component lists and design system overviews and data deeplinking and new Figma component pickers and....! Oh my 😱😱😱!

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! ❤️

Overhauled components!

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.

 

New components are night and day compared to the previous version

 

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!

Semantic Components

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 :)

Works for multi-branded design systems as well!

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!

Deeplinks to the documentation allow you to quickly get to your content, with ease

You can link to any kind of codebase / storybook / other visual platform and bind code and developer documentation to the object this way.

Link Storybook, GitHub, GitLab, Bitbucket... and have everything at one place.

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!

Accessibility, variants, behaviors - you can track it all, in one nice data view

 

Customizable Fields

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.

 

We have great many types of data you can track, with even more to come!

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.

 

Component Health

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!

You can also optionally select additional data to be shown alongside the status!

If you create a health status, this is what you get (don't forget to click on it):

 

Healthy
Last modified June 08, 2022
Healthy
This component is accurate and represents our most up-to-date recommendations.
Published May 23, 2022
Modified June 08, 2022

 

Component Checklists

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!

 

Accessibility checklists. Processes. Component lifecycles. It is now all possible, at one place.

 

Component Overview

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.

 

Checklists allow you to quickly show data controlled from a single control dashboard - and will automatically update as you update your data.

 

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!

New, overhauled component picker with pretty component previews

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!

Bugfixes

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!