SXL Studio
Introduction

UI overview

How SXL Studio UI is organized in Figma Design and Figma Dev Mode: tabs, sidebar, workspace, and utility panels.

Core UI structure

SXL Studio UI is built around four zones:

  • top header (tabs and context actions);
  • left sidebar (search, trees, object lists);
  • central workspace (editors, inspect views, codegen);
  • bottom utility bar (sync, transform, export entry points).

The exact composition changes between Design Mode and Dev Mode in Figma.

Interface modes

Figma Design Mode (designer workflow)

Top-level tabs:

  • Database
  • Tokens
  • Inspect
  • Code

This mode is focused on data application, token workflows, and design-side binding maintenance.

Figma Dev Mode (developer workflow)

The interface adapts for developers: a different tab set, Dev Inspect Hub, and codegen-oriented tools. See Dev Mode overview for details.

Header behavior

The header always reflects the current tab and exposes contextual actions:

  • in Database/Tokens: Apply actions with scope (Selection, Page, Document);
  • in Inspect (Design): Unlink and Rebind actions (feature-flag dependent);
  • in Dev Mode, part of the workflow controls are moved into dedicated Dev panels;
  • the plugin window can be collapsed into a compact mode.

When available width is limited, tab switching falls back to a compact dropdown selector.

In Design Mode

The shared SideTree container renders tab-specific content:

  • Database: data/mapping/assets file tree with folders, drag-and-drop, context actions;
  • Tokens: token file/folder tree;
  • Inspect: selection/object tree and nested hierarchy;
  • Code: Code Connect-related component list and linkage context.

In Dev Mode

  • sidebar is hidden on Inspect to maximize space for Dev Inspect Hub;
  • sidebar remains active for Code and Tokens navigation.

Main workspace

The center area hosts one active workflow at a time:

  • dataset editor (Database);
  • mapping editor;
  • token file editor (Monaco + validation + visual/code modes);
  • InspectPanel (Design) or DevInspectHubView (Dev);
  • CodeView (Design) or DevCodeEditorPanel (Dev).

If nothing is selected, the UI shows an empty-state hint.

Bottom utility bar

FooterBar is used for infrastructure actions and global tooling entry points:

  • Git and Cross-file Sync;
  • transform/codegen helpers;
  • Export Asset / Export Variables and Styles (depending on mode and features).