Импорт Переменных и Стилей
Импорт локальных переменных и стилей Figma в token JSON: режимы Smart/Strict/Generate, обновление config.json и поддержка round-trip через diff-id.
Overview
Импорт Переменных и Стилей преобразует локальные Variables и Styles из текущего Figma-файла в DTCG token JSON. Это обратный поток относительно Экспорта Переменных и Стилей.
| Импортирует | Также обновляет |
|---|---|
| Локальные коллекции переменных → variable-токены | config.json (коллекции / modes / файлы) |
| Локальные text / paint / effect / grid стили → токены | diff-id.json (для diff-safe round-trip экспорта) |
Импорт работает только с локальными коллекциями/стилями в текущем открытом файле Figma (без REST-пайплайна), как с config.json, так и без него.
Как открыть
- Откройте вкладку Tokens.
- Нажмите Import variables & styles в нижнем блоке действий.
В заголовке модалки сейчас используется UI-имя Import from Figma.
Что выбирается перед импортом
Variable collections
- Источник: локальные коллекции переменных Figma.
- Переключатель в заголовке секции = выбрать всё / снять всё.
- Если коллекции есть, должна остаться выбрана минимум одна.
Style groups
- Источник: локальные text/paint/effect/grid стили Figma.
- Правило группировки: первый сегмент пути стиля (
Group/Name-> группаGroup). - Если группы есть, должна остаться выбрана минимум одна.
Фильтры по типам
Импортируются только включённые типы.
Переменные
| Переключатель | Figma resolved type |
|---|---|
color | COLOR |
number | FLOAT |
string | STRING |
boolean | BOOLEAN |
Стили
| Переключатель | Вид стиля Figma |
|---|---|
typography | Text styles |
fill, gradient | Paint styles |
shadow, blur, effects, glass | Effect styles |
grid | Grid styles |
border | Зарезервирован в схеме/UI; отдельного импорта border-style из Figma в текущем рантайме нет |
Режимы маппинга config
| Режим | Runtime key | Поведение |
|---|---|---|
| Smart (по умолчанию) | smart | Использует существующие пути из config, где это возможно; добавляет отсутствующие коллекции/моды/файлы для выбранных данных; объединяет alias-derived зависимости ref; может сохранить обновлённый config.json. |
| Strict | from-config | Импортирует только в пути, уже описанные в config.json; неизвестные коллекции/моды пропускаются с предупреждениями. |
| Generate | generate | Строит greenfield-структуру коллекций/модов/файлов на основе выбранных Figma-коллекций и сохраняет её в config.json. |
Если в UI выбран Strict, но валидного config нет, запуск блокируется до смены режима.
Опции поведения импорта
| Опция | Runtime field | Что делает |
|---|---|---|
| Multi-file layout (greenfield) | fileLayout | Для generated/greenfield путей: несколько файлов на mode (multi-file) или один файл на mode (single-per-mode). |
| Overwrite existing token values | conflictPolicy | ON = overwrite, OFF = merge-only (merge-only). |
| Preserve variable aliases as {paths} | aliasPolicy | ON = сохранять алиасы (preserve-path), OFF = по возможности литерализовать (literalize). |
| Map Figma scopes -> $extensions | readScopesToExtensions | Записывает figma.scopes в импортированные variable-токены (best effort). |
| Update diff-id.json | updateDiffId | Сохраняет Figma ID и хеши для round-trip экспорта. |
| FLOAT -> dimension | floatSemantic | Управляет маппингом FLOAT: dimension (по умолчанию) или number. |
Куда записываются файлы
Smart / Strict при наличии маршрутов в config
Данные пишутся в enabled-пути из config.json (collections[].modes[].files).
Generate (или greenfield-добавления в Smart)
Создаётся новый путь вида:
<slug-коллекции>/<slug-мода>/...
Fallback для стилей
Если маршрутов для стилей нет, импорт может писать в:
styles/imported-styles.json
Как сериализуются значения
- Алиасы переменных сохраняются как
{token.path}, если включено сохранение алиасов. - Bound-переменные внутри стилей (typography, paint, effects) сериализуются той же alias-политикой.
- Пути токенов нормализуются из Figma-имён.
Ограничения и заметки
- Image paint styles импортируются как
imgс пустым URL-плейсхолдером ({ "url": "" }). - Часть сложных эффектов может приходить как объект
effectsи требовать ручной доработки. - Strict режим критично зависит от точности
config.json; отсутствующие маршруты пропускаются. - Импорт затрагивает только выбранные коллекции/группы и включённые type-toggle.
Минимальный пример результата
{
"color": {
"brand": {
"primary": {
"$type": "color",
"$value": "#0057ff"
}
}
},
"typography": {
"body": {
"md": {
"$type": "typography",
"$value": {
"fontFamily": "Inter",
"fontSize": "16px",
"lineHeight": "24px"
}
}
}
}
}