The new Supernova: Flutter enabled, Google approved

Dec 11, 2019 · 6 min read

For those of you who are new to Supernova-sphere, Supernova is a tool for designers and developers that converts Sketch and Adobe XD mobile designs into native frontend code for iOS, Android, React Native and Flutter - so you can build, prototype, polish and deploy your apps within minutes.

Supernova’s vision has always been to restore the joy both designers and developers get from building the future and to make working together more harmonious and efficient. We’ve done that by building the first design-to-code platform usable in production environments, but we won’t rest until all the boring and tedious stuff is removed so that you can focus purely on your creativity.

Since we believe first-class support for multiple platforms is a crucial part of that vision, we were excited to be introduced to Flutter, Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. We were quick to add it to our supported platforms because of Flutter’s impressive speed, developer experience, and flourishing ecosystem.

We’ve been working tirelessly on making it a more integral part of Supernova, and today on the Flutter Interact stage, we’re ecstatic to share that we’re making it official! That’s right, Supernova and Flutter are partnering up.

Congrats, But What Does This Mean For Me?

If you don’t already work with Flutter, it means we think you should start, in order to take advantage of all the great things to follow! 😉 (Don’t worry, there are still plenty of other killer features in the newest iteration of Supernova that aren’t Flutter-specific listed below.)

As a designer or developer working with Flutter, Supernova brings you full Flutter support and access to Studio — for free.

Our love for Flutter is priceless. Literally.

We want everyone to experience the power of Flutter. We really do believe Flutter is the future of write-once deploy-everywhere apps and that a healthy, growing ecosystem is integral to adoption. To support this growth, we decided to fully open up Supernova to the Flutter community, allowing their designers and developers to continue building great apps that contribute to that ecosystem.

In order to use Supernova for free, head over to our website and download Supernova Studio. After registering and while importing your design, select Flutter as your preferred platform. That’s it. Animations, a full prototyping suite, all export features — without limitations — are yours.

The import preview now allows to pick a specific platform — and creates a personalized experience for you

The fun doesn’t stop there. After importing your design to Supernova and selecting Flutter as your platform, you’ll find yourself in a familiar environment, as Supernova’s UI will change to reflect Flutter terminology and functionality.

A few of the Flutter-specific things you’ll find are support for Material Design widgets, a style manager that brings the concept of tokens and styles into the Flutter/Dart world, and Hot Reload so you can have your Flutter app running alongside Supernova and watch your changes propagate in real-time.

Code generated in Supernova immediately updates in the IDE of your choice

As though that’s not exciting enough, we have plenty more planned in the coming months. In the meantime, read more about the shared Supernova/Flutter mission and get involved.

Give Me More Supernova V8 Info

You’ve got it. For starters, you’ll notice a brand new interface!

Every single piece of the interface was redesigned for clarity and easy access to all the features

Enjoy less clutter and easier access to the features you know and love, and the new ones you’ll soon fall in love with, such as:

Style Manager

We brought the concept of tokens and styles into the development world by adding the option to reuse styles throughout a project, removing redundant code generated for all platforms.

Colors, fonts, gradients, numeric values, shadows, borders and more can be reused, and if needed, changed from a single shared configuration and fully supported by the rewritten exporters. Styles will also be inferred at the import phase, so you don’t have to do it manually.

Style Manager now allows you to set distinct styles, allowing for things like white-labeling, white and dark mode switch and others

Preview Mode as a Popup

Our preview mode got a makeover! Now it can be shown side-by-side with the editor and made into a popup for those who work on multiple screens (or one large one). It replaces unreliable simulators, bringing significantly-improved performance and several new requested features like an option to show device borders, dynamic resizing of the simulated device by dragging its edges and the ability to show a different screen than the one you are working on.

For the first time, it makes the editor-preview-code combo possible, so now you can see how your application looks look while editing it, while also reading its code! Take a look:

Preview can now be detached, resized, moved and used as freely as possible

Right panel mode switch

Once you’re in your platform’s specific view, you can further specify the way you work by utilizing the three new modes of the property inspectorDesign, Prototype, and Code mode.

This splits up the very long and complex set of property editors along functional lines and segregates platform-specific options so they can be “localized” in platform terminology and serves our long-term goal of giving users more control over the way their exported code looks.

In other words, if you’re a designer, you can only show the design stuff and not be bothered by the code. If you’re a developer, setting up properties, actions and the entire code integration is a breeze.

Property panels can now be customized based on what you are working on. Yay efficiency!

Single Platform View

Since no two platforms use the same terminology or configurations, instead of layering our own vocabulary on top of everything, we moved to a single platform view that reflects your preferred platform’s terminology.

Simply select your platform during import to feel right at home in Studio. Not only does this eliminate headache, but it cleans up the workspace a lot so you have more room to create. You still have the ability to duplicate your project in another platform, this just gives you more control over your Supernova experience from the very beginning.

If you want to see every single improvement, read V8’s release notes.

But Wait! There’s More!

All of these steps are part of our longterm journey toward eliminating the manual creation of interfaces entirely, for everyone. Supernova has historically been a Mac-only app, and that’s about to change in a few months with the introduction of a cloud-based Supernova, rebuilt from the ground up in Flutter. Yep, Supernova is coming to a cloud near you.

Soon, everyone will have access to cloud-based Supernova’s advanced support for enterprise teams and a code-enabled design system manager to finally close the gap between design and code. Experiencing the same handoff problems over and over again, no matter what tools you use? You want to be part of this.

How to apply for the Supernova Cloud Early Access

Head to our website to learn more about what we have planned and sign up for exclusive Early Access. We’ll begin contacting qualified applicants from now until mid-2020.

We can’t wait to see what you build.

With love,
The Supernova Team


    Written by


    We've decided to make the world better for every developer and designer out there. Join Us.

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade