The inspector

Every inspector section and control, explained one by one.

The inspector is where you shape a selected element — its size, colour, corners, effects, text, animation and more. Every section is contextual: a panel only appears when it applies to the element you have selected, so a line shows LINE options while a checkbox shows CHECKBOX options. This page walks through every section and control you'll find there.

Name

The Name field renames the selected element. This is the label you'll see in the layers list, so give elements clear names to keep large designs manageable. You can also rename directly in the layers panel by double-clicking the layer.

Position

The Position section controls where the element sits and how big it is. Values are expressed as percentages / fractions of the screen so your layout stays responsive across resolutions.

Fill

The Fill section sets the element's interior colour using the advanced colour picker (described in full at the end of this page). It also contains a Gradient sub-section for multi-colour fills.

Gradient

• Enable — turns the gradient fill on for the element.
• 2-colour or 3-colour — choose a two-stop or three-stop gradient.
• Direction — set the gradient to run vertical or horizontal.
• Radial option — switch from a linear gradient to a radial one.
• Gradient outline — apply the gradient to the element's outline as well.

Outline

The Outline section adds a border around the element. Set its thickness and its colour — and because outlines support gradients, the colour can be a gradient outline rather than a flat colour.

Corners

The Corners section controls how the element's corners are drawn. Set a corner radius and pick a corner style.

Shadow

The Shadow section casts a soft drop shadow behind the element. Adjust the shadow's offset (how far it's shifted) and its blur (how soft the edge is) to add depth against the background.

3D depth

The 3D depth section gives an element a sense of physical dimension. Choose a style, set a light direction and dial in how strong the effect is — or apply a one-click preset.

• Light direction — choose where the light comes from: tl (top-left), tr (top-right), bl (bottom-left) or br (bottom-right).
• Depth amount — controls how pronounced the 3D effect is.
• Presets — apply a ready-made depth look in one click.

Text

The Text section styles any element that shows text. Pick a font from the built-in list, set alignment and scale, choose a colour, and bring in your own typefaces.

Checkbox

For checkbox elements, the Checkbox section sets the Box side — whether the box sits on the left or the right of its label.

Line

For line elements, the Line section sets the style — solid, dashed or dotted — and the dash / dot spacing that controls how far apart the dashes or dots are.

Volume / progress

For volume and progress elements, this section chooses between fill and center mode for how the bar grows, and sets the label placement.

Animation

The Animation section brings an element to life. Animations play in the preview and are exported with your design, so what you see is what ships.

Image

For image elements, the Image section provides two ways to set the source:

• Import image from PC — the imported file ships in the resource with your design.
• Point to a path — reference an image that already exists in the resource.

Blueprint panel

The Blueprint panel controls how an element behaves as a container:

• Act as window / panel — makes the element behave as a window or panel container.
• Starts open — the element is shown in its open state from the start.

Opacity

Opacity is available per element, letting you make any individual element more or less transparent independently of the rest of your design.

The colour picker

Every colour control in the inspector — fill, outline, text and gradient stops — opens the same advanced colour picker. It gives you precise control across several modes and input methods.