Features & Key Benefits

Unlike other tools out there, Supernova doesn't work with visual layers - such as groups, shapes or labels in Sketch. Instead, every visual component is generated using production code. Take the following example:

While designers will feel right at home with the Studio interface - which provides all the layer properties and options you'd expect from a design tool - the mobile application preview in the center pane is actually a running simulation of the real app. This has major advantages over static design layers found in other tools:

  • Designs are live. You can use preview mode to play around with the app just as you would on a real device - including things like animations, navigations, localization and more.

  • Designs are backed by production code. Because of the way Supernova works - using production code to show the visual representation and not the other way around - the code is always a true representation of what is shown. Supernova is the first tool that generates code of a quality that you can use in production projects.

  • Prototypes feel real. - Prototypes using images, hotspots, etc. will never deliver the level of accuracy required to truly test the apps. That is why there are so many tools dedicated just to creating high-level prototypes - with the unfortunate drawback that you throw it all out when you start developing. Supernova combines state-of-the-art prototyping options with production components and exporters to save the resources (and sanity!) of development and design departments alike.

Real, live components

Every layer in Supernova is a real element used to build production apps - from basic ones like image containers and buttons to complex ones like lists and grids. This allows for the precise configuration of looks and behavior without sacrificing any of the design fidelity.

In the example above, the button layer is not made of out several layers as you'd find in design tools - rectangles, texts, and some groups - but is just one production-ready component with all configuration options usually available only to developers.

Because of this powerful system, you are able to do some really wild things that are just impossible to do natively in design editors - like giving a button different states (normal, selected, highlighted, disabled).

Import from existing design editors

Don't you hate it when tools force a certain workflow upon you? We do too - so we created Supernova with existing tools in mind. While it is possible to create apps completely inside Supernova as well, you can just as easily import your designs from industry-standard tools such as Sketch and Adobe XD, preserving your precious pixels, while drastically expanding the array of capabilities available to you.

Supernova's state-of-the-art import engine supports the entirety of the functionality of supported design editors - making sure your designs always stay the same.

But we went further than that - we know just how painful is to do design iterations with existing toolchains - so we've created a system that can detect what changed, and apply the differences to an ongoing Supernova project - keeping all the prototyping and code work you've done intact from iteration to iteration.

Simply select which screens you want to merge - and Supernova takes care of the rest. No more copy-pasting or tedious and error-prone manual merging of changes.

Prototyping

Supernova offers a vast array of prototyping tools, each one re-imagined to work with production code. You can create animations from our templates or make completely custom ones, specify complex navigation chains, create tabs with different content and even localize your app into 30 languages.

Most importantly, as with components, every step of work you do is backed by production code. If you've ever tried to recreate complex prototype animations with code, you know how hard it can be. With Supernova, you get the code for any platform you like, without any additional effort, in real-time.

Export to production codebases

Usually, if you are a designer, you'd do all the importing, prototyping and asset preparation and then hand your work over to the development team. Or, if you are a developer, you'd get prepared assets and designs and start anew with a clean project. Seems like a waste to redo work that was already done by someone else, doesn't it?

Those days are over. Supernova allows for easy transformation of designs into production code without sacrificing any work done by anyone on the team. In the next chapters, you'll learn how to best use Supernova to its fullest potential, saving hundreds of hours on mundane tasks in the process.


What’s Next

The workflow of Supernova closely mirrors your preferences. Learn about to get the most out of Supernova by exploring its typical workflow.