Начало работы

SXL Studio — плагин Figma для работы с дизайн-системой как с кодом. Токены хранятся в JSON-файлах, из них плагин создаёт переменные и стили Figma, применяет их к макетам, проверяет привязки и отдаёт разработчикам готовый код. Все функции плагина доступны бесплатно.

#Что входит в SXL Studio

• Плагин SXL Studio для файлов Figma: вкладки Tokens, Database, Inspect и Code Connect в Design Mode, панели Inspect, Object model, Code и Code Connect в Dev Mode.
• Утилиты для команды разработки: Bridge связывает плагин с локальными файлами и AI-агентами, Transformer превращает токены в CSS, Swift и Kotlin, Resolver подсказывает значения токенов в VS Code, Storybook Addon показывает связь компонентов с Figma.

#Кому что читать

#Что нужно

• Файл Figma Design, в котором вы можете редактировать содержимое.
• Плагин SXL Studio из Figma Community. Если в организации плагины ограничены, попросите администратора одобрить SXL Studio.
• Для Dev Mode нужен доступ к Dev Mode по правилам вашего тарифа Figma. Подробности в справке Figma: Guide to Dev Mode.
• Для Git-синхронизации нужен репозиторий на GitHub или GitLab и токен доступа. Для Local Workspace и Local Storage нужен запущенный SXL Bridge. Начать можно и без них.

#Установка и первый запуск в Design Mode

1. Откройте страницу SXL Studio в Figma Community и нажмите Install. Если плагин уже установлен, кнопка называется Open in Figma.
2. Откройте рабочий файл в Figma Design.
3. Запустите плагин любым способом: Resources (Shift + I) → Plugins → SXL Studio; или правая кнопка на холсте → Plugins → SXL Studio; или быстрые действия (Cmd/Ctrl + /) → «SXL Studio».
4. Плагин откроется на вкладке Tokens. Слева дерево коллекций и файлов, справа область редактора, внизу футер с источником данных.

При первом запуске источник — Plugin Local: файлы хранятся внутри плагина на вашем компьютере. Чтобы получить токены, выберите один из путей:

• Import variables & styles внизу вкладки Tokens: плагин прочитает переменные и стили текущего файла Figma и создаст из них JSON-файлы. Подробнее: Импорт из Figma.
• Import from computer в футере: загрузите папку с JSON-токенами, например экспортированную ранее.
• Sync settings в футере: подключите репозиторий GitHub или GitLab и нажмите Pull. Подробнее: Источники токенов и синхронизация.

#Первые 10 минут дизайнера

1. Откройте любой файл токенов в дереве: справа появится визуальный редактор с группами токенов по типам.
2. Нажмите Export variables & styles, отметьте нужные коллекции и типы, нажмите Export. В панели Variables Figma появятся коллекции и переменные, а в панели стилей текстовые и цветовые стили.
3. Выделите фрейм на холсте и нажмите Apply Tokens: плагин привяжет переменные к слоям по именам токенов.
4. Откройте вкладку Inspect, чтобы увидеть привязки выделенного слоя.

#Запуск в Dev Mode для разработчиков

1. Откройте тот же файл и переключитесь в Dev Mode (Shift + D).
2. Код выделенного слоя можно получить без открытия плагина: в нативной панели Code выберите язык SXL Studio: Vue 3, React, SwiftUI, UIKit, Kotlin, DivKit или JSON.
3. Полная панель плагина открывается через вкладку Plugins в правой панели Dev Mode или через Resources → Plugins → SXL Studio. В ней четыре панели: Inspect, Object model, Code и Code Connect.
4. Выделяйте слои на холсте: панели показывают свойства, привязки токенов, размеры и сгенерированный код.

Подробнее: Dev Mode.

#Если плагин не открывается

• Закройте и снова откройте файл, затем запустите SXL Studio из Resources.
• Проверьте, что политика организации разрешает этот плагин.
• Для Dev Mode проверьте доступ к Dev Mode у вашей учётной записи.
• Переустановите плагин из Community.

#Где искать помощь

• Кнопка Help & Documentation в футере плагина открывает этот сайт.
• Вкладка Diagnostics в окне Sync settings показывает состояние подключений и собирает отчёт для поддержки: Диагностика.