Structure Inspectors

Structure inspectors are located on the left side of Studio. There are 3 main inspectors - the screen panel, component panel, and asset panel - all with different purposes. You can switch between panels by either clicking the appropriate icon at the top or by using shortcuts:

  • cmd + 1 for screen panel
  • cmd + 2 for component panel
  • cmd + 3 for asset panel

Screen Panel

The screen panel allows you to browse, rename, reorder and remove screens in your application. It also shows a list of navigation connections and tab groups, if any.

The first row has a special function - after selecting it, you'll be able to access project-specific configuration - like icons, splash screens, the name of your app and so on.

Component Panel

The component panel lists all structural information about the selected screen in one unified interface.

At the most basic level, the panel shows just a list of components. Components are nested based on their logical hierarchy - with the top-most level being called Screen components - which is the underlying view that can't be removed. You can set the background of your specific screen there, but you can't resize it in any way - it is always 100% width x height of the screen.

Components can also invoke transitions to other screens and animations. In both cases, if the component is used to trigger that action, it will be shown underneath the component. If the animation is invoked without user action (navigating to the screen for the first time and so on), it will be located under the first category, with the same name as the screen itself.

📘

Pro-tip: Use alt-click on any of the expansion triangles to expand/collapse the component tree AND all of its descendants.

Lastly, when the screen is part of tabbed navigation, you can find the configuration for the specific panel in the last section called Bottom tab bar.

Asset Panel

The asset panel is a list of all extracted assets from all the designs you've ever put into the project. You can use it to select the assets and then rename them, force them to be vectors or bitmaps and more. Assets can't (yet) be modified inside Supernova.


What’s Next

Explore property inspectors for each of the object types