FISYCO

Публичная бета
РазрывСтоимостьКак работаетПродуктБезопасность
Войти

Формат W3C DTCG: что стандарт наконец закрепил

5 мин чтения

Дизайн-системы
A timeline of glass markers from 2019 to 2025 ending in a highlighted token file card

Шесть лет «формат DTCG» означал черновик, который продолжал меняться. Инструменты брали ту версию, что была актуальна на старте. Поэтому два файла, оба «в формате DTCG», могли не сойтись даже в том, где лежит значение: в value или в $value. Позже к этому добавился способ записи цвета. 28 октября 2025 года Design Tokens Community Group опубликовала первую стабильную версию, 2025.10. Ниже о том, что она закрепила, чем отличается от черновиков, которые многие инструменты пишут до сих пор, и что проверить в своих файлах.

Коротко
- DTCG 2025.10 — итоговый отчёт Community Group (Final Community Group Report), он «считается стабильным», но это не стандарт W3C (Format Module 2025.10).
- Цвета и размеры теперь объекты, а не строки: { "value": 16, "unit": "px" } вместо "16px".
- Темы вроде светлой и тёмной вынесены в отдельный Resolver Module, опубликованный в тот же день.
- Поддержка в инструментах сильно различается: прежде чем строить на экспортёре, проверьте, что он пишет на самом деле.

От предложения к стабильной версии

От предложения до стабильного отчёта формат прошёл три редакторских черновика и шесть лет.

Большинство инструментов учились на черновике 2022 года, поэтому сравнивать удобнее всего с ним.

Что изменила версия 2025.10

Два полных токена в версии 2025.10 выглядят так. Здесь есть тип на группе, структурное значение, описание, ссылка и пометка об устаревании:

{
  "color": {
    "$type": "color",
    "brand": {
      "$value": { "colorSpace": "srgb", "components": [0.1451, 0.3882, 0.9216], "alpha": 1, "hex": "#2563eb" },
      "$description": "Primary brand colour"
    },
    "primary": {
      "$value": "{color.brand}",
      "$deprecated": "Use color.brand"
    }
  }
}

$type на группе действует на оба токена внутри неё.

Структурные значения

Главное практическое изменение: значения больше не строки, которые инструменту приходится разбирать. Размер — это объект с числовым value и единицей unit, px или rem (Format Module 2025.10). Цвет называет своё цветовое пространство и компоненты. Именно это открывает дорогу цветам широкого охвата: значение oklch или display-p3 не запишешь hex-строкой. Поле hex остаётся необязательным запасным вариантом для инструментов, которые понимают только sRGB.

Два способа сослаться

Ссылки в фигурных скобках работают как раньше и всегда разрешаются в $value целевого токена. Версия 2025.10 добавляет вторую запись: $ref с путём JSON Pointer (RFC 6901). По спецификации инструменты «ОБЯЗАНЫ поддерживать» её (MUST support). Это тот же синтаксис указателей, что и в JSON Schema, так что такие ссылки разрешат уже существующие библиотеки для JSON Pointer.

Группы с наследованием

Теперь группа может расширять другую группу через $extends и переопределять только то, что отличается. Например, группа button-primary наследует всё от button и меняет два токена. Это удобно для компонентного уровня из нашего руководства по именам токенов: группа варианта наследует токены базового компонента и переопределяет несколько из них. Ещё группа может держать токен $root рядом с дочерними. А любой токен или группу можно пометить $deprecated и при желании написать, что их заменяет.

Темы переехали в отдельный модуль

Format Module ничего не знает о светлой и тёмной теме. Resolver Module, опубликованный в тот же день, «описывает способ работать с дизайн-токенами в нескольких контекстах (например, в цветовых темах „светлый режим“ и „тёмный режим“)» (Resolver Module 2025.10). Он работает с наборами токенов и модификаторами, которые переключают контексты, и применяет их в заданном порядке разрешения.

Поддержка у него пока молодая. Style Dictionary 5.5.5 ещё не читает документы резолвера, поэтому конвейеры на нём по-прежнему держат по одному файлу токенов на режим.

Кто что читает

Поддержка неравномерная: Figma читает и пишет дизайн-токены в DTCG JSON, Style Dictionary v5 на полпути к 2025.10, а некоторые экспортёры до сих пор пишут hex и строки "16px".

Блог Figma объясняет, почему поддержка появилась не сразу: компания отложила нативный импорт и экспорт, пока группа не «завершила свой релиз 1.0» (Figma, Schema 2025 recap).

Что проверить в своих файлах

Файл может называться DTCG и при этом иметь форму 2022 года. Четыре быстрые проверки:

  1. Цвета. Строка вроде "#2563eb" означает старый черновик. В 2025.10 это объект с colorSpace и components.
  2. Размеры. "16px" означает старый черновик, в 2025.10 это { "value": 16, "unit": "px" }.
  3. Типы. string и boolean не входят в типы DTCG. Figma всё равно принимает строки при импорте, другие инструменты могут их не принять.
  4. Режимы. Один файл на режим — рабочий ответ сегодня. Документ резолвера — ответ по стандарту, когда ваши инструменты научатся его читать.

Если сборка у вас на Style Dictionary, в статье Style Dictionary на практике файл 2025.10 проходит через пятую версию в CSS, SCSS и TypeScript, в той части, которую она поддерживает.

Где сейчас FISYCO

Мы делаем FISYCO, и его экспорт токенов пишет версию 2025.10: структурные цвета, объекты размеров, ссылки остаются ссылками, один файл на режим, а ID переменной Figma лежит в $extensions. Строки и булевы значения уходят без $type, исходный тип Figma сохраняется в $extensions. Для новых библиотек токенов это формат по умолчанию. Как эти файлы вообще попадают из Figma наружу, читайте в статье переменные Figma без тарифа Enterprise.

Выгрузите переменные Figma в файлы DTCG 2025.10 и получите их в pull request.
#Дизайн-токены
KK

Автор статьи

Kirill Karpov

Основатель FISYCO

Кирилл Карпов — основатель FISYCO, инструмента контроля дизайн-системы, который держит Figma и код продакшена в согласии.

Новые статьи на почту

Дизайн-системы, токены и доставка дизайна в код. Без спама, отписка в один клик.

Подписываясь, вы соглашаетесь получать письма блога FISYCO. Подробности — в политике конфиденциальности.

Держите дизайн-систему и код в согласии

FISYCO связывает библиотеки Figma с кодовой базой, находит расхождения и присылает правку пулреквестом.

Начать бесплатно

Похожие статьи

6 мин чтения

Дизайн-системы

Имена токенов: три уровня, которые выживут ребрендинг

Плоские имена вроде blue-500 ломаются при первой смене бренда. Три уровня токенов сохраняют код компонентов нетронутым при ребрендинге и тёмной теме.

6 мин чтения

Дизайн-системы

Как измерить здоровье дизайн-системы, а не угадывать

Большинство команд судят о дизайн-системе по ощущениям. Четыре сигнала (расхождения, охват, обходы и время исправления) дают дизайну, разработке и руководству одну картину.

5 мин чтения

Дизайн-системы

Почему продакшен тихо расходится с дизайн-системой

Расхождение дизайна и кода редко возникает из-за одной большой ошибки. Разбираем, откуда оно берётся, почему его никто не видит и когда оно начинает стоить денег.

Формат DTCG 2025.10: что закрепил стандарт токенов | FISYCO