SXL Studio
Dev Mode

Code Connect & Storybook

Привязка компонентов Figma к реальным исходникам, ведение diff-code-connect registry и показ дизайн-контекста в Storybook.

Что делает Code Connect

Code Connect связывает компонент в Figma с реальными implementation-файлами и usage-метаданными.

В Dev-сценариях это даёт:

  • docs/code ссылки в Inspect Info
  • code-context вкладки в нативном Figma Codegen
  • маркеры связанных файлов в Dev Code дереве .vue для Vue-привязок
  • Git-friendly registry-файл, который можно коммитить командой

Где хранятся данные

Используются два слоя хранения:

  1. Node Plugin Data (codeConnect) на component-like нодах
  2. Registry файл diff-code-connect.<fileKey>.json (fallback по slug, если file key недоступен)

Registry — это долговременный source of truth для командной синхронизации и Storybook.

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

  • В Dev Mode Figma может блокировать запись node Plugin Data / Dev Resources.
  • В этом случае SXL всё равно пишет registry-файл и показывает уведомление, что node-level привязку нужно зафиксировать из Design Mode.

Где настраивать в Dev Mode

Глобальные настройки (repository/docs)

Откройте Code tab → Repository connection.

Поля:

  • Figma file URL or key (рекомендуемый fallback для $figmaFileKey)
  • Repository URL
  • Storybook / docs (опционально)

Полная форма привязки компонента

Откройте Inspect → Info → Code Connect.

Этот modal использует ту же binding-форму, что и полный Code Connect UI, и поддерживает:

  • Display name
  • Import path
  • Snippet template
  • Multiple files с per-file framework/path/docs/snippet/instructions
  • Storybook Integration блок

Первая строка файла по умолчанию создаётся как React, но её можно переключить на Angular, Vue 3, HTML, SwiftUI, Kotlin или Compose.

Быстрая привязка из Vue-редактора

Во вкладке Code откройте .vue и нажмите Connect.

Это создаёт минимальную vue3-привязку файла к выбранному component/component set.

Этот быстрый путь намеренно Vue-specific, потому что Dev Code editor сейчас открывает редактируемые .vue файлы. Для React, SwiftUI, UIKit-adjacent source links, Kotlin, Compose, HTML или Angular используйте полную форму Code Connect.

Справочник полей Code Connect

Основные поля привязки

  • Display name
  • Import path (опционально)
  • Snippet template (опционально)
  • Files[]

Поля файла (per-file)

  • Framework (React, Angular, Vue 3, HTML, SwiftUI, Kotlin, Compose)
  • File path (repo-relative путь или вставленный Git blob URL)
  • Storybook/docs URL (опциональный override)
  • Component name (опционально)
  • Import path (опционально)
  • Custom snippet (опционально)
  • AI instructions (опционально)

Storybook Integration

Настройки Storybook сохраняются в той же registry-записи (отдельный экспорт не нужен).

Доступные controls:

  • Design Embed
  • Composition JSON
  • Metadata
  • Description
  • Tokens (ready/not ready)
  • Status (Complete, Ready for Dev, In Progress, Backlog)

Если включён Composition JSON, можно выбрать composition token file ($type: composition) из token files плагина.

Путь через Storybook addon

Используйте @sxl-studio/storybook-addon и передавайте ему registry, полученный из diff-code-connect.<fileKey>.json.

Подробности по API/preset:

Что видит разработчик в Dev Mode и Codegen

  • В Inspect Info: Docs/Code ссылки и source-file ссылки.
  • В Code tree: связанные .vue отмечены иконкой check.
  • В нативном Codegen: при наличии binding данных добавляются вкладки Code Connect (например Import & Usage и вкладки файлов репозитория). Они появляются рядом с выбранной целью codegen (Vue 3, React, SwiftUI, UIKit, Kotlin, DivKit или JSON) и используются в MCP prompt context внутри Dev Inspect.

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

  1. Один раз настройте Repository connection.
  2. Привяжите компоненты через Inspect → Info → Code Connect.
  3. При необходимости заполните Storybook Integration metadata.
  4. Закоммитьте diff-code-connect.<fileKey>.json.
  5. Подключите registry в конфигурации Storybook addon.

Решение проблем

В UI "Connected", но node-level link не виден в Figma resources

Скорее всего, ограничение записи Dev Mode. Откройте файл в Design Mode и пересохраните binding.

Нет Code Connect вкладок в нативном Codegen

Проверьте:

  • выбрана component-like нода и она действительно связана
  • registry entry имеет linked: true
  • repository settings валидны

В Vue-дереве нет маркеров linked

Обновите Code tree и убедитесь, что diff-code-connect.*.json загружен в активном Git scope.

В Vue tree помечаются только vue3 bindings. Привязки других фреймворков по-прежнему видны в Inspect Info и Codegen tabs.

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