Плагин для Figma

Specsure Token Export выгружает переменные и стили файла Figma как дизайн-токены в DTCG 2025.10, формате W3C, — так, что Token Diff, Token Fix, CLI dsgraph и CI читают их как есть. Плагин только читает файл и ничего в нём не меняет, а доступа к сети у него нет. Установить из Figma Community

Ниже — сам плагин, каким его показывает Figma, на небольшом учебном файле: четыре коллекции, у двух из них есть режимы, и стили всех видов. Нажмите Read file, а потом скачайте то, что он выгрузит.

Как пользоваться

Откройте файл с переменными и стилями и запустите Plugins → Specsure Token Export.
Read file (↵). Плагин покажет коллекции с режимами, стили по видам и заметки о том, что он пропустил.
Выберите, как сохранить:
- .zip: по файлу на коллекцию и режим, с резолвером; так токены лежат в репозитории, и так их читает большинство инструментов.
- One file: один файл, где каждый режим внутри своего токена, — его можно сразу открыть в Token Fix или Token Diff. Copy копирует его в буфер обмена.
Используйте. Перетащите .zip или один файл в Token Fix или Token Diff либо распакуйте .zip в репозиторий.

Что получится

В .zip — одна папка:

tokens/
  Primitives.tokens.json        коллекция с одним режимом
  Theme/Light.tokens.json       коллекция с режимами: по файлу на режим
  Theme/Dark.tokens.json
  styles.tokens.json            стили цвета, текста, эффектов и сеток
  tokens.resolver.json          связывает коллекции и режимы

Резолвер — это способ DTCG сказать, из каких файлов складывается тема. Каждая коллекция с режимами становится модификатором, а её режим по умолчанию — значением по умолчанию:

"modifiers": {
  "Theme": {
    "contexts": {
      "Light": [{ "$ref": "Theme/Light.tokens.json" }],
      "Dark": [{ "$ref": "Theme/Dark.tokens.json" }]
    },
    "default": "Light"
  }
}

В одном файле — те же токены, а значения режимов лежат в $extensions.mode: для инструментов, которые читают только один файл.

Как Figma становится DTCG

Figma	DTCG
Цвет	`color`, hex сохраняется
Число	`dimension` в px для длин, `fontWeight` для начертаний, иначе `number`
Строка	`fontFamily` для семейств шрифтов, `fontWeight` для названий начертаний; остальные строки пропускаются
Кривая	`cubicBezier`, включая back-кривые Figma
Время	`duration` в мс
Режим	контекст модификатора коллекции в резолвере
Текстовый стиль	`typography`, привязанные переменные — ссылками
Стиль эффекта	`shadow`
Стиль цвета	`color` или `gradient`
Стиль сетки	группа её чисел: `count`, `gutter`, `offset` и `size` для каждой сетки

Имя переменной становится путём токена: color/text/default — это color.text.default, а ссылка остаётся ссылкой, {color.gray.900}, в том числе между коллекциями. Описания, области применения (scopes), code syntax и id переменных попадают в $extensions, под com.figma.

Где типы определяются правильно

Figma хранит меньше сведений о типах, чем требует DTCG, и плагин берёт их там, где они есть:

Числа — по scopes. Число, которое предлагается для отступов, скруглений, размеров, обводок или кегля, — это длина в px. Число без scopes получает тип от переменных, которые на него ссылаются, поэтому примитив, на который ссылаются размеры шрифта, тоже станет размером.
Прозрачность — долями. Figma хранит прозрачность в процентах, а DTCG ждёт долю: 40 становится 0.4.
Начертания — числами. Строковая переменная с названиями начертаний, к которой привязывают начертание в текстовом стиле, становится весом: Semi Bold — это 600. Текстовый стиль ссылается на неё.
Интерлиньяж — множителем. В типографике DTCG высота строки задаётся как доля кегля: 24px при кегле 16px — это 1.5.
Имена, которые не ломают ссылки. DTCG не разрешает точку в имени: opacity/0.5 становится opacity.0-5, и ссылка на него не сломается.

Текстовый стиль Body из учебного файла привязан к семейству шрифта и к кеглю, который меняется вместе с плотностью:

"Body": {
  "$type": "typography",
  "$value": {
    "fontFamily": "{font.family.sans}",
    "fontSize": "{font.size.body}",
    "fontWeight": 400,
    "letterSpacing": { "value": 0, "unit": "px" },
    "lineHeight": 1.5
  }
}

Коллекции, библиотеки и составные цвета

Расширенные коллекции выгружаются как отдельные коллекции — со всем, что они наследуют, с применёнными переопределениями и режимами родителя.
Одинаковые имена в двух коллекциях: токены каждой коллекции записываются под её именем, ссылки на них — тоже, чтобы при совместном чтении одна не заменила другую.
Переменная из библиотеки выгружается своим значением, а её имя сохраняется в com.figma.alias.
Цвет, составленный из цвета и прозрачности, выгружается как цвет с альфой, а обе переменные записываются в com.figma.composedColor.

Что не выгружается

Всё, для чего в DTCG нет типа, пропускается и перечисляется после чтения с причиной: логические значения и просто строки, пружины (у них нет кубической кривой Безье), эффекты размытия и стили из нескольких заливок.

Приватность

Плагин читает открытый файл и ничего в него не пишет. В манифесте ему не дан доступ к сети, поэтому Figma не даст ему ничего никуда отправить: токены окажутся только там, куда вы их сохраните.

Что дальше

Поправить код. В Token Fix найдите токен для каждого значения и то, что в вашем коде вписано руками.
Сравнивать релизы. Выгрузите токены до и после изменения и сравните обе выгрузки в Token Diff: что сломается, в каком режиме и какую версию выпускать.
Держать в репозитории. Распакуйте .zip в репозиторий, и GitHub Action будет сравнивать каждый pull request с базовой веткой.

Исходники: apps/figma-plugin. Преобразование — figmaTokens в @dsgraph/adapters, оно проверено тестами без Figma; тот же код dsgraph использует для ответа REST API Figma.