SXL Studio
Введение

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

Установка SXL Studio, режимы работы в Figma и первый сценарий запуска для дизайнеров и разработчиков.

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

SXL Studio — это экосистема для командной работы с дизайн-системой в Figma. В неё входят:

  • плагин SXL Studio для файлов Figma;
  • этот сайт документации (настройка, рабочие процессы, API-справка);
  • дополнительные утилиты для репозиторных и pipeline-сценариев:

Для кого это руководство

  • Дизайнеры: работа с токенами, data/mapping и консистентностью макетов.
  • Разработчики: Dev Mode, inspect-поток, codegen и Code Connect.
  • Владельцы дизайн-системы: стандартизация и предсказуемый командный процесс.

Перед началом

  1. Убедитесь, что у вас есть доступ к нужному Figma Design файлу.
  2. Установите SXL Studio из Figma Community.
  3. Если в организации ограничено использование плагинов, запросите одобрение у администратора.
  4. Для Dev Mode-потока проверьте тип вашего seat и доступ к Dev Mode.

Важно: доступность Dev Mode и типы seat управляются правилами Figma. См. официальный Guide to Dev Mode.

Установка и запуск в Figma Design Mode (для дизайнеров)

  1. Откройте страницу SXL Studio в Figma Community.
  2. Нажмите Install (или Open in Figma, если плагин уже установлен).
  3. Откройте рабочий файл в Figma Design Mode.
  4. Запустите плагин одним из способов:
    • Resources (Shift + I) -> Plugins -> SXL Studio;
    • контекстное меню: Plugins -> SXL Studio;
    • быстрые действия (/) -> поиск SXL Studio.
  5. При первом запуске проверьте и подтвердите запрашиваемые разрешения.

Рекомендуемые первые 10 минут (дизайнерский путь)

  1. Прочитайте Обзор интерфейса.
  2. Настройте данные и маппинги в Database — обзор.
  3. Настройте токены в Обзор вкладки Tokens.
  4. Проверьте привязки и связи в Inspect — обзор.

Запуск SXL Studio в Figma Dev Mode (для разработчиков)

  1. Откройте тот же файл и переключитесь в Dev Mode (Shift + D).
  2. Используйте встроенный codegen в нативной панели Code (выберите язык вывода SXL Studio).
  3. Откройте панель плагина SXL Studio через:
    • вкладку Plugins в правом сайдбаре Dev Mode, или
    • Resources (Shift + I) -> Plugins -> SXL Studio.
  4. Выделяйте слои на холсте, чтобы получить inspect-данные, привязки и код.
  5. Продолжайте с разделами Dev Mode — обзор и Генерация кода.

Подсказка: в панели плагина Dev Mode по дизайну доступны только вкладки Inspect и Code. Вкладки Database и Tokens остаются в Design Mode.

Если плагин не отображается

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

Что дальше