Импорт из Figma

Import variables & styles читает локальные переменные и стили открытого файла Figma и записывает их в JSON-файлы токенов. Это обратный путь к экспорту: так удобно начать с уже существующей библиотеки Figma или подтянуть в JSON правки, сделанные прямо в панели Variables.

Импорт работает только с локальными коллекциями и стилями текущего файла. Переменные из подключённых библиотек он не читает; для переноса значений из другого файла есть Cross-file Sync.

#Как импортировать

1. На вкладке Tokens нажмите Import variables & styles внизу дерева. Откроется окно Import from Figma.
2. Отметьте коллекции переменных и группы стилей, которые нужно импортировать. Галочка в заголовке секции выбирает или снимает все. Хотя бы одна коллекция или группа должна быть выбрана.
3. Проверьте типы: переключатели Color, Number, String, Boolean, Timing, Easing для переменных и Typography, Fill, Gradient, Shadow, Blur, Effects, Glass, Grid для стилей.
4. Выберите режим и параметры, затем нажмите Import. Новые файлы появятся в дереве, config.json обновится.

Окно Import from Figma: коллекции переменных, группы стилей, типы и параметры.

Группа стилей — это первый сегмент имени стиля: стили Brand/Primary и Brand/Secondary попадают в группу Brand.

#Режимы

Если config.json не читается или не проходит проверку, режимы Smart и Strict останавливают импорт с сообщением об ошибке, ничего не записывая. Исправьте файл или выберите Generate.

#Параметры

#Куда записываются файлы

• В режимах Smart и Strict данные попадают в файлы, указанные для коллекции и режима в config.json.
• Новые пути в режимах Generate и Smart создаются как <коллекция>/<режим>/….
• Стили без своего маршрута записываются в styles/imported-styles.json.

#Что получается в JSON

• Переменные Color, Number, String и Boolean становятся токенами соответствующих типов; Timing и Easing токенами duration, cubicBezier и easing.
• Цвет с привязанной переменной прозрачности возвращается как ссылка на цвет с модификатором alpha, ссылающимся на токен прозрачности.
• Текстовые стили становятся токенами typography, стили заливки fill или gradient, стили сеток grid с полями pattern, count, gutterSize, sectionSize, offset, alignment. Из многослойного стиля заливки импортируется только первый слой.
• Стили эффектов возвращаются слоями: стиль из одних теней даёт токен shadow, стиль с разными видами эффектов, включая шум, текстуру, стекло и прогрессивное размытие, токен effects. Стиль только из стеклянных слоёв импортируется переключателем Glass, смешанный переключателем Effects. Переменные, привязанные внутри стилей, сохраняются ссылками.
• Изображения в стилях заливки импортируются токеном img с пустым адресом, который нужно заполнить вручную.
• Имена переменных превращаются в пути токенов, разделитель / становится вложенностью групп.

Минимальный пример результата:

{
  "color": {
    "brand": {
      "primary": { "$type": "color", "$value": "#0057ff" }
    }
  },
  "typography": {
    "body": {
      "md": {
        "$type": "typography",
        "$value": { "fontFamily": "Inter", "fontSize": "16px", "lineHeight": "24px" }
      }
    }
  }
}

#Если что-то не работает

#См. также

• Экспорт переменных и стилей
• JSON-формат токенов
• Cross-file Sync