Из Figma

Нативная выгрузка Figma работает без конвертации: Variables → правый клик по коллекции → Export modes даёт по одному файлу *.tokens.json (DTCG) на каждый режим.

Как разложить файлы

1. Файл с примитивами (коллекция без режимов) положите в source.
2. Файлы режимов — в themes: по одному файлу на тему (light, dark, …). Имя файла не важно.

{
  "version": 4,
  "source": ["tokens/Primitives.tokens.json"],
  "themes": {
    "light": ["tokens/Light.tokens.json"],
    "dark": ["tokens/Dark.tokens.json"]
  },
  "output": "./styles",
  "themeAliases": {
    "color": "color",
    "radius": "radius",
    "spacing": "1px",
    "font": "font/family",
    "text": "font/size"
  }
}

Цвета объектом (colorSpace, components, hex), ссылки ("{color.blue.600}") и служебные $extensions (com.figma.*) обрабатываются. Подробнее о режимах — в разделе Темы.

Числа без единицы

Figma выгружает FLOAT-переменную как число без единицы ("$type": "number"). В CSS --radius-4: 4 недействительно, поэтому голые числа в размерных ключах получают единицу. Её задаёт опция numberUnit:

Размерные ключи в Tailwind 4: spacing, radius, text, breakpoint, container, blur. В Tailwind 3: spacing, borderRadius, borderWidth, fontSize, screens, width, height, minWidth, maxWidth, minHeight, maxHeight, size, blur, inset, gap, margin, padding. Остальные ключи (leading, font-weight, opacity, z-index) и значение 0 остаются числами.

Ограничения

Figma не выгружает description переменных, а составные стили (типографика, тени) в нативной выгрузке неполные.