_Assets & plan updates

New block variants for assets, search, and improvements in workspace management. We've also updated our pricing for new customers.

This version was released on February 17, 2023

For our biggest update of 2023 yet, we've prepped a ton of improvements and bug fixes across the board. Assets are getting a lot of love with new block variants and a search function. CLI support for Tokens Studio continues to deepen, and we've updated our pricing and workspace management capabilities. If you're an existing customer, nothing changes for your subscription. Read on to learn more about all the updates.

Asset improvements

Assets and icons are a vital part of every design system. We've been listening to your feedback and are excited to introduce the first set of improvements to how Supernova documents and displays assets.

New block variants

Different types of data require different visualizations — it's the same for tokens as it is for assets. Icons look better with empty space around them, while more complex illustrations may need a bigger grid and longer descriptions. To accommodate these varying needs, it's now possible to pick from three block variants — Simple Grid, Square Grid, and Borderless Grid.

Square grid

Great for assets with various heights, e.g. UI icons, logos or small illustrations. The description is hidden but is used for search keywords.

Preview:

Align Center

Align Center

🔎 text align

Tools

Tools

🔎 pen, measure, toolkit

Swatch

Swatch

🔎 colors, tool

Color Picker

Color Picker

🔎 tool, paint


Source: Tabler Icons

Simple grid

Great for various general use cases of displaying assets, e.g. illustration set or logos.

Preview:

WomanWithPhone

WomanWithPhone

Illustration sizes:

Extra small (152×90px)
Small (203×120px)
Medium (338×200px)
Large (474×280px)
Display (778×460px)

App Kiwi

App Kiwi

Illustration sizes:

Extra small (152×90px)
Small (203×120px)
Medium (338×200px)
Large (474×280px)
Display (778×460px)

Nomad

Nomad

Illustration sizes:

Extra small (152×90px)
Small (203×120px)
Medium (338×200px)
Large (474×280px)
Display (778×460px)

Business Travel

Business Travel

Illustration sizes:

Extra small (152×90px)
Small (203×120px)
Medium (338×200px)
Large (474×280px)
Display (778×460px)

Error 404

Error 404

Illustration sizes:

Extra small (152×90px)
Small (203×120px)
Medium (338×200px)
Large (474×280px)
Display (778×460px)

Online Check In

Online Check In

Illustration sizes:

Extra small (152×90px)
Small (203×120px)
Medium (338×200px)
Large (474×280px)
Display (778×460px)

E Visa

E Visa

Illustration sizes:

Extra small (152×90px)
Small (203×120px)
Medium (338×200px)
Large (474×280px)
Display (778×460px)

Fast Track

Fast Track

Illustration sizes:

Extra small (152×90px)
Small (203×120px)
Medium (338×200px)
Large (474×280px)
Display (778×460px)

Error

Error

Illustration sizes:

Extra small (152×90px)
Small (203×120px)
Medium (338×200px)
Large (474×280px)
Display (778×460px)


Source: Orbit Design System Illustrations

Borderless grid

Great for assets with the same height, e.g. UI icons, logos, or small illustrations. The description is hidden but is used for search keywords.

Preview:

Tools

Tools

🔎 pen, measure, toolkit

Face ID

Face ID

🔎 apple iphone ipad face smile security

Supernova

Supernova

🔎 brand, logo, design system

Bat

Bat


Source: Tabler Icons

You can switch them in our block variant menu that is displayed when the assets block (or any block supporting block variants) is hovered or interacted with.

Introducing search for assets

To help you quickly find the assets you need, we've added a search field to any block with more than 20 assets. Our search function works with additional metadata from your Figma components descriptions, so you can find what you need more easily.

Global settings for Blocks

We added a new section to our documentation settings — Blocks. Right now, there are only two options affecting the asset block type, and we have big plans for this section going forward 👀

Updates to workspace management

We've made it easier than ever for you to manage your subscription plan in Supernova! Now, you can make changes to your plan directly from your account without having to contact support. You can quickly and easily add or remove editors from your plan or upgrade to a new one if you need more features.

Pricing update

We've also updated our pricing plans. Don't worry if you're an existing customer, nothing changes for you. You'll stay on your current plan, with access to the same great features you've always had and at the same price, forever. If you choose to change your plan type, then the new pricing plans will kick-in, and what you have already paid will roll-over as credits against your payment.

For new users, our pricing plans are designed to help you find the best fit for your needs. Whether you're a small team, startup or enterprise, we have a plan that will work for you.

If you're ready to take your design system operations to the next level, check out our plans and find the one that's right for you!

CLI improvements

We've enhanced our CLI support for Tokens Studio even further in this release:

  • Typography tokens are now properly supported, even when they contain complex references.
  • Dimensions will now properly compute for lot of obscure scenarios.
  • Font families are now supported. Those will get mapped into the "Other/Font Family" category, as there is no corresponding category in Supernova just yet. This will be changed in the future!
  • Font weigths are now supported. Those will get mapped into "Other/Font Weight" category as there is no corresponding category in Supernova just yet. This will be changed in the future!
  • Font sizes will now properly parse, and work with both px and % definitions.
  • Support for % was added to tokens and will also show in the Cloud. It's not yet possible to set units from the Cloud directly; that improvement is coming.
  • More of better logs for debugging issues, and more resilient parsing of data types in general.

General improvements

  • Assets and Figma frames in published documentation are now displayed in the same size as they are in Figma.
  • The Learn menu was reworked to look nicer and to include all relevant content in one menu.
  • Cookie banner description in published documentation now supports HTML. It allows you to add a link to your privacy policy, newlines, or make some parts of the description bold, for instance.
  • You can now see the number of imported items of every data scope on Data sources page.
  • Improved how the Embed Figma block looks and improved its messaging to make it easier to use.
  • Switching between versions in published documentation keeps you on the same page (if the page also exists in other versions).
  • An improved affordance of one of the Tabs block variants. The Accordion now shows chevron signaling if the accordion section is expanded or not.
  • Assets and Frames grid is now better optimized for mobile breakpoints.

Bugfixes

  • Open in Figma button on Supernova component works properly for assets now too.
  • Selecting with Shift + click works properly in the documentation editor again.
  • Figma component previews in Supernova component display in the correct aspect ratio and size.
  • Fields in color and gradient edit token dialogs properly contain displayed values now.
  • Switching to different version while being in documentation settings reloads settings properly.
  • Opacity data displayed on tokens dashboard is no longer rounded to one decimal point.
  • Fixed the privacy policy link in user profile.
  • Color contrast grid calculates the contrast properly even with repeating token names.
  • Fixed a rare issue when published documentation did not display the proper size of the header.
  • Values in property-heavy shadow tokens do not break into multiple lines in published documentation.
  • Creating new Supernova tokens very quickly does not result in duplicate token names anymore.
  • Inline CSS for tables respects the maximum width of the page properly now.
  • Fixed vertical alignment for longer shortcut descriptions in "Icon on Left" block variant. Text and icon is now properly aligned to the top edge of the text.

 

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!