Обзор интерфейса
Как устроено окно плагина: вкладки и кнопки шапки, боковая панель с деревом файлов, редактор, футер с источником данных, окно синхронизации и панели Dev Mode.
Окно плагина состоит из четырёх зон: шапка с вкладками, боковая панель с деревом, рабочая область и футер. Набор вкладок зависит от режима Figma: Design Mode или Dev Mode.
Плагин в Design Mode: шапка, дерево коллекций и файлов, область редактора и футер.
Шапка
Шапка в Design Mode: переключатель боковой панели, четыре вкладки, кнопки Apply Tokens и Apply Data, Mode context и сворачивание окна.
| Элемент | Что делает |
|---|---|
| Иконка слева | Показывает или скрывает боковую панель |
| Tokens | Файлы токенов, коллекции, редактор, экспорт и импорт переменных и стилей |
| Database | Наборы данных JSON и CSV, маппинги на слои, генерация экземпляров |
| Inspect | Привязки токенов у выделенного слоя, восстановление инстансов, замена библиотек |
| Code Connect | Связь компонентов Figma с кодом и Storybook |
| Apply Tokens и Apply Data | Применяют токены или данные к выделению. Стрелка справа открывает выбор области: Selection, Page или Document |
| Иконка режимов | Mode context: какой режим коллекции применять к странице или выделению. См. Режимы |
| Стрелки в углу | Сворачивают плагин в компактную полоску и разворачивают обратно |
Если окно узкое, вкладки превращаются в выпадающий список.
Боковая панель
Верх боковой панели на вкладке Tokens: поиск, новый файл, новая папка, свернуть всё, сортировка.
Содержимое панели меняется по вкладкам:
- Tokens: секции Collections и Files с числом элементов, поиск по токенам, кнопки создания файла и папки, свернуть или развернуть дерево, сортировка. Внизу действия Export variables & styles, Import variables & styles, Collection Settings и Reset Diff-ID.
- Database: деревья данных, маппингов и изображений с кнопками New Data, New Mapping, папка и загрузка файлов, внизу Generate instances.
- Inspect: дерево выделенных слоёв с отметками привязок, внизу Ghost Heal и Swap libs & variables.
- Code Connect: список компонентов, связанных с кодом, и настройка Repository connection.
Границу между панелью и рабочей областью можно перетаскивать, а клавиши ← и → при фокусе на границе меняют ширину.
Рабочая область
Здесь открывается то, что выбрано в боковой панели: визуальный или кодовый редактор файла токенов, редактор набора данных или маппинга, карточки Inspect, форма Code Connect. Пока ничего не выбрано, показана подсказка, например Select a file to edit.
Футер
Футер при активном Git-подключении.
Слева источник данных и операции с ним, справа служебные кнопки.
| Слева | Что показывает |
|---|---|
| Чип источника | Local для Plugin Local, имя ветки для Git, имя профиля для Local Workspace. Клик открывает меню переключения источников и веток |
| Refresh, Pull, Push | Только для Git. Синяя точка значит, что есть что забрать или отправить |
| Состояние | Для Local Workspace: Watching, Conflict, Reload |
| Справа | Что делает |
|---|---|
| Import from computer | Загружает папку с JSON-файлами токенов и данных |
| Export to computer | Открывает окно Download с тремя вкладками: All Data (ZIP со всеми файлами), Tokens → Code (CSS, Swift, Kotlin и другие форматы), Export Asset (растровый экспорт выделения) |
| Remote Connect | Подключает плагин к SXL Bridge для работы AI-агентов и IDE. См. Утилита Bridge |
| Sync settings | Окно синхронизации с вкладками Git Sync, Local Workspace, Cross-file, Diagnostics |
| Help & Documentation | Открывает этот сайт |
| Theme | Светлая, тёмная или системная тема плагина |
Меню Theme: Light, Dark, System.
Окно Download, вкладка All Data: выгрузка всех данных плагина одним ZIP.
В узком окне правые кнопки собираются в меню More actions.
Окно Synchronization settings
Шестерёнка Sync settings открывает окно с четырьмя вкладками. Оно описано в разделе Источники токенов и синхронизация.
Окно синхронизации на вкладке Git Sync.
Dev Mode
В Dev Mode у панели плагина другой набор вкладок:
| Вкладка | Что показывает |
|---|---|
| Inspect | Имя, библиотека, свойства выделенного компонента, привязки токенов, ссылки на документацию и код, блок для AI-агентов с готовым промптом |
| Object model | Дерево слоёв с размерами, отступами и превью, кнопка экспорта изображения |
| Code | Сгенерированный код на выбранном языке с переключателями Decomposed и Raw и настройками генерации |
| Code Connect | Дерево репозитория с файлами .vue, редактор и публикация в Git |
Код выделенного слоя также доступен в нативной панели Code Figma без открытия плагина: выберите там язык SXL Studio. Подробнее: Dev Mode.
Горячие клавиши
| Где | Клавиши |
|---|---|
| Редактор кода токенов | Cmd/Ctrl + S сохраняет файл |
| Окна Pull и Push | F7 и Shift + F7 переходят между изменениями |
| Таблица коллекций | Cmd/Ctrl + A выделить все ячейки, F2 редактировать, Space отметить строку, Shift + F10 контекстное меню |
| Database | Cmd/Ctrl + R или F2 переименовать, Delete удалить, Shift и Cmd/Ctrl для выбора нескольких файлов |
| Модальные окна | Esc закрывает |