Экспорт Переменных и Стилей
Полное руководство по экспорту токенов в Figma Variables и Styles: конфигурация config.json, коллекции, режимы, ссылки, diff-id, флаги экспорта.
Overview
Export — это процесс превращения ваших JSON-токенов в нативные объекты Figma: переменные (Variables) и стили (Styles). После экспорта токены становятся полноценными элементами дизайн-системы Figma, которые можно привязывать к свойствам, публиковать в библиотеке и использовать в других файлах.
Что создаётся при экспорте
| JSON-токен | Объект Figma |
|---|---|
color | Variable (COLOR) |
dimension, spacing, sizing, borderRadius, borderWidth, opacity, number, fontSize, lineHeight, letterSpacing, paragraphSpacing, paragraphIndent | Variable (FLOAT) |
fontFamily, fontWeight, text | Variable (STRING) |
boolean | Variable (BOOLEAN) |
typography | Text Style |
shadow, effects, blur, backdrop-blur, glass | Effect Style |
fill, gradient, img | Paint Style |
grid | Grid Style |
Типы
fontStyle,strokeStyle,textCase,textDecoration,duration,cubicBezier,transition,templateиcompositionне создают отдельные Variables при Export Variables.customи чистые custom$typeраспознаются по безопасным формам$value, когда это возможно; неоднозначные custom-значения остаются внутренними метаданными.
Для неизвестного проектного $type строковые значения распознаются консервативно:
Пример $value | Результат экспорта |
|---|---|
"312", "1", "0" | Variable (FLOAT) |
"{base.size} * 2", "312 - 12" | Variable (FLOAT) |
"true", "false", "on", "off" | Variable (BOOLEAN) |
"312Text", "312-text", "else-12" | Variable (STRING) |
Boolean распознаётся без учёта регистра, но только по полным литералам true, false, on и off. Наличие цифр или оператора внутри строки само по себе не делает значение числом: вся строка должна быть корректным числовым литералом или вычисляемым выражением.
Если существующий SXL-managed Variable для custom-значения "0" или "1" уже имеет тип BOOLEAN, Export сохраняет его ID и привязки, а не пересоздаёт автоматически, и сообщает об этом compatibility-сценарии. Чистый экспорт создаёт FLOAT. Перевод существующего Variable в FLOAT требует явного пересоздания и решения о перепривязке.
Как читать результат экспорта
- Уведомление об успехе закрывается автоматически через четыре секунды.
- Warning или Error остаётся открытым, пока вы сами его не закроете: полный отчёт можно спокойно прочитать или скопировать.
interpreted as …означает, что неизвестный проектный$typeбезопасно сопоставлен с типом Figma Variable или Style. Если токен включён, выбран и не является source-only, Export использует это сопоставление.preserved as custom; not exported to Figmaозначает, что JSON-значение сохранено для редактирования, Apply, Generate или Code, но отдельная Figma Variable или Style для него не создаётся.Skipped token …означает, что указанный путь не был записан. Остальные валидные пути продолжают экспортироваться, а существующее значение Figma по пропущенному пути остаётся без изменений. Исправьте указанное значение или ссылку и повторите Export.
Экспорт без созданий, обновлений и удалений всё равно может завершиться с notices. В таком случае уведомление показывает Export completed with warnings, а не No changes.
Поведение при переименовании (сохранение ID по умолчанию)
Если вы переименовываете уже экспортированный путь токена (например sp.reg.md → sp.md) и сохраняете его смысл, Export обрабатывает это как rename update:
- существующий Variable/Style переиспользуется;
- его Figma
idсохраняется; - привязки в компонентах и файлах не ломаются;
- в статистике экспорта это считается как modified, а не create+delete.
Если включён Delete orphaned variables & styles, и кейс переименования неоднозначный (например, несколько старых путей могут соответствовать одному новому), Export применяет безопасный fallback:
- откладывает удаление сироты для такого старого пути в текущем прогоне;
- сохраняет стабильность ID и не делает рискованных «угадываний»;
- автоматически повторяет удаление в следующих прогонах, когда сопоставление становится однозначным.
Файл config.json
config.json — центральный конфигурационный файл, который управляет экспортом. Он определяет:
- Какие коллекции создаются в Figma
- Какие режимы (modes) есть у каждой коллекции
- Какие файлы токенов входят в каждый режим
- Как коллекции ссылаются друг на друга
Полная структура
{
"$schema": "sxl-studio/config",
"$version": "1.0",
"settings": {
"remBase": 16,
"autoExportOnPull": false
},
"collections": [
{
"name": "Primitives",
"enabled": true,
"hiddenFromPublishing": false,
"ref": [],
"modes": [
{
"name": "Default",
"enabled": true,
"ref": [],
"files": {
"colors.json": "enabled",
"spacing.json": "enabled",
"typography.json": "enabled"
}
}
]
}
],
"compositions": {
"outputMode": "component-set",
"files": {
"button.json": "enabled"
}
}
}
Описание полей
Корневые поля
| Поле | Тип | Описание |
|---|---|---|
$schema | "sxl-studio/config" | Идентификатор схемы (устанавливается автоматически) |
$version | string | Версия конфигурации (по умолчанию "1.0") |
settings | object | Глобальные настройки |
collections | array | Массив коллекций переменных |
compositions | object | Настройки для Composition-токенов (опционально) |
settings
| Поле | Тип | По умолчанию | Описание |
|---|---|---|---|
remBase | number | 16 | Базовое значение для вычислений rem → px. Должно быть > 0, иначе используется 16 |
autoExportOnPull | boolean | false | Автоматически экспортировать токены после Git Pull |
collections[]
| Поле | Тип | Описание |
|---|---|---|
name | string | Имя коллекции в Figma (должно быть уникальным) |
enabled | boolean | Включена ли коллекция для экспорта |
hiddenFromPublishing | boolean | Скрыть коллекцию от публикации в библиотеке |
ref | RefRule[] | Ссылки на другие коллекции для резолва алиасов |
modes | ConfigMode[] | Массив режимов коллекции |
modes[]
| Поле | Тип | Описание |
|---|---|---|
name | string | Имя режима (mode) в Figma |
enabled | boolean | Включён ли режим для экспорта |
ref | RefRule[] | Ссылки на другие коллекции для этого режима |
files | object | Карта файлов: { "file.json": "enabled" | "disabled" | "source" } |
compositions
| Поле | Тип | По умолчанию | Описание |
|---|---|---|---|
outputMode | "component-set" | "separate" | "component-set" | Формат вывода: как Component Set или отдельные компоненты |
files | object | — | Карта файлов композиций |
Коллекции и режимы
Что такое коллекция
Коллекция (Collection) в Figma — это именованная группа переменных. Типичная дизайн-система имеет несколько коллекций:
{
"collections": [
{
"name": "Primitives",
"modes": [
{
"name": "Default",
"files": { "colors.json": "enabled", "spacing.json": "enabled" }
}
]
},
{
"name": "Semantic",
"modes": [
{
"name": "Light",
"files": { "semantic-light.json": "enabled" }
},
{
"name": "Dark",
"files": { "semantic-dark.json": "enabled" }
}
]
},
{
"name": "Component",
"modes": [
{
"name": "Default",
"files": { "components.json": "enabled" }
}
]
}
]
}
Что такое режим (mode)
Режим — это вариация коллекции. Классические примеры: Light / Dark, Small / Medium / Large, LTR / RTL. Каждый режим содержит свой набор файлов с токенами — одни и те же пути токенов с разными значениями.
Пример: semantic-light.json и semantic-dark.json содержат одинаковые пути (text.primary, bg.surface), но с разными цветами.
Collection Matrix и отсутствующие значения modes
Collection Matrix показывает объединение путей токенов по настроенным modes. Ячейка — означает, что токена нет в JSON этого mode; прочерк используется только для отображения и никогда не экспортируется как значение токена.
Полные и неполные строки экспортируются за один запуск. Неполная строка остаётся валидным token JSON, но у корневой Figma Variable всё равно есть значение для каждого mode коллекции. SXL Studio обрабатывает такой пропуск недеструктивно:
- Variables и Styles остаются в одном export;
- через
setValueForModeзаписываются только ячейки, явно заданные в JSON; - отсутствующая ячейка существующей live Variable остаётся без изменений;
- для отсутствующей ячейки новой Variable или нового mode SXL Studio не придумывает JSON-значение — сохраняется default, созданный Figma;
- отсутствующий JSON mode не помечается синхронизированным в Diff-ID, поэтому добавление значения позже обновляет ту же Variable с сохранением ID;
- orphan cleanup и destructive reorder отключаются, когда в export участвуют неполные строки;
- результат перечисляет каждый сохранённый, созданный Figma, пропущенный или ошибочный gap.
Если несколько настроенных файлов одного mode определяют одинаковый точный raw path токена, порядок файлов является источником правды: более поздний файл побеждает, а Export показывает warning. Настоящая структурная flatten-коллизия — разные raw-адреса JSON, превращающиеся в один export path, — по-прежнему останавливается до записей. Остальные валидные токены продолжают экспортироваться, если у одного токена некорректное значение, unresolved alias, формула или несовместимое значение; отчёт называет пропущенный путь. Только структурные состояния, которые нельзя безопасно разрешить, — например невалидный config.json, недоступные файлы, неоднозначная identity файла, структурная path-коллизия или несовместимые identity/type существующей Variable — останавливают затронутый export до небезопасных записей.
Примечание: после export
—остаётся отсутствующим в JSON, хотя Figma может показывать значение для этого mode Variable.
Ссылка: Figma Plugin API — Variable
Порядок коллекций
Порядок коллекций в массиве collections определяет порядок в Figma.
Начиная с текущей версии, destructive reorder выключен по умолчанию:
- если Sort variables & styles выключен — export вообще не делает синхронизацию порядка и оставляет текущий порядок как есть;
- если Sort variables & styles включен — export сначала пытается недеструктивно выровнять порядок;
- если строгий порядок коллекций всё ещё не совпадает и Allow destructive reorder выключен — export не пересоздаёт коллекции, а показывает warning;
- если флаг включён и подтверждён пользователем — плагин выполняет controlled
remove + recreateдля выравнивания порядка; - если включён
Adopt exact existing matches— destructive reorder не применяется.
Внимание: при пересоздании коллекций их Figma ID могут измениться. Включайте destructive reorder только как осознанное действие для выравнивания порядка.
Включение и отключение
Установите "enabled": false для коллекции или режима, чтобы исключить их из экспорта. То же для файлов — "disabled" пропускает файл:
{
"name": "Experiments",
"enabled": false,
"modes": [
{
"name": "Default",
"files": {
"experimental-tokens.json": "disabled",
"stable-tokens.json": "enabled"
}
}
]
}
В проектах, мигрированных из Tokens Studio, файл также может иметь статус "source". Source-файлы работают только для резолва: их токены могут быть целями алиасов и участвовать в определении типов, но сам файл не создаёт Figma Variables или Styles. Используйте это для базовых/primitive-наборов, на которые ссылаются enabled-файлы.
{
"name": "Semantic",
"modes": [
{
"name": "Light",
"files": {
"base.json": "source",
"semantic-light.json": "enabled"
}
}
]
}
Скрытие от публикации
hiddenFromPublishing: true создаёт коллекцию, но она не видна в других файлах при использовании библиотеки. Полезно для базовых примитивов, которые не должны быть доступны конечным пользователям дизайн-системы.
{
"name": "Primitives",
"hiddenFromPublishing": true,
"modes": [...]
}
Ссылки между коллекциями (ref)
Когда один токен ссылается на токен из другой коллекции, нужно указать плагину, где искать цель алиаса. Для этого используются правила ref.
Локальные ссылки
Ссылка на другую коллекцию в том же файле:
{
"name": "Semantic",
"ref": [{ "type": "local", "collection": "Primitives" }],
"modes": [
{
"name": "Light",
"files": { "semantic-light.json": "enabled" }
}
]
}
Если semantic-light.json содержит {color.blue.500}, а этот токен определён в коллекции Primitives, плагин найдёт его благодаря ref.
Ссылки на библиотеки
Ссылка на переменную из подключённой библиотеки Figma:
{
"ref": [
{
"type": "library",
"library": "Design System Core",
"collection": "Primitives"
}
]
}
| Поле | Тип | Описание |
|---|---|---|
type | "local" | "library" | Тип ссылки |
collection | string | Имя коллекции (обязательно) |
library | string | Имя библиотеки Figma (только для "library") |
mode | string | Имя режима (опционально) |
Уровни ссылок
- На уровне коллекции (
collections[].ref) — действует для всех режимов коллекции - На уровне режима (
modes[].ref) — действует только для конкретного режима
При резолве алиаса плагин проверяет ссылки в порядке: режим → коллекция → все локальные коллекции → библиотеки.
Совместимость алиаса определяется resolved-типом Figma Variable (FLOAT, COLOR, STRING или BOOLEAN), а не только более точным семантическим подтипом JSON. Например, токен number может безопасно ссылаться на borderWidth, а sizing — на lineHeight, потому что обе пары превращаются в FLOAT. Исходный токен сохраняет свой семантический тип для scopes и code syntax. Настоящее несовпадение resolved-типов, например number → color, пропускается с warning.
Порядок резолва алиасов
Когда плагин встречает ссылку {path.to.token}, он ищет целевую переменную в следующем порядке:
- Токены текущей коллекции / текущего режима
- Явные
refтипаlocal(другие коллекции в конфиге) - Все остальные локальные коллекции в файле
- Память из других diff-id файлов (по
figmaKey) - Явные
refтипаlibrary(по имени библиотеки и коллекции) - Индекс всех библиотек по имени коллекции
- Все переменные библиотек по имени
- Кэш импортированных переменных
Резолв значений и мутации
Перед записью в Figma export резолвит значения токенов, когда целевой формат требует literal value.
- Color-токены могут использовать inline-мутации вроде
rgba({color.base} {opacity.muted}). Ссылка на цвет может сама вести в другую мутацию, а ссылка на прозрачность может бытьopacity-токеном, например60%. - Значения
opacity, записанные процентными строками, используют FLOAT-шкалу Figma 0-100. Например,"1%"экспортируется как1, а"60%"как60. - В math-выражениях процентные токены подставляются как authoring number. Например, если
{base.scale}равно"1%", то{base.scale} * 95экспортируется как95.
Процесс экспорта
Этапы
Экспорт выполняется в несколько этапов:
- Парсинг config.json — проверка структуры, валидация имён, выявление дублей
- Сбор токенов — чтение файлов из каждого режима, парсинг DTCG JSON
- Загрузка diff-id — восстановление карты соответствий из предыдущего экспорта
- Индексация библиотек — сканирование локальных переменных и подключённых библиотек
- Экспорт переменных — цикл по коллекциям и режимам: создание, обновление, удаление
- Экспорт стилей — создание / обновление Text, Effect, Paint, Grid стилей
- Сохранение diff-id — запись карты в хранилище плагина
- Очистка — удаление «сирот» (если включён
deleteOrphans)
Большие наборы режимов
Figma может ограничивать количество режимов в одной variable collection. SXL Studio экспортирует структуру из config.json как есть и не разбивает одну JSON-коллекцию на несколько Figma-коллекций.
Если текущий тариф Figma не даёт создать дополнительный mode, export пропускает этот mode, сохраняет остальные modes и показывает warning с названием пропущенного режима. На тарифах, где доступно больше modes, тот же JSON экспортируется в исходную коллекцию.
Лимит не зашит в SXL Studio. Figma Plugin API сообщает его для текущего файла во время вызова addMode(). Если пользователь Enterprise видит лимит 20 modes, проверьте, что сам файл находится в нужном Enterprise workspace, а не в Drafts или команде с другим тарифом. Export продолжает работу со всеми существующими и созданными modes, оставляет отклонённые JSON modes несинхронизированными и повторяет их при следующем экспорте, не записывая ложные mode hashes в Diff-ID. См. Figma VariableCollection API и Figma plans and features.
Что такое «сироты»
Сироты (orphans) — это переменные и стили в Figma, которые были созданы предыдущим экспортом, но больше не существуют в JSON-файлах. При включённом deleteOrphans плагин:
- Удаляет переменные, пути которых больше нет в конфиге
- Удаляет режимы, которых нет в конфиге
- Удаляет коллекции, которых нет в конфиге
- Удаляет стили, пути которых больше не совпадают
Если используется Selected Collections, очистка orphan-элементов ограничена выбранными коллекциями. Управляемые стили из невыбранных коллекций сохраняются, поэтому частичный экспорт не удалит чужие style groups. Полный экспорт нужен только когда вы намеренно чистите orphan-элементы по всему token project.
Файлы diff-id
Что это
diff-id — это JSON-файл, который хранит карту соответствий между токенами в JSON и объектами в Figma. Он позволяет плагину:
- Определять, какие токены были изменены, добавлены или удалены
- Обновлять существующие переменные без дублирования
- Отслеживать коллекции, режимы, переменные и стили
Формат имени
Файл создаётся автоматически при первом экспорте:
diff-id.<file-key>.json— если доступен ключ файла Figmadiff-id.<slug-имени-документа>.json— иначе
Структура diff-id
{
"version": 2,
"$figmaFileName": "Design System",
"$figmaFileKey": "abc123def456",
"collections": {
"Primitives": {
"figmaId": "VariableCollectionId:123:456",
"modes": {
"Default": "123:789"
}
}
},
"variables": {
"color.primary": {
"figmaId": "VariableID:123:100",
"figmaKey": "abc123...",
"hash": "a1b2c3d4...",
"collectionPath": "Primitives"
}
},
"styles": {
"typography.heading.xl": {
"figmaId": "S:abc123...",
"hash": "e5f6g7h8...",
"type": "text"
}
}
}
Как работает хеш
Для каждого токена вычисляется хеш, включающий:
- Значение (
$value) - Scopes (
figma.scopes) - Code Syntax (
figma.codeSyntax) - Hide (
figma.hide) - Modify (
figma.modify)
При следующем экспорте плагин сравнивает хеш — если он не изменился, токен обычно пропускается, что ускоряет повторный экспорт.
Дополнительно работает drift-check для alias/bindings: если хеш не изменился, но целевой alias в Figma уже «уехал» (например, после обновления библиотеки), плагин выполняет точечный rebind без полного force-update.
Для экспортируемых FLOAT math-токенов с неизменившимся хешем Smart Export заново вычисляет выражение отдельно для каждого режима. Запись выполняется только тогда, когда новый вычисленный результат отличается от текущего значения в Figma, в том числе после изменения токена-зависимости; если результат не изменился, лишней записи в Figma и publish noise не возникает.
Хранение
diff-id хранится в Plugin Data документа Figma. На диск файл сохраняется при использовании Git-интеграции. При древовидной сериализации переменные и стили вкладываются в JSON по сегментам пути (для компактности), а при чтении разворачиваются обратно в плоскую карту.
Совет: если экспорт ведёт себя некорректно (дублируются переменные, не обновляются значения), попробуйте сбросить diff-id через меню плагина. Это заставит плагин заново просканировать все токены.
Флаги экспорта
При экспорте доступны следующие настройки:
Типы переменных
Фильтр по типу создаваемых переменных:
| Флаг | Figma тип | По умолчанию |
|---|---|---|
color | COLOR | ✅ Включён |
number | FLOAT | ✅ Включён |
string | STRING | ✅ Включён |
boolean | BOOLEAN | ✅ Включён |
Отключите тип, чтобы пропустить все переменные этого типа при экспорте.
Типы стилей
Фильтр по типу создаваемых стилей:
| Флаг | Тип стиля | По умолчанию |
|---|---|---|
typography | Text Style | ✅ Включён |
shadow | Effect Style | ✅ Включён |
blur | Effect Style | ✅ Включён |
effects | Effect Style | ✅ Включён |
glass | Effect Style | ✅ Включён |
fill | Paint Style | ✅ Включён |
gradient | Paint Style | ✅ Включён |
grid | Grid Style | ✅ Включён |
border | Paint Style | ⬜ Отключён |
Примечания:
- Токены
imgэкспортируются через переключательfill. - Токены
backdrop-blurэкспортируются через переключательblur. borderв текущем рантайме не экспортируется в Figma Styles (поле оставлено для совместимости схемы).
Параметры поведения экспорта
По умолчанию все переключатели поведения выключены.
Это самый безопасный режим: стабильные ID, без деструктивных действий, без лишних побочных изменений.
| Опция | По умолчанию | Что делает |
|---|---|---|
| Apply codeSyntax & scopes | ⬜ | Применяет к Variables метаданные $extensions.figma.scopes, $extensions.figma.codeSyntax, figma.hide и обновляет блок Code Syntax в описаниях стилей |
| Force update all | ⬜ | Игнорирует hash-оптимизацию и перезаписывает все подходящие variables/styles в выбранных коллекциях |
| Delete orphaned variables & styles | ⬜ | Удаляет управляемые элементы Figma, которых больше нет в токен-файлах/config. Необратимо |
| Sort variables & styles | ⬜ | Пытается недеструктивно выровнять порядок variables и styles по JSON (ID и привязки Diff-ID сохраняются) |
| Allow destructive reorder | ⬜ | Требует Sort variables & styles. Если порядок всё ещё не совпадает, разрешает controlled recreate коллекций для строгого порядка по JSON (риск churn ID) |
| Adopt exact existing matches | ⬜ | Если Diff-ID не содержит совпадения, принимает ровно одну локальную Figma Variable или Style с тем же именем и совместимым неизменяемым типом. Дубликаты, неоднозначные совпадения и кандидаты несовместимого типа остаются без изменений и попадают в отчёт |
| Selected Collections | Все | Экспортирует только выбранные коллекции. Пустой выбор = все коллекции |
Adoption — это явное действие для первого внедрения, а не fuzzy matching. Существующая привязка Diff-ID имеет приоритет. Без Diff-ID SXL Studio обновляет только одного кандидата с точным совпадением имени и типа. Плагин не выбирает между дубликатами и не преобразует Variable или Style другого типа.
Если Diff-ID потерян, но ровно одна Variable всё ещё содержит тот же принадлежащий SXL sxl:path, обычный export автоматически восстанавливает связь и сохраняет её Figma ID. Совпадение только по имени без SXL ownership по-прежнему требует включить Adopt exact existing matches.
Практические сценарии
- Ежедневный экспорт (рекомендовано): держите все behavior-опции выключенными. Это быстрый diff-export и стабильные ID.
- Изменился lineHeight/другой токен, а стиль выглядит «застрявшим»: сначала обычный export; если нужно, один прогон с Force update all, затем снова выключить.
- Изменили порядок в JSON: сначала включайте Sort variables & styles. Allow destructive reorder — только если нужен строго такой же порядок коллекций, и недеструктивный sync не помог.
- Миграция в уже существующий Figma-файл: включите Adopt exact existing matches на миграционный прогон, проверьте результат, затем выключите для обычной работы.
- Частичный экспорт коллекций с cleanup: выберите нужные коллекции и включайте Delete orphaned variables & styles только если хотите чистить именно их. Стили из невыбранных коллекций остаются защищены.
Совет по Delete Orphans: используйте с осторожностью. Если вы переименовали коллекцию или режим в конфиге, плагин воспримет старое имя как «сироту» и удалит его. Лучше сначала экспортировать без этого флага, убедиться что всё корректно, а потом запустить с
Delete Orphans.
Когда включать каждую опцию
| Опция | Когда включать | Когда не включать |
|---|---|---|
| Apply codeSyntax & scopes | Когда осознанно синхронизируете publishing-метаданные из token files | Когда нужны только обновления значений без metadata churn |
| Force update all | После миграций/ручных правок или для разового «полного рефреша» | Для обычного ежедневного экспорта |
| Delete orphaned variables & styles | Когда подтверждено, что удалённые пути действительно нужно физически удалить из Figma | Во время рефакторинга/переименований до финальной проверки |
| Sort variables & styles | Когда порядок в JSON изменился и нужен недеструктивный align variables + style folders/items | Когда текущий порядок приемлем или не критичен |
| Allow destructive reorder | Когда строгий порядок по JSON обязателен, а недеструктивный sync не сработал | Когда критична стабильность ID |
| Adopt exact existing matches | При первичном внедрении в файл, где уже есть подходящие variables/styles | Когда нужен строго изолированный create только из текущего token source |
Комбинации флагов (рекомендованные профили)
| Комбинация | Тумблеры | Что получаете |
|---|---|---|
| Ежедневный безопасный diff-export | Apply codeSyntax & scopes = OFF, Force update all = OFF, Delete orphaned... = OFF, Sort variables & styles = OFF, Allow destructive reorder = OFF, Adopt exact existing matches = OFF | Быстрый export, обновляются только реально изменённые значения/стили, минимальный Publish churn |
| Синхронизация метаданных | Apply codeSyntax & scopes = ON, остальные OFF | Обновление scopes/codeSyntax/hide-метаданных без полного переприменения значений |
| Выравнивание порядка (безопасно) | Sort variables & styles = ON, Allow destructive reorder = OFF, остальные обычно OFF | Best-effort выравнивание порядка variables + styles по JSON без смены ID |
| Строгое выравнивание порядка | Sort variables & styles = ON, Allow destructive reorder = ON (с осознанным подтверждением) | Принудительное выравнивание порядка коллекций, если safe-pass не сошёлся; возможен churn ID коллекций |
| Адаптация в существующий файл | Adopt exact existing matches = ON, Force update all = OFF, Allow destructive reorder = OFF | Подхватываются уже существующие local variables/styles, без создания дублей при первичной миграции |
| Recovery / полный refresh | Force update all = ON (временно), остальное по задаче | Полный rewrite всех совпавших элементов; полезно после ручных правок или stale-состояния |
Стили Figma
Как создаются стили
Стили создаются из составных (composite) токенов. Для мультимодальных коллекций значения стиля берутся из первого включённого режима.
| Тип токена | Тип стиля Figma |
|---|---|
typography | Text Style |
shadow | Effect Style |
effects | Effect Style |
blur | Effect Style |
backdrop-blur | Effect Style |
glass | Effect Style |
fill | Paint Style |
gradient | Paint Style |
grid | Grid Style |
Для токенов shadow и effects строки слоёв эффектов показываются в редакторе эффектов Figma в том же порядке, в котором они указаны в JSON-массиве.
Именование стилей
Путь токена преобразуется в имя стиля через замену точек на слеши:
- Токен
typography.heading.xl→ Стильtypography/heading/xl - Токен
shadow.card.md→ Стильshadow/card/md
Code Syntax в стилях
Когда включён флаг Apply Code Syntax & Scopes, значение figma.codeSyntax добавляется в описание стиля (description) текстовым блоком. Это позволяет разработчикам видеть нужный синтаксис прямо в свойствах стиля.
Destructive actions: удаление коллекций и стилей
Блок Destructive actions внутри окна Export разбит на два подблока — Collections и Styles. В обоих доступны:
- Поиск по имени (коллекция или группа стилей).
- Мультивыбор через клик по строке. По умолчанию выбраны все элементы
→ кнопка принимает форму
Delete all variable collections/Delete all styles. Как только пользователь снимает часть галочек, кнопка меняется наDelete N selected collection(s)/Delete N selected group(s). - Две глобальные кнопки остаются: «Выбрать всё» по умолчанию эквивалентно
поведению старого
Delete All ….
Collections
- Список всех локальных коллекций переменных в текущем Figma‑файле с количеством переменных и режимов.
- Можно удалить как все сразу, так и выбранные.
- При удалении:
- Коллекция полностью убирается из Figma (переменные, привязанные к слоям, теряют привязку).
- Из
diff-id.<fileKey>.jsonудаляются только записи, относящиеся к удалённым коллекциям (collections[name], всеvariablesсcollectionPath = name, все связанныеcompositions). - Если после очистки
diff-idоказался пустым — файл помечается на удаление из Git (push‑индикатор покажет это как удалённый файл).
Styles
- Список групп стилей, сгруппированных по первому сегменту имени:
например, стили
w-mylib/typography/body,w-mylib/fill/brand,legacy/shadow/cardсоберутся в группыw-mylibиlegacy. - Рядом с именем группы показывается распределение по типам
(
paint / text / effect / grid) и общий счётчик. - Можно удалить как все группы сразу, так и выбранные.
- При удалении:
- Удаляются все локальные стили, имя которых начинается с выбранного
префикса +
/(или совпадает с ним целиком). - Из
diff-idубираются записиstyles[path], у которых первый сегмент равен одному из удалённых префиксов. - Если
diff-idстал пустым — файл также помечается на удаление из Git.
- Удаляются все локальные стили, имя которых начинается с выбранного
префикса +
Что исправлено
Ранее Delete All Collections / Delete All Styles после массового удаления
могли оставлять устаревшие ссылки в diff-id. В результате при следующей
привязке токенов к слоям удалённые переменные могли появляться снова.
В текущей версии:
diff-idвсегда обновляется корректно (partial или full clear).- При полной очистке файл
diff-id.<fileKey>.jsonпомечается как удалённый для Git и исчезает с remote при ближайшем push. - Устаревшие ссылки очищаются сразу после удаления — никаких «призрачных» переменных больше не создаётся.
Внимание: все операции в блоке Destructive actions необратимы. Перед массовым удалением рекомендуется сохранить версию Figma‑файла и закоммитить текущее состояние токенов в Git.
Полный пример config.json
Типичная конфигурация для дизайн-системы с примитивами, семантическими токенами и компонентными токенами:
{
"$schema": "sxl-studio/config",
"$version": "1.0",
"settings": {
"remBase": 16,
"autoExportOnPull": false
},
"collections": [
{
"name": "Primitives",
"enabled": true,
"hiddenFromPublishing": true,
"modes": [
{
"name": "Default",
"enabled": true,
"files": {
"core/colors.json": "enabled",
"core/spacing.json": "enabled",
"core/typography.json": "enabled",
"core/effects.json": "enabled"
}
}
]
},
{
"name": "Semantic",
"enabled": true,
"ref": [{ "type": "local", "collection": "Primitives" }],
"modes": [
{
"name": "Light",
"enabled": true,
"files": {
"themes/light.json": "enabled"
}
},
{
"name": "Dark",
"enabled": true,
"files": {
"themes/dark.json": "enabled"
}
}
]
},
{
"name": "Components",
"enabled": true,
"ref": [
{ "type": "local", "collection": "Semantic" },
{ "type": "local", "collection": "Primitives" }
],
"modes": [
{
"name": "Default",
"enabled": true,
"files": {
"components/button.json": "enabled",
"components/input.json": "enabled",
"components/card.json": "enabled"
}
}
]
}
],
"compositions": {
"outputMode": "component-set",
"files": {
"compositions/button.json": "enabled",
"compositions/card.json": "enabled"
}
}
}
В этом примере:
- Primitives — базовые значения (цвета, отступы), скрыты от публикации
- Semantic — имеет два режима (Light / Dark), ссылается на Primitives
- Components — токены для компонентов, ссылается на Semantic и Primitives
Автоматический экспорт после Git Pull
Установите autoExportOnPull: true в settings, чтобы плагин автоматически экспортировал токены после каждого Git Pull.
Auto-export использует текущие значения по умолчанию рантайма:
- типы переменных: все включены (
color,number,string,boolean) - типы стилей: включены (
typography,shadow,blur,effects,glass,fill,gradient,grid),borderвыключен - поведенческие флаги: все OFF (
Apply codeSyntax & scopes,Force update all,Delete orphaned...,Sort...,Allow destructive reorder,Adopt exact existing matches)
{
"settings": {
"autoExportOnPull": true
}
}
Подробнее о Git-интеграции — в разделе Git — интеграция.
Советы и типичные проблемы
Переменные дублируются
- Проверьте, не сбросился ли diff-id. Включите Adopt exact existing matches, чтобы плагин подхватил одну совместимую и однозначно найденную существующую Variable или Style.
- После Migration TS проверьте warnings перед первым export. Миграция конвертирует JSON и config, но существующие ссылки Figma из Tokens Studio могут требовать adoption/rebind, чтобы не создать дубли Variables/Styles.
Значения не обновляются
- Возможно, хеш не изменился. Включите Force Update All для принудительного обновления.
Алиасы не резолвятся
- Проверьте
refв конфиге — указана ли коллекция, содержащая целевой токен. - Убедитесь, что файл с целевым токеном
"enabled".
Коллекции пересоздаются
- Проверьте флаг Allow destructive reorder:
- выключен → пересоздания быть не должно (будет warning о mismatch);
- включён → пересоздание допускается после confirm.
Связанные разделы
- Обзор Tokens — общая структура вкладки
- Scopes и Code Syntax — настройка видимости и кода
- Tokens to Code — генерация кода из токенов
- Composition — генерация компонентов из JSON
- Git — интеграция — синхронизация через Git
- Миграция из Tokens Studio — конвертация token-файлов Tokens Studio и
$themes.json