Improved Figma frames picker

Plus an improved developer experience when writing custom exporters, better code highlighting, the ability to hide unwanted pages, and plenty of quality-of-life improvements you've asked for!

This version was released on August 31, 2022

Let's start by saying — we're unbelievably grateful for hundreds of companies joining us in the last few months and putting the system through its paces. We appreciate all the feedback we're getting and we're trying to improve in every area as quickly as possible. Please keep those nuggets of wisdom coming and don't hold back!

With today's release, we're adding a few things that will go a long way to help with your day-to-day work, whether you're a designer or a developer.

Improved Figma frames picker

We've significantly improved the data structuring of the frames inside the Figma frames picker. This is best illustrated with a before / after comparison:

The frame layers and variants that correspond to specific component are now properly grouped under the corresponding component, and names of components will additionally be also added to each variant name that you put into the docs:

You can always edit the title should you not want them there.

Hidden pages

It's now possible to hide pages that you don't want show in your published documentation with a workaround. Simply prefix any Page, Group or Tab with underscore _ and the Page or section will no longer show on the published site! It will also be completely hidden from search.

Finally, if you hide Group, all pages, sub-groups and tabs under that group will be hidden automatically, so no need to hide each page or section individually.

Hiding pages is now as easy as underscoring their title.

Hiding pages is now as easy as underscoring their title.

We've opted for this "workaround" to make it aligned with the behaviors of Figma, Sketch, and XD where filtering works the same. We'll introduce better UI for the management down the road, but we wanted you to already profit from the change while we work on improving this further.

Support for Lottie files

It's now possible to link Lottie files into documentation. Use the /lottie block to link your animation files into the docs!

Add lottie animation block to render your lottie files

Add lottie animation block to render your lottie files

Here's a little bit of animated fun you can do!

The new block supports both .json and .lottie definitions. We recommend using LottieFiles.com so you can host and link to your animations easily!

More options for highlighting code

We've added (many) more supported code languages for your code snippets. Before this update, you could really only highlight a few random code languages. However, right now, the list has grown substantially, so you can enjoy pretty code for the following list:


                                                        
                                                        
                                                            - Angular
                                                        - Bash
                                                        - C 
                                                        - C++ 
                                                        - CSS 
                                                        - Dart 
                                                        - Handlebars
                                                        - HTML
                                                        - Java
                                                        - Javascript
                                                        - JSON 
                                                        - React
                                                        - JSX
                                                        - React
                                                        - TSX
                                                        - Kotlin 
                                                        - Lua
                                                        - Markdown
                                                        - Objective-C 
                                                        - PHP
                                                        - Plain
                                                        - Text
                                                        - Python
                                                        - Ruby
                                                        - Rust
                                                        - Sass 
                                                        - SCSS
                                                        - Svetle
                                                        - Swift 
                                                        - Twig 
                                                        - Typescript 
                                                        - Vue 
                                                        - XML 
                                                        - YAML
                                                        
                                                            

Enjoy!

Customizable health statuses

You can now customize the health statuses in your documentation. Previously, you could only have 3 labels — Healthy, Known Issues, and Deprecated. However, today we are releasing an update that will take any kind of status label and turn it into a health status.

Simply change the values in component column configuration that matches the health status:

You can now add unlimited number of health statuses, and customize their text and colors.

You can now add unlimited number of health statuses, and customize their text and colors.

And you can now show them inside the documentation, for example like this:

Better debugging for custom exporters

Supernova fully extensible and malleable documentation frontend and also the entire code synchronization pipeline is powered by Pulsar, our custom-built programming and templating language, which already is used by hundreds of companies to make their code and documentation exactly how they like this.

Making a full-fledged language with all bells and whistles is, however, no easy task, so we are glad to introduce the newest addition to Pulsar — stack tracing and proper symbolization of errors that might happen.

Before

Before today's release, it was really hard to figure out what (and more importantly, where) actually went wrong. This is best illustrated by a screenshot of a real error:

For a random variable that doesn't exist, the export of the documentation will fail. However, you only really got information that blocks.dataType failed, which for a more generic issue means trying to remove and re-add blueprints and just guess where the issue is.

In many cases, this got even worse, where the error system didn't even tell what was wrong, and just failed silently. In those cases, tracking the issues down was a true nightmare and actually also slowed down our customer support considerably in helping you fix the issues when exporting documentation or when running code and asset exporters.

After

We've built entire stack tracing and symbolication (mapping) of errors to actual code symbols so we can quickly locate the bug for you. For a similar situation as above, the information is now far more useful:

You can also click on file path in VSCode when developing an exporter and it will locate the error for you, precisely, with line and even word highlighted (symbolized by the :2:0 - line 2, character 0) at the end of the path.

You'll also be able to see summary of what happened at the end of the console log for each failed build that happens:

Finally, each run of exporter of publish of the documentation now produces log using the same routine as what VSCode extension does, and you can see the logs of any failed documentation or export run inside the Cloud > Code Integration > Builds.

Additional improvements

Additionally we've improved the following behaviors:

  • We renamed the Look & feel section in Docs settings to Appearance.
  • Updated the description and the list of features for all 3 different plans.
  • Added an option to hide the "Last updated" column in component documentation tables.
  • Renamed "All component checklist" block to "Component overview table".
  • Fixed some small UI issues in the component overview table.

Bugfixes

The following annoyances are gone as well!

  • We fixed the issue where two different components in two separate groups with the same names caused Documentation deployment to fail.
  • Block selection dialog no longer freezes.
  • 1 now displays properly aligned when you have one task left in Welcome to Supernova walkthrough.
  • Trying to upload specific fonts into the Resources tab no longer results in infinite loading/TypeError error.

 

That's it for this release! 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!