Генерация кода — SXL Studio Docs

Плагин генерирует код по выделенному слою в двух местах, и результат в них одинаковый:

Где	Как открыть	Для чего
Панель Code в Figma Dev Mode	Выберите слой, в панели Code выберите язык SXL Studio	Быстрый просмотр без открытия плагина
Вкладка Code плагина в Dev Mode	Откройте плагин из списка плагинов Dev Mode, выберите слой	Секции, режимы отображения, настройки генерации, копирование

Языки

Язык	Что получается
Vue 3	Однофайловый компонент: `<script setup lang="ts">`, шаблон, стили с CSS-переменными
React	Функциональный компонент `.tsx` с типизированными props, CSS Modules и `clsx`
JSON	Описание композиции: структура, свойства компонента, стили
SwiftUI	Swift-код с обращением к перечислению токенов
UIKit	Класс `UIView` со стеками, надписями и изображениями
Kotlin	Kotlin Compose с константами токенов
DivKit	JSON-документ карточки для мобильных приложений на DivKit

В панели Code Figma языки называются так же, JSON подписан как JSON (Design).

Вкладка Code плагина

Вкладка Code: язык Vue 3, секция All, переключатели Decomposed и Raw, кнопка Copy и шестерёнка Codegen settings.

Элемент	Что делает
Список языков	Vue 3, React, SwiftUI, UIKit, Kotlin, DivKit, JSON
Список секций	All, Template, Script, Styles, Variables, References. Для SwiftUI и Kotlin секции Script нет
Decomposed	Раскладывает составные стили на отдельные свойства, ссылки на переменные сохраняются
Raw	Подставляет итоговые значения вместо переменных. Всегда разложенный вывод
Copy	Копирует текущую секцию
Шестерёнка	Открывает Codegen settings для этого файла Figma

Список языков во вкладке Code.

Секции Variables и References одинаковы для всех языков: первая показывает, какие переменные собраны с выделения, вторая перечисляет вложенные компоненты и предупреждения. Для JSON секции читаются по смыслу: Template показывает структуру, Script корневые поля, Styles стили.

Режимы отображения

Режим	Как включить	Что происходит с токенами
Styled	Оба переключателя выключены	Используются ссылки на составные стили, например текстовые стили и стили эффектов, переменные сохраняются
Decomposed	Включён Decomposed	Составные стили разложены на отдельные свойства, переменные сохраняются
Raw	Включён Raw	Значения подставлены литералами, без ссылок на переменные

Styled не абсолютен: если у слоя нет подходящей ссылки на стиль, генератор берёт фактические значения. На очень больших деревьях вывод может быть усечён, тогда в коде появляется заметка об этом.

Панель Code в Figma

В нативной панели Code каждый язык даёт набор вкладок. Например, для Vue 3: All, Script Setup, Template, Styles, Variables, Reference components, для React: All, Template, Script, Styles, Variables, Reference components, для мобильных языков: основной файл, Variables и Reference components. Если компонент связан через Code Connect, добавляются вкладки с импортом и примером использования. Вкладка Debug появляется только при наличии отладочной трассы.

Наборы вариантов

Если выделен набор вариантов, Vue 3 и React строят один компонент с props для осей вариантов и сопоставлением классов, DivKit строит одну карточку с отдельным состоянием на каждый вариант. Число вариантов видно в заголовке вкладки.

Codegen settings

Шестерёнка во вкладке Code открывает настройки генерации для текущего файла Figma. Пустые поля означают значения по умолчанию.

Окно Codegen settings: разделы Naming, Styling, Imports и Mobile, кнопки Reset и Save.

Раздел	Поля
Naming	Icon component: обёртка для иконок. Icon name pattern: шаблон имени иконки. Bool collision и Swap collision: как переименовать булево свойство или свойство подмены при совпадении имён
Styling	Root class: класс корневого элемента. Class case: `kebab-case` или `camelCase`. Header comment: комментарий-шапка в стилях
Imports	Component import path: шаблон пути импорта, например `@/components/{Name}`
Mobile	Swift token enum, Drawable prefix для Android, DivKit profile, DivKit validation, DivKit profile JSON
Testing	Test attribute: атрибут для тестов, например `data-testid`. Пусто означает выключено
Icon rules	Список правил именования иконок по странице, секции, набору, варианту или описанию, Default pattern и Gate (description)

Подстановки в шаблонах иконок:

Подстановка	Значение
`{baseName}`, `{name}`	Нормализованное имя иконки или слоя
`{setName}`	Имя набора компонентов
`{pageName}`	Имя страницы Figma
`{sectionName}`	Ближайшая секция
`{variant.<ось>}`	Значение оси варианта

Правила проверяются сверху вниз, побеждает первое совпавшее. Если ни одно не подошло, используется Default pattern. Пример: Icon component: Icon, Icon name pattern: {baseName}, правило «если pageName = Icons и variant.Size = 24, то ui-{baseName}-{variant.Size}`».

Особенности языков

React. Компонент для React 19: .tsx, типизированные props, ReactNode для слотов и подмен, CSS Modules и clsx, пути импорта из настроек, необязательный тестовый атрибут. Слои-слоты становятся children, вложенные компоненты импортируются как теги.

UIKit. Класс UIView со стеками UIStackView, надписями UILabel и изображениями UIImageView. Цвета, размеры, типографика и эффекты берутся из токенов там, где это возможно. Явные режимы Figma выводятся комментариями.

DivKit. Готовый к передаче JSON: card и при необходимости templates. Ссылки на токены превращаются в переменные DivKit вида @{token_name}, коллекции с несколькими режимами получают переменную режима и словарь значений. Фреймы и компоненты становятся container, текст text, линии separator. Секция References перечисляет заглушки и неподдержанные конструкции: проверьте её, если ожидания не совпали.

DivKit имеет профили и режимы проверки. DivKit profile: Generic подходит любому проекту, NewMain BDUI и Custom включаются вручную. DivKit validation: Strict Playground держит вывод совместимым с публичным плейграундом DivKit, Host App разрешает схемы и блоки, объявленные в профиле проекта. Профиль проекта задаётся в поле DivKit profile JSON:

JSON
{
  "icons": {
    "circle-info": { "image_url": "https://cdn.example.com/icons/circle-info.svg" }
  },
  "slots": {
    "slot.class:progress": { "type": "custom", "custom_type": "new_main_story_progress" }
  },
  "actions": {
    "cta": "div-action://open/details"
  },
  "fonts": {
    "SF Pro Display": "display"
  },
  "customTypes": ["new_main_story_progress"]
}

Иконки превращаются в image с адресом, слоты в контейнеры, кастомные блоки или шаблоны, действия в обработчики нажатий, шрифты в псевдонимы хоста. Если сопоставления нет или его запрещает режим проверки, плагин оставляет безопасную заглушку и пишет причину в References.

Если вывод не такой, как ожидалось

Переключите Decomposed и Raw, чтобы отделить поведение токенов от значений.
Откройте секцию Variables и проверьте, какие переменные собраны с выделения.
Убедитесь, что выделен нужный слой: компонент, вложенный слой или набор вариантов дают разный результат.
В панели Code Figma загляните во вкладку Debug, если она появилась.

#Языки

#Вкладка Code плагина

#Режимы отображения

#Панель Code в Figma

#Наборы вариантов

#Codegen settings

#Особенности языков

#Если вывод не такой, как ожидалось

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