SXL Studio
Dev Mode

Dev Mode

Как SXL Studio работает в Figma Dev Mode: языки в панели Code, компактное окно плагина с вкладками Inspect, Object model, Code и Code Connect, подсказка для AI-агента, экспорт изображений и ограничения режима.

В Dev Mode плагин становится инструментом разработчика: по выделенному слою он показывает сведения о компоненте, размеры и отступы с токенами, генерирует код для Vue 3, React, SwiftUI, UIKit, Kotlin, DivKit и JSON и связывает компоненты Figma с файлами репозитория.

Две точки входа

ГдеЧто доступноКогда удобно
Панель Code в Figma Dev ModeЯзыки SXL Studio в списке языков панели: Vue 3, React, JSON (Design), SwiftUI, UIKit, Kotlin, DivKitБыстро посмотреть код, не открывая плагин
Окно плагина в Dev ModeВкладки Inspect, Object model, Code, Code ConnectПолный разбор слоя, настройки генерации, привязка к коду

Чтобы открыть плагин в Dev Mode, переключите файл в Dev Mode, откройте раздел Plugins правой панели и выберите SXL Studio. Окно плагина встраивается в правую панель.

Вкладка Inspect

Вкладка Inspect в Dev Mode: сведения о компоненте, ссылки на документацию и код, подсказка для AI-агента.

БлокЧто показывает
ЗаголовокИмя слоя и его тип
СведенияName, Library, Node ID, Component Key. Значения копируются по клику
СсылкиСсылки Docs и Code на файлы, привязанные через Code Connect или заданные в настройках репозитория
Agent promptГотовая подсказка для AI-агента с шагами через MCP-сервер Figma и ссылкой на слой. Язык цели выбирается бейджем, например VUE 3. Кнопки Copy MCP prompt и Open this layer in Figma

Пока ничего не выделено, вкладка предлагает выбрать фрейм, компонент или инстанс на холсте и даёт кнопку Export Asset… для экспорта изображений.

Вкладка Object model

Object model: схема отступов с токенами, список слоёв и таблицы Layout и Spacing.

  • Чипы области сверху переключают между выделенным слоем и его вложенными компонентами.
  • Export asset открывает экспорт изображений для текущего слоя.
  • Схема показывает отступы, промежутки и размеры с именами переменных, например var(--space-md).
  • Поле Find layer и список слоёв позволяют выбрать вложенный слой, не возвращаясь на холст.
  • Ниже итоговые значения: размер, отступы, промежуток, радиус, обводка, а также таблицы Layout и Spacing с токенами напротив каждого значения.

Вкладка Code

Генерация кода по выделению: выбор языка и секции, режимы Decomposed и Raw, копирование и настройки генерации для файла. Подробно: Генерация кода.

Вкладка Code Connect

Рабочая область репозитория: слева дерево файлов .vue из папки кода Git-подключения, справа редактор с кнопками View diff, Save & Publish и Connect. Здесь правят компоненты и привязывают их к слоям Figma. Подробно: Code Connect и Storybook и Редактирование Vue.

Подвал

Подвал в Dev Mode тот же, что и в Design: текущий источник и ветка, Pull и Push, настройки синхронизации. Токены и данные в Dev Mode не редактируются, для этого переключитесь в Design.

Экспорт изображений

Растровый экспорт доступен из пустого состояния вкладки Inspect, из Object model и из подвала. Все пути открывают окно Download на вкладке Export Asset. Подробно: Экспорт изображений.

Ограничения Dev Mode

  • Изменения на холсте в Dev Mode недоступны: плагин только читает слои.
  • Figma может ограничивать запись служебных данных на слои. Привязки Code Connect всё равно сохраняются в файл реестра в репозитории, а чтобы закрепить их на самом слое, откройте файл в Design.
  • Список плагинов Dev Mode показывает только плагины с поддержкой Dev Mode; SXL Studio в него входит.

Рекомендуемый порядок для разработчика

  1. Один раз настройте Repository connection во вкладке Code Connect.
  2. Выделите компонент и проверьте код во вкладке Code, переключая языки.
  3. Откройте нужный .vue во вкладке Code Connect, внесите правки, посмотрите diff и опубликуйте.
  4. Свяжите реализацию с компонентом кнопкой Connect или через полную форму Code Connect.

Связанные страницы