Basic Concepts

As with other tools you might be familiar with, Supernova works with the concepts of screens and layers. Those concepts then translate directly into Supernova - where layers are represented by real, production-ready components.

Screens

A screen in Supernova represents one real screen that users interact within your real app. Screens contain components that represent the user interface. You can find the list of screens as the first tab on the left. Screens can be tied together to form either screen-to-screen navigation or tabs.

Components (Layers)

The main difference between Supernova and other tools is that layers are actual blocks that can have specific functionality - we call them components.

There are equivalents of all the layers you'll find in Sketch, for example - text maps to labels, groups map to views and shapes/bitmaps map to image containers. But components in Supernova go far beyond basic elements. You can extend them with interactions (buttons, switches, sliders..) or to present data (tables, grids..) and create prototypes that look, feel and behave like real apps.

Navigation

Navigation connects one screen to another using either screen-to-screen navigation or tabs. Navigation gets invoked when a user clicks on a component that allows for this type of transition - buttons, tables, grids and navigation items.

Read about making user flows here.

Animations

Animations allow you to add oomph to your designs - either by playing them when the user lands on a specific screen or triggered by certain actions, like tapping on the button. You can select from a wide variety of pre-made animation templates (like bounces or slides) or you can make custom ones - giving you full control of the entire look and feel.

Read about how to make your first animation here.

Importing

Supernova is not a design tool - instead, it uses input from other tools that people like to use already, such as Adobe XD or Sketch (Figma support coming soon as well). The importers convert design layers to production components, going to great lengths to preserve the pixel-perfect designs you've created.

Read about how supported import platforms here.

Exporting

Supernova can export production-ready code for everything you can visually create in it in a vast variety of configurations, so that everyone can find the style they like. Supernova is built with production-ready code in mind from the beginning - and the quality of the code is comparable to what senior-level developers would produce.

Read about how to export to production codebases here.


What’s Next

Explore the Studio and its wide variety of functionality in our little tour