Inspector

The Inspector panel provides detailed controls for the currently selected element. This panel allows users to view and modify properties of screens, containers, widgets, and other UI elements. Additionally, there may be special settings that vary by widget type. For more information about specific widget settings, see the Widget types section.

Main sections:

Variables

This section shows the pinned variable collections of the project and lets you switch their active variation, for example the theme of the interface or the active resolution.

• Collection selectors: One dropdown per pinned collection to select the active variation (theme, resolution, etc.)

• Pin button: Chooses which collections are displayed in this section

• Variable Manager button: Opens the Variable Manager, where the variables, collections and variations are defined

  For more information about variables, see the Global Variables section.

Layout

Layout can be used to control how elements are arranged in relation to each other.

Layout toggles between three modes:

• Default mode: In this layout mode there is no correlation between different widgets and assets. Elements can be moved freely on the selected screen.

• Horizontal mode: This layout mode arranges the elements in a horizontal manner.

• Vertical mode: This layout mode arranges the elements in a vertical manner.

Align:  Alignment options for content positioning using a 9-point position grid.

• Position Grid: A visual guide on the right showing positioning options. Clicking on different points of this grid aligns the element relative to its parent. (Grid parameters can also be set through the dropdown lists beside the grid)

  • Top-left: Aligns the element to the top-left

  • Top-mid: Centers the element horizontally while aligning it to the top

  • Top-right: Aligns the element to the top-right

  • Mid-left: Centers the element vertically while aligning it to the left

  • Center: Centers the element both horizontally and vertically

  • Mid-right: Centers the element vertically while aligning it to the right

  • Bottom-left: Aligns the element to the bottom-left

  • Bottom-mid: Centers the element horizontally while aligning it to the bottom

  • Bottom-right: Aligns the element to the bottom-right

    

Cross place: Configures cross axis alignment settings, If differently sized elements are in the layout, this will align the smaller element in the desired position. This has three states:

• Top: Smaller items align to top position.

• Mid: Smaller items align to middle position.

• Bottom: Smaller items align to bottom position.

Wrap: Toggle content wrapping.

Reverse: Reverse the direction of items

Gap: Sets the space between items

• Horizontal value

• Vertical value

Transformation

• X: Sets the horizontal position of the element relative to its parent

• Y: Sets the vertical position of the element relative to its parent

• Unit Selector: Dropdown to switch between different measurement units:

  • PX - Pixels (relative to Position Grid)
  • % - Percentage (relative to Position Grid)

• Position Grid: A visual guide on the right showing positioning options. Clicking on different points of this grid aligns the element relative to its parent:

  • Top-left: Aligns the element to the top-left
  • Top-mid: Centers the element horizontally while aligning it to the top
  • Top-right: Aligns the element to the top-right
  • Mid-left: Centers the element vertically while aligning it to the left
  • Center: Centers the element both horizontally and vertically
  • Mid-right: Centers the element vertically while aligning it to the right
  • Bottom-left: Aligns the element to the bottom-left
  • Bottom-mid: Centers the element horizontally while aligning it to the bottom
  • Bottom-right: Aligns the element to the bottom-right

• Rotation: Rotates the element around its pivot point, in degrees

• Pivot X / Pivot Y: Position of the pivot point used by the rotation and the scale, in pixels from the top-left corner of the element (0 = left / top edge)

• Scale: Uniform scale of the element; 256 equals 100%

Rotation and Scale can also be animated in the Animation panel.

Layer

It defines the layer's opacity and how elements visually mix with layers beneath them through different blending modes.

• Opacity: Transparency level for blending

• Mode: Choose from four blending mode options -

  • Normal
  • Additive
  • Subtractive
  • Multiply
  

  Size controls

• Width: Sets the width of the element in pixels (PX), percentage (%), or content-based sizing

• Height: Sets the height of the element in pixels (PX), percentage (%), or content-based sizing

• Unit Selector: Dropdown to switch between different measurement units:

  • PX - Pixels (absolute size)
  • % - Percentage (relative to parent)
  • content - Content-based sizing
  • fill - Fills in the available space (100% in a normal layout, 1 fr in a flex layout)
  • fr - Fraction of the available space of the parent, shared with the other fr-sized items of a flex layout

States

The States section allows the management of different visual states of the element. This section shows:

• Default State: The standard appearance of the element
• Add State Button (+): Adds additional states to the element

For more detailed information about States, refer to the States section.

Flags

The Flags section is the place to set special behaviors and attributes for elements. This section includes:

• Add Flags Button (+): Adds flags to control element behavior

For more detailed information about Flags, refer to the Flags section.

Scrolling

The Scrolling section is dedicated to configuring the scrolling attributes for different elements

• Add scrolling button (+): Add scrolling attributes to enable different scrolling types.

For more detailed information about Scrolling, refer to the Scrolling section.

Styles

The Styles section allows users to customize the visual appearance of UI elements. This section enables:

• Style modification: Apply and customize styles for different element states
• Global styles: Create or choose from saved styles in the project
• Add style button (+): Adds new style properties to the selected element

For more detailed information about Styles and their application across different states, refer to the Styles section.