This version was released on November 7, 2023.
Over the last few months, we've been busy in the Supernova workshop and today we get to show you what we've been working on. So get ready, this is a wild one and definitely a Christmas-came-early type of situation! 🚀
Figma variables support (beta)
Ever since Figma introduced variables (actually, way before that) we've been hard at work figuring out the best way to support them in their current state, but also with future changes and planned features in mind.
Today, we're excited to present the first fruit of our explorations — the Figma plugin (beta) that allows everyone using Figma (regardless of your plan) to import variables into Supernova seamlessly.
You can find and install the beta plugin in Figma's plugin store — it'll guide you through importing your variables step by step.
We've also added documentation for the plugin. Learn everything you need in the following guides:
New developer experience (beta)
Designers are getting a fancy new plugin for their Figma libraries, but of course we don't want the developers to feel left out. We have a huge surprise for you, too!
Today, we're launching a whole new developer experience (beta) in Supernova. This has been long time in the making. So... what does it actually mean? If you want to hear it from our CEO who can't stop talking about it and playing with it, we recommend you check out the video below.
What does the developer experience actually bring? Here is a TLDR:
🚀 Exporters reimagined
Exporters have had a makeover. They're now TypeScript first, tapping into the full potential of the node-based ecosystem and have tons of new functionality and options for you to explore. You'll no longer need to learn a new language when building them, as we have ditched Pulsar in favor of fully embracing the TypeScript ecosystem.
🎨 New CSS & SVG exporters
To showcase the new developer experience and what is now possible with the exporters, we're announcing two new exporters: a CSS mega-exporter and a SVG-to-React exporter.
The CSS mega-exporter showcases new things that are possible, like dynamic configuration allowing you to specify how the exporters behave, such as styles of naming or format of colors. It also has support for all types of Supernova tokens, including the changes we've released recently.
The SVG-to-React exporter showcases something that was previously not possible at all, using external libraries to enhance exporter functionality, and also modifying the contents of the design system on the fly. The result is beautiful, optimized SVG turned into React components — from all the assets and icons you've imported from Figma.
Introducing: Supernova SDK
At the heart of the new Supernova developer experience lies the Supernova SDK, a powerful library that allows you to read and write design system data from Supernova anywhere you can run a JavaScript library. Simply follow our guide and integrate data from your design system anywhere you want.
Oh, and the SDK is also available in the exporters, giving the exporters read and write access to all Supernova data (and we truly mean all data) for the first time.
New and improved developer docs
We want to make sure you're getting the most out of the new developer experience. We've rewritten the whole thing and created developer documentation that contains all the information you'll need to build your next exporter, integrate the SDK in your projects, or achieve anything else you want with Supernova.
We also customized the design of the documentation to showcase Supernova's customization capabilities as well — we hope you like it!
🎥 Deep-dive into exporters
To top it all off, we've recorded a juicy 1-hour video that takes a deep dive into all aspects of building the exporters. If you want to understand how to develop and customize Supernova exporters, this one will turn you into a pro in no time. Enjoy!
Other
We've also fixed some pesky bugs and improved some behaviors to make your life easier.
- The cookie banner now works correctly when it has multiple lines.
- We improved how we treat the Table of Contents on a homepage, especially when the homepage also has more tabs. The layout is no longer shifting from left to right.
- We fixed bug which caused the homepage label to be applied to the tab label in the main navigation.
- We added a minimum height to the Storybook block story preview to prevent cases where it was too small in the editor.
- We fixed unique edge case where the Callout block didn't have proper bottom padding when placed as the last block in the Accordion variant of a Tabs block.
That's it for this release, and we'll be back with more soon. As always, if you'd like to see something new, fixed, or improved, join our Slack community — we're always there. You can also request a feature via our Feature Request Portal. Thanks for your support!