Global Variables

Global variables allow users to manage a project's parameters and variations efficiently. By defining properties as variables, they can be updated in one central place, applying the changes automatically across the entire user interface. This guide explains how to create, categorize, and manage global variables using the updated Variable Manager.

Panel Overview

The Variable Manager is located in the Inspector panel. The interface provides advanced tools for structural organization, keyword filtering, and multi-variation tracking.

Structural Organization

The left sidebar introduces a multi-tiered system to keep complex projects organized:

• Collections: Created by clicking the plus (+) icon next to the section header, allowing you to separate variables into high-level environments.

• Groups: Created by clicking the plus (+) icon next to the section header within a selected collection, enabling you to sub-categorize variables for narrower scopes.

Variable Grid Controls

The central data grid displays your variables along with their parameters:

• Search variables: A dedicated search bar at the top right of the grid allows you to instantly filter through defined variables by name.

• Reorder handles: The drag-and-drop icon located to the left of each variable row allows you to manually sort the list hierarchy.

• Subject switches: Dedicated toggle options on the far right column allow you to configure individual variable subjects independently.

Managing Variables and Variations

Creating a Variable

1. Select your target Collection and Group from the left sidebar.

2. Click the Create variable button located at the bottom of the data grid.

3. Provide a name and select the appropriate type for the new variable row.

Managing Variations

Variables support side-by-side configurations across multiple project variations (such as variation 1 and variation 2), making it easy to track theme-specific values:

1. To add a new project look or state configuration, click the plus (+) icon on the variation header row.

2. Modify individual cell entries under each variation column to update how that variable reacts when the interface environment shifts.

Supported Variable Types

The grid layout accommodates six standard variable formats:

• Color: Controls solid values or smooth gradient transitions for style parameters like backgrounds or borders.

• Image: Centralizes graphics, icons, or branding image asset links for quick swapping across variations.

• Text: Stores content strings to streamline UI label updates and prepare text fields for localization workflows.

• Number: Holds explicit numeric constants to synchronize layout padding, dimensions, or progress caps across widgets.

• Boolean: Implements true/false logical switches to dynamically toggle flags or states on specific UI components.

• Array: Clusters a sequence of text options together to directly populate multi-option selectors such as dropdowns, rollers, or spinboxes.

Summary

The Variable Manager minimizes layout adjustments by handling project properties through structured nodes. Sorting data into designated collections and groups ensures clear variable management even as project complexity scales.

Switching Themes

After configuring themes and assigning color variables to elements, users can easily switch between them in the inspector panel. This allows the UI's appearance with different themes to be previewed in real-time, directly within the editor, making it easy to fine-tune your color choices instantly.

Bonus Tip

A theme change can also be triggered by an event. Simply add a new Event to an element (like a button) and select the Switch Theme action from the Actions list. This allows the entire UI's theme to be changed dynamically.

Summary

Global color variables help you modify the colors of a

entire interface quickly and consistently. There's no more need to manually find and replace colors; simply update the variable's value, and the change is applied everywhere automatically.