Обзор интерфейса

#Карта интерфейса

Интерфейс SXL Studio состоит из четырёх зон:

• Header: вкладки и контекстные действия.
• Левая боковая панель: поиск, деревья файлов, списки объектов.
• Центральная рабочая область: редакторы, inspect-представления и код.
• Footer bar: синхронизация, экспорт и служебные действия.

Фактический вид зависит от режима запуска: Figma Design Mode или Figma Dev Mode.

#Набор вкладок по режимам

Подробно про Dev Mode: Dev Mode — обзор.

#Поведение Header и scope-операции

Header всегда отражает активную вкладку и показывает релевантные действия.

#Контекстные действия по вкладкам

• Database / Tokens: apply-действия со scope-переключателем.
• Inspect (Design Mode): unlink/rebind (если включено в вашей конфигурации).
• Dev Mode: часть управления перенесена в специализированные Dev-панели.

Если ширины Header недостаточно, переключение вкладок автоматически переходит в компактный dropdown.

#Scope-переключатель: Selection, Page, Document

Один и тот же scope-переключатель используется в массовых операциях:

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

Практический сценарий:

1. Selection — быстрые точечные итерации.
2. Page — rollout в рамках страницы перед финальной проверкой.
3. Document — финальная синхронизация по проекту.

#Поведение левой боковой панели

#В Design Mode

Один контейнер боковой панели показывает разный контент в зависимости от вкладки:

• Database: деревья data/mapping/assets и файловые операции;
• Tokens: дерево token-файлов и папок;
• Inspect: иерархия выбранных объектов;
• Code: контекст компонентов и связей Code Connect.

#В Dev Mode

• На вкладке Inspect боковая панель скрыта, чтобы освободить место для Dev Inspect Hub.
• На вкладке Code боковая панель активна для навигации по дереву репозитория.

#Поведение центральной рабочей области

В центре отображается только один активный сценарий:

• редакторы Dataset и Mapping (Database);
• редактор токенов (Tokens);
• inspect-представления (InspectPanel в Design Mode, Dev Inspect Hub в Dev Mode);
• code-представления/редакторы (CodeView в Design Mode, DevCodeEditorPanel в Dev Mode).

В Dev Inspect Hub секции организованы так:

• Info, MCP, Object model (по умолчанию свернуты);
• Code (по умолчанию развернут).

Если подходящее выделение отсутствует, показывается empty-state подсказка.

#Нижняя панель (Footer)

Footer — точка входа в инфраструктурные действия:

• Git Sync и Cross-file Sync;
• transform/codegen-инструменты;
• export-действия (зависят от режима и фич).

#Рекомендуемые сценарии навигации

#Путь дизайнера

1. Database — обзор
2. Обзор вкладки Tokens
3. Inspect — обзор
4. Экспорт токенов: variables и styles

#Путь разработчика

1. Dev Mode — обзор
2. Генерация кода
3. Code Connect
4. Редактирование Vue в Dev Mode