FISYCO

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

Токены в CSS, SCSS и TypeScript

Обновлено 30 сентября 2026 г.

Библиотека токенов превращает переменные и стили Figma в файлы в вашем репозитории: пользовательские свойства CSS, SCSS, TypeScript, JSON и формат DTCG. На этой странице описаны настройки, которые определяют эти файлы, и то, как использовать их в коде.

Перед началом

  • Figma подключена к вашему пространству, и файл с переменными доступен через это подключение.
  • К проекту подключён репозиторий. См. Подключение репозитория.
  • Для переменных из Figma нужен тариф Enterprise на стороне Figma или плагин FISYCO. См. Плагин FISYCO для Figma.

Форматы вывода

Выберите один или несколько форматов в поле Форматы вывода. В новых библиотеках по умолчанию выбраны DTCG, JSON, CSS, TypeScript и .d.ts.

Имена

Каждый токен становится CSS-переменной с именем по его пути в Figma: color/bg/surface превращается в --token-color-bg-surface.

  • Префикс CSS-переменных заменяет token. С префиксом acme переменная называется --acme-color-bg-surface.
  • Регистр имён задаёт регистр каждого сегмента пути: по умолчанию kebab-case, либо camelCase.

Алиас остаётся алиасом. Переменная, которая ссылается на другую, становится var(--token-…) в CSS и ссылкой в DTCG.

Режимы

Стратегия режимов определяет, как записываются светлый, тёмный и другие режимы:

  • Значения внутри: tokens.css содержит значения по умолчанию в :root и по одному блоку [data-theme="dark"] на режим. Чтобы переключить режим, задайте data-theme на <html> или любом другом элементе.
  • Отдельные файлы: каждый режим получает свой файл tokens.<mode>.css (и .scss, если он выбран), названный по режиму в kebab-case. Подключите нужный файл или каждый файл под своим media query.

Формат DTCG в любом случае записывает по одному полному файлу на режим.

Структура

В поле Структура вывода по умолчанию выбрано Один файл. Вариант По слоям переносит CSS в папку styles/ и добавляет точку входа styles.css, которая импортирует базовые файлы. Если режимы лежат в отдельных файлах, точка входа их не импортирует, потому что каждый из них задаёт :root. Подключайте файл режима отдельно.

Использование токенов

В CSS:

@import "./tokens/tokens.css";

.card {
  background: var(--token-color-bg-surface);
  color: var(--token-color-text-primary);
}

Числа из Figma, например отступы и радиусы, записываются без единицы измерения: --token-spacing-md: 16;. Добавьте единицу там, где их используете:

.card {
  padding: calc(var(--token-spacing-md) * 1px);
}

Текстовые стили становятся классами в token-styles.css, а также переменной с сокращённой записью font, например 700 24px/32px "Inter".

В TypeScript файл tokens.ts экспортирует дерево токенов и список путей, поэтому опечатка в пути токена не пройдёт проверку типов.

Получите pull request

После синхронизации откройте библиотеку и нажмите Создать PR или включите Автоматически создавать PR после каждой синхронизации. В описании pull request перечислены добавленные, изменённые и удалённые токены по имени. Переменная, переименованная в Figma, сохраняет свой ID, поэтому приходит как переименование.

Связанные материалы