UI overview

#Interface map

SXL Studio UI is organized into four zones:

• Header: tabs and context actions.
• Left sidebar: search, trees, object lists.
• Main workspace: editors, inspect views, and code output.
• Footer bar: sync, export, and utility actions.

The exact layout depends on whether you run SXL Studio in Figma Design Mode or Figma Dev Mode.

#Mode-specific tab sets

For full Dev Mode behavior, see Dev Mode overview.

#Header behavior and scope actions

The header always reflects the active tab and exposes relevant actions.

#Context actions by tab

• Database / Tokens: apply actions with scope selector.
• Inspect (Design Mode): unlink/rebind actions (when enabled in your workspace).
• Dev Mode: part of controls move into dedicated Dev panels.

If header width becomes limited, tab switching falls back to a compact dropdown.

#Scope selector: Selection, Page, Document

The same scope selector is used by bulk operations such as:

• Apply Data in Database;
• Apply Tokens in Tokens;
• Unlink in Inspect.

Practical usage:

1. Use Selection for quick iteration on a focused area.
2. Use Page for section-level rollout before final checks.
3. Use Document for final project-wide synchronization.

#Left sidebar behavior

#In Design Mode

The shared sidebar container shows different content per tab:

• Database: data/mapping/assets trees and file operations;
• Tokens: token file/folder tree;
• Inspect: selected object hierarchy;
• Code: Code Connect component and link context.

#In Dev Mode

• On Inspect, the sidebar is hidden to maximize space for Dev Inspect Hub.
• On Code, the sidebar is visible for repository tree navigation.

#Main workspace behavior

The center area hosts one active workflow at a time:

• Dataset and mapping editors (Database);
• Token editor (Tokens);
• Inspect views (InspectPanel in Design Mode, Dev Inspect Hub in Dev Mode);
• Code views/editors (CodeView in Design Mode, DevCodeEditorPanel in Dev Mode).

In Dev Inspect Hub, sections are organized as:

• Info, MCP, Object model (collapsed by default);
• Code (expanded by default).

If no valid selection is available, the workspace shows an empty-state hint.

#Footer bar

The footer is the entry point for infrastructure actions:

• Git Sync and Cross-file Sync;
• transform/codegen helpers;
• export actions (available by mode and feature set).

#Recommended navigation patterns

#Designer path

1. Database overview
2. Tokens tab overview
3. Inspect overview
4. Tokens export: variables & styles

#Developer path

1. Dev Mode overview
2. Code generation
3. Code Connect
4. Edit Vue in Dev Mode