Property Inspectors

Property inspectors are located on the right side. You don't specifically choose which property inspector is shown - inspectors are always shown based on the current selection in the design editor.

For example, when selecting a component, you'll have access to its entire configuration, layout settings, options to invoke animations and navigation (if the component allows it) and also the ability to change appropriate export settings.

Property inspectors are split into sections - you can collapse and expand any section by clicking on the arrow to the right of the section heading.

Screen Panel

The screen panel gets shown when you select a specific screen from the screen inspector. You can set behaviors of the screen (for example, show and hide status bar) there.

Component Panel

The component panel gets shown when you select a component from the component inspector on the left side, or when you select a component in the design editor.

The component panel allows you to change a component's geometry, the way layout should behave, what type of component it actually is, basic properties (like name) and properties specific for that component type. Some components have very extensive configuration (like buttons) while some have only very minimal options (like switches). In general, you should be able to configure any behavior of the component.

When a component can invoke animation, navigation or other actions, a special interaction section will be available to you as well.

Last but not least, every component is backed by production code - you can configure the behavior of how the component modifies the exported code there (for example, name the code property or name the action that will be generated in code if the component invokes one).

Navigation Connection Panel

The navigation panel gets shown when you select a navigation connection between two screens. The most important part about the connection is its type - push navigation creates a sliding transition (usually used for going back and forth) from right to left, while modal navigation creates a new window sliding from the bottom (usually used for things like settings).

Animation Panel

The animation panel gets shown when you select an existing animation or trigger a new one. Animations are always grouped under the component that invokes them. You can configure the entirety of an animation in one unified window - for example, settings things like geometry, visual changes, and timing information.

Asset Panel

Lastly, the asset panel gets shown when you select an asset from the asset inspector on the left. You can rename assets - the name will be used when exporting to different platforms (note that you should use human-readable names - Supernova takes care of transforming them to names usable for each platform based on best practices).