SXL Studio
Dev Mode

Обзор

Dev Mode в SXL Studio: нативный Codegen Figma + Dev-рабочая область плагина для frontend и mobile разработчиков.

Что даёт Dev Mode

Dev Mode в SXL Studio — это developer-first сценарий для:

  • Frontend (Vue 3, React, CSS)
  • iOS (SwiftUI, UIKit)
  • Android (Kotlin Compose)

Вы получаете генерацию кода по выделению на холсте, корректный вывод переменных/токенов и связку с кодовой базой через Code Connect.

Две точки входа в Figma Dev Mode

SXL Studio работает в Dev Mode параллельно двумя способами.

1. Нативная панель Code в Figma (встроенный Codegen-провайдер)

SXL Studio регистрирует языки Codegen в Figma Dev Mode:

  • Vue 3
  • React
  • JSON (Design)
  • SwiftUI
  • UIKit
  • Kotlin
  • DivKit

Этот путь работает без открытия UI плагина: выбираете узел на холсте и используете панель Code в Figma.

2. Окно плагина SXL Studio в Dev Mode

Если открыть плагин в Dev Mode, SXL переключается в компактную developer-оболочку:

  • доступны только вкладки Inspect и Code
  • UI редактирования Database/Tokens в этом режиме скрыт

Вкладка Inspect (Dev Inspect Hub)

Dev Inspect Hub состоит из четырёх аккордеонов:

  • Info
  • MCP
  • Object model
  • Code

Состояние по умолчанию при открытии:

  • Info — свернут
  • MCP — свернут
  • Object model — свернут
  • Code — развернут

Назначение секций

  • Info: идентификация слоя (name, library/source navigation, Node ID, Component Key), плюс Docs/Code-ссылки из Code Connect/глобальных настроек репозитория.
  • MCP: готовый контекст для промпта и быстрые подсказки для Remote/MCP-сценариев.
  • Object model: scope-aware список слоёв, геометрия/box model, строки свойств с токенами, превью.
  • Code: переключение языка (Vue 3, React, SwiftUI, UIKit, Kotlin, DivKit, JSON), секции и режима отображения (Styled, Decomposed, Raw) + copy.

Генерация в этой секции выполняется на main thread тем же pipeline, что и нативный Figma Codegen.

Через кнопку с шестерёнкой в секции Code настраиваются file-level дефолты генерации для текущего Figma-файла: компонент и правила имён иконок, шаблоны boolean/swap props, root CSS class, регистр CSS-классов, путь импорта компонентов, Swift token enum, drawable prefix, опциональный data-testid и header comments.

Вкладка Code (рабочая область Vue-репозитория)

Вкладка Code — это workspace для .vue:

  • слева: ленивое дерево файлов репозитория из настроенного Code folder
  • справа: Monaco-редактор с View diff, Save & Publish, Connect

Ключевое поведение:

  • из дерева редактируются только .vue
  • Cmd/Ctrl + S запускает Save & Publish
  • перед сохранением есть preflight-проверка remote и conflict-диалог
  • связанные Vue-файлы помечаются в дереве через Code Connect registry

В Dev Mode это code-only Git-подключение. Database и Tokens по-прежнему управляются из Design Mode sync settings, поэтому подключение только с Code folder может показывать "nothing to pull" для data/token sync.

Экспорт ассетов в Dev Mode

Растровый экспорт доступен из Dev-сценариев:

  • пустое состояние Inspect: Export Asset…
  • секция Object model: Export asset
  • кнопка Export в footer: Download modal

Все пути открывают один и тот же Download modal с вкладкой Export Asset.

Важные ограничения Dev Mode

  • В Dev Mode запись node Plugin Data / Dev Resources может быть ограничена контекстом Figma.
  • SXL всё равно сохраняет привязки в diff-code-connect.<fileKey>.json (или fallback по slug), поэтому командный registry остаётся консистентным.
  • Чтобы гарантированно зафиксировать node-level метаданные при блокировке записи, откройте файл в Design Mode.

Рекомендуемый frontend-поток

  1. Настройте repository settings в Code → Repository connection.
  2. В Inspect → Code проверьте сгенерированный вывод Vue, React, SwiftUI, UIKit, Kotlin, DivKit или JSON.
  3. Во вкладке Code откройте .vue, внесите правки, проверьте diff, опубликуйте.
  4. Свяжите реализацию через Connect (быстрый путь) или полный Code Connect из Inspect → Info → Code Connect.

Связанные разделы