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.
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:
Layersare 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
layeris a text object - it has no additional functionality and just represents a single piece of information presented to the user.
Symbolsare reusable collections of
layersthat are usually used multiple times throughout the project. A good example of a
symbolwould 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:
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
layersin 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.
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!
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.
Updated over 2 years ago