Components

Components are an equivalent of layers in other design tools, with one very important distinction - components are backed by production code. Everything you see or interact with in Supernova is built out of components - from very basic ones like labels to very complex ones like stacks. Let's explore the differences first.

Design Layers vs. Production-Ready Components

In order to properly understand the difference, you must first understand the semantics of words used throughout this documentation. You will find the following objects in the standard design editors:

  • Layers are a visual representation of objects used in apps. You create layers inside your design tool (e.g., Sketch, Adobe XD or Figma, for instance). A good example of a layer is a text object - it has no additional functionality and just represents a single piece of information presented to the user.
  • Symbols are reusable collections of layers that are usually used multiple times throughout the project. A good example of a symbol would be a visual representation of a button consisting of a text layer and rectangle representing its background and maybe a layer for an icon image:
Sketch represents elements visually without any additional functionalitySketch represents elements visually without any additional functionality

Sketch represents elements visually without any additional functionality

However, in Supernova, things get far more interesting. When the design is imported, layers are converted to real, working components. We differentiate three main types of components in Supernova:

  • Atomic Components - These components are the most basic type - they are the strict equivalent of design layers in standard design editors. Groups are equivalent to view components, labels are equivalent to text components and finally, assets (paths, shape groups, bitmaps) are equivalent to image components. When you import the design into Supernova, you'll always get a combination of those three atomic components.
  • Complex Components - These components are made out of the atomic ones. A button component in Supernova is not represented by several visual layers, but by a real, production-ready button component.
  • Reusable Components - Finally, an equivalent of symbols built from pure design layers, reusable components are built from atomic or complex components, and can be reused throughout the entire project.
Supernova represents elements using true production-ready components. 
Instead of having several layers, it is just one - in this case a buttonSupernova represents elements using true production-ready components. 
Instead of having several layers, it is just one - in this case a button

Supernova represents elements using true production-ready components.
Instead of having several layers, it is just one - in this case a button

If you compare the two screens above, you can see that visually, they look completely the same, however, they are represented very differently. This is because components are very powerful - you can set a large number of properties on them as if they were made from a complex set of individual layers - but rather than having to build and manage that manually, Supernova automates the conversion for you.

🚧

Reusable Components in Supernova

Reusable Components (a code-backed equivalent of symbols in Sketch / XD / Figma) are a work in progress and we will be bringing them to you soon - stay tuned!

Converting components to more complex ones

Each design imported to Supernova starts as a set of atomic components. You can use one of the following methods to convert them to complex components:

  • right-clicking the component in preview to bring up the context menu and selecting Convert To > (desired component type)
  • selecting top menu when a component is selected, then selecting `Convert To > (desired component type)1Password
  • finally, **selecting a component and selecting Behavior > Component Type, in the righthand panel, and selecting the appropriate type.

By doing so, Supernova preserves the visual information (if it is possible for the given component) and converts the layers to the more complex type.

In the example above, the button hasn't been yet converted to its real component type and so it still consists of atomic layers. In order to give it the real functionality of a button (e.e., to make it clickable, add an option to have different states and so on), it needs to be converted to the button component type.

After the conversion is done, you can see that visually, it looks exactly the same - Supernova inferred all the attributes for you. However, it is no longer a set of static layers but a fully functioning button that you'd find in real apps - with the added bonus that all the code will now be generated as if it had been coded by a developer.


What’s Next

Find about which components are available to you within Supernova - from simple containers to powerful ones like grids and navigation bars.